# ReportDesigner.ResourceProvider

## Content

# Interface: ResourceProvider

[ReportDesigner](../modules/ReportDesigner).ResourceProvider

Represents external resources provider.

## Hierarchy

-   [`ResourceLocator`](../modules/Core#resourcelocator)

    ↳ **`ResourceProvider`**

## Table of contents

### Methods

-   [fork](ReportDesigner.ResourceProvider#fork)
-   [getImagesList](ReportDesigner.ResourceProvider#getimageslist)
-   [getMasterReportList](ReportDesigner.ResourceProvider#getmasterreportlist)
-   [getReportsList](ReportDesigner.ResourceProvider#getreportslist)
-   [getResource](ReportDesigner.ResourceProvider#getresource)
-   [getResourceUri](ReportDesigner.ResourceProvider#getresourceuri)
-   [getStylesheetList](ReportDesigner.ResourceProvider#getstylesheetlist)
-   [getThemesList](ReportDesigner.ResourceProvider#getthemeslist)

## Methods

### <a id="fork" name="fork"></a> fork

▸ **fork**(`reportName`): [`ResourceLocator`](../modules/Core#resourcelocator)

Creates new ResourceLocator instance based on current one base path.

#### Parameters

| Name         | Type     | Description                   |
| :----------- | :------- | :---------------------------- |
| `reportName` | `string` | Relative path for new report. |

#### Returns

[`ResourceLocator`](../modules/Core#resourcelocator) — Provide tools for accessing external resources by URIs.

#### Inherited from

ResourceLocator.fork

---

### <a id="getimageslist" name="getimageslist"></a> getImagesList

▸ **getImagesList**(): `Promise`<[`ImageResourceInfo`](../modules/ReportDesigner#imageresourceinfo)[]\>

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

#### Returns

`Promise`<[`ImageResourceInfo`](../modules/ReportDesigner#imageresourceinfo)[]\> — A promise that resolves to an array of images that users can insert into reports in the designer.

#### Example

```ts
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 });
```

---

### <a id="getmasterreportlist" name="getmasterreportlist"></a> getMasterReportList

▸ **getMasterReportList**(): `Promise`<[`ReportResourceInfo`](../modules/ReportDesigner#reportresourceinfo)[]\>

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

#### Returns

`Promise`<[`ReportResourceInfo`](../modules/ReportDesigner#reportresourceinfo)[]\> — A promise that resolves to an array of master reports that users can select in the designer.

#### Example

```ts
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 });
```

---

### <a id="getreportslist" name="getreportslist"></a> getReportsList

▸ **getReportsList**(): `Promise`<[`ReportResourceInfo`](../modules/ReportDesigner#reportresourceinfo)[]\>

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

#### Returns

`Promise`<[`ReportResourceInfo`](../modules/ReportDesigner#reportresourceinfo)[]\> — A promise that resolves to an array of reports that users can open in the designer.

#### Example

```ts
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 });
```

---

### <a id="getresource" name="getresource"></a> 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

| Name |
| :--- |
| `T`  |

#### Parameters

| Name  | Type     |
| :---- | :------- |
| `uri` | `string` |

#### 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

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

#### Inherited from

ResourceLocator.getResource

---

### <a id="getresourceuri" name="getresourceuri"></a> getResourceUri

▸ **getResourceUri**(`resourceID`): `string`

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

#### Parameters

| Name         | Type     |
| :----------- | :------- |
| `resourceID` | `string` |

#### Returns

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

#### Inherited from

ResourceLocator.getResourceUri

#### Example

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

---

### <a id="getstylesheetlist" name="getstylesheetlist"></a> getStylesheetList

▸ **getStylesheetList**(): `Promise`<[`StylesheetResourceInfo`](../modules/ReportDesigner#stylesheetresourceinfo)[]\>

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

#### Returns

`Promise`<[`StylesheetResourceInfo`](../modules/ReportDesigner#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

```ts
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 });
```

---

### <a id="getthemeslist" name="getthemeslist"></a> getThemesList

▸ **getThemesList**(): `Promise`<[`ThemeResourceInfo`](../modules/ReportDesigner#themeresourceinfo)[]\>

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

#### Returns

`Promise`<[`ThemeResourceInfo`](../modules/ReportDesigner#themeresourceinfo)[]\> — A promise that resolves to an array of themes that users can apply while editing reports.

#### Example

```ts
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 });
```