Interface: ResourceProvider

ReportDesigner.ResourceProvider

Represents external resources provider.

Hierarchy

• ResourceLocator

  ↳ ResourceProvider

Table of contents

Methods

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

Methods

fork

▸ fork(reportName): ResourceLocator

Creates new ResourceLocator instance based on current one base path.

Parameters

Name	Type	Description
reportName	string	Relative path for new report.

Returns

ResourceLocator

— Provide tools for accessing external resources by URIs.

Inherited from

ResourceLocator.fork

---

getImagesList

▸ getImagesList(): Promise<ImageResourceInfo[]>

Retrieves a list of images that will be available to the end-user within the designer component.

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 in the designer.

---

getMasterReportList

▸ getMasterReportList(): Promise<ReportResourceInfo[]>

Retrieves a list of master reports that will be available to the end-user within the designer component.

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 in the designer.

---

getReportsList

▸ getReportsList(): Promise<ReportResourceInfo[]>

Retrieves a list of reports that will be available to the end-user within the designer component.

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 in the designer.

---

getResource

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

Fetches and returns the content for the resource identified by the given URI. Resolves to null when the provider confirms the resource is missing and rejects if the lookup fails (for example, due to HTTP errors).

example

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

Type parameters

Name
T

Parameters

Name	Type	Description
uri	string	— 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

Returns an absolute URI for the resource identified by resourceID, using the provider's base path and ID scheme.

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	— Identifier of the resource to locate.

Returns

string

— Absolute URI that can be used to fetch the resource.

Inherited from

ResourceLocator.getResourceUri

---

getStylesheetList

▸ getStylesheetList(): Promise<StylesheetResourceInfo[]>

Retrieves a list of stylesheets that will be available to the end-user within the designer component.

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. These stylesheets can be applied by users while editing reports in the designer.

---

getThemesList

▸ getThemesList(): Promise<ThemeResourceInfo[]>

Retrieves a list of themes that will be available to the end-user within the designer component.

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.