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

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.

Returns

Promise<ImageResourceInfo[]> — A promise that resolves to an array of images that users can insert into reports in the designer.

Example

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

const images = { Cat, Dog };

const getImagesList = (): 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 });

getMasterReportList

▸ getMasterReportList(): Promise<ReportResourceInfo[]>

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

Returns

Promise<ReportResourceInfo[]> — A promise that resolves to an array of master reports that users can select 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 = (): Promise<ReportResourceInfo[]> =>
	Object.keys(masterReports).map((masterReport) => ({
		id: `report://${report}`,
		displayName: report,
	}));

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

designer.setResourceProvider({ getMasterReportList });

getReportsList

▸ getReportsList(): Promise<ReportResourceInfo[]>

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

Returns

Promise<ReportResourceInfo[]> — A promise that resolves to an array of reports that users can open 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 = (): Promise<ReportResourceInfo[]> =>
	Object.keys(reports).map((report) => ({
		id: `report://${report}`,
		displayName: report,
	}));

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

designer.setResourceProvider({ getReportsList });

getResource

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

Fetches and returns the content for the resource identified by the given URI. Resolves to null if the resource cannot be found.

Type parameters

Parameters

Returns

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

Example

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

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.

Parameters

Returns

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

Inherited from

ResourceLocator.getResourceUri

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;
};

getStylesheetList

▸ getStylesheetList(): Promise<StylesheetResourceInfo[]>

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

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.

Example

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

const stylesheets: Record<string, StylesheetResourceInfo> = { Light, Dar };

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

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

designer.setResourceProvider({ getStylesheetList });

getThemesList

▸ getThemesList(): Promise<ThemeResourceInfo[]>

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

Returns

Promise<ThemeResourceInfo[]> — A promise that resolves to an array of themes that users can apply while editing reports.

Example

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

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

const getThemesList = (): 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 });