Interface: ResourceProvider

ReportDesigner.ResourceProvider

Defines the contract for a custom resource provider.

remarks Implement this interface to control how external resources are listed and resolved.

example

const createProvider = (): ResourceProvider => ({
	getReportsList: async () => [],
	getThemesList: async () => [],
	getImagesList: async () => [],
	getMasterReportList: async () => [],
	getStylesheetList: async () => [],
	getResource: async () => null,
	getResourceUri: (id) => id,
	fork: () => createProvider(),
});

const provider = createProvider();

Hierarchy

• ResourceLocator

  ↳ ResourceProvider

Table of contents

Methods

• fork
• getImagesList
• getMasterReportList
• getReportsList
• getResource
• getResourceUri
• getStylesheetList
• getThemesList

Methods

fork

▸ fork(reportName): ResourceLocator

Gets or sets a function that creates a child resource locator scoped to a report.

example

const locator = {} as ResourceLocator;
const child = locator.fork('subreport.rdlx-json');

Parameters

Name	Type	Description
reportName	string	The report name or relative path used to scope the locator.

Returns

ResourceLocator

A new resource locator instance.

Inherited from

ResourceLocator.fork

---

getImagesList

▸ getImagesList(): Promise<ImageResourceInfo[]>

Gets the list of images available in the designer.

example

import Cat from './resource/images/Cat.png';
import Dog from './resource/images/Dog.jpg';

const images = { Cat, Dog };

const getImagesList = async (): Promise<ImageResourceInfo[]> =>
	Object.keys(images).map((image) => ({
		id: `image://${image}`,
		displayName: image,
		mimeType: '',
		thumbnail: '',
	}));

const designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
	'#designer-host'
);

designer.setResourceProvider({ getImagesList });

Returns

Promise<ImageResourceInfo[]>

A promise that resolves to an array of images that users can insert into reports.

---

getMasterReportList

▸ getMasterReportList(): Promise<ReportResourceInfo[]>

Gets the list of master reports available in the designer.

example

import Master1 from './resource/masterReports/Master1.rdlx-json-master';
import Master2 from './resource/masterReports/Master2.rdlx-json-master';

const masterReports: Record<string, ReportResourceInfo> = { Master1, Master2 };

const getMasterReportList = async (): Promise<ReportResourceInfo[]> =>
	Object.keys(masterReports).map((masterReport) => ({
		id: `report://${masterReport}`,
		displayName: masterReport,
	}));

const designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
	'#designer-host'
);

designer.setResourceProvider({ getMasterReportList });

Returns

Promise<ReportResourceInfo[]>

A promise that resolves to an array of master reports that users can select.

---

getReportsList

▸ getReportsList(): Promise<ReportResourceInfo[]>

Gets the list of reports available in the designer.

example

import MSL from './resource/reports/MSL.rdlx-json';
import FPL from './resource/reports/FPL.rdlx-json';

const reports: Record<string, ReportResourceInfo> = { MSL, FPL };

const getReportsList = async (): Promise<ReportResourceInfo[]> =>
	Object.keys(reports).map((report) => ({
		id: `report://${report}`,
		displayName: report,
	}));

const designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
	'#designer-host'
);

designer.setResourceProvider({ getReportsList });

Returns

Promise<ReportResourceInfo[]>

A promise that resolves to an array of reports that users can open.

---

getResource

▸ getResource<T>(uri): Promise<null | T>

Gets or sets a function that fetches the resource identified by the given URI.

remarks Resolve to null when the resource is not found and reject on lookup errors.

example

const getResource = (id: string) =>
	fetch(getResourceUri(id)).then((response) => response.json());

Type parameters

Name
T

Parameters

Name	Type	Description
uri	string	The URI of the resource to fetch.

Returns

Promise<null | T>

A promise that resolves to the resource content parsed as type T, or null if the resource is not found.

Inherited from

ResourceLocator.getResource

---

getResourceUri

▸ getResourceUri(resourceID): string

Gets or sets a function that returns an absolute URI for a resource identifier.

example

const getResourceUri = (resourceID: string) => {
	const mappings = [
		{ prefix: 'report://', offset: 9, replacement: '/reports/' },
		{
			prefix: 'masterReport://',
			offset: 15,
			replacement: '/masterReports/',
		},
		{ prefix: 'theme://', offset: 8, replacement: '/themes/' },
		{ prefix: 'stylesheet://', offset: 13, replacement: '/stylesheets/' },
		{ prefix: 'library://', offset: 10, replacement: '/libraries/' },
	];
	const mapping = mappings.find((m) => resourceID.startsWith(m.prefix));
	return mapping
		? `${mapping.replacement}${resourceID.substring(mapping.offset)}`
		: resourceID;
};

Parameters

Name	Type	Description
resourceID	string	The resource identifier to locate.

Returns

string

An absolute URI that can be used to fetch the resource.

Inherited from

ResourceLocator.getResourceUri

---

getStylesheetList

▸ getStylesheetList(): Promise<StylesheetResourceInfo[]>

Gets the list of stylesheets available in the designer.

example

import Light from './resource/stylesheets/Stylesheet-Light.rdlx-json-style';
import Dark from './resource/stylesheets/Stylesheet-Dark.rdlx-json-style';

const stylesheets = { Light, Dark };

const getStylesheetList = async (): Promise<StylesheetResourceInfo[]> =>
	Object.entries(stylesheets).map(([name, stylesheet]) => ({
		id: `stylesheet://${name}`,
		content: stylesheet,
	}));

const designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
	'#designer-host'
);

designer.setResourceProvider({ getStylesheetList });

Returns

Promise<StylesheetResourceInfo[]>

A promise that resolves to an array of stylesheet definitions that users can apply while editing reports.

---

getThemesList

▸ getThemesList(): Promise<ThemeResourceInfo[]>

Gets the list of themes available in the designer.

example

import Default from './resource/themes/Default.json';
import BlueForPrint from './resource/themes/BlueForPrint.json';

const themes: Record<string, ThemeResourceInfo> = { Default, BlueForPrint };

const getThemesList = async (): Promise<ThemeResourceInfo[]> =>
	Object.keys(themes).map((name) => ({
		id: `theme://${name}`,
		displayName: name,
		info: { ...themes[name].Theme.Colors },
	}));

const designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
	'#designer-host'
);

designer.setResourceProvider({ getThemesList });

Returns

Promise<ThemeResourceInfo[]>

A promise that resolves to an array of themes that users can apply while editing reports.