# ReportDesigner.ResourceProvider

## Content

# Interface: ResourceProvider

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

Defines the contract for a custom resource provider.

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

**`example`**
```ts
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`](../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)

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

**`example`**
```ts
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`](../modules/Core#resourcelocator)

A new resource locator instance.

#### Inherited from

ResourceLocator.fork

___

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

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

Gets the list of images available 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 = 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`](../modules/ReportDesigner#imageresourceinfo)[]\>

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

___

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

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

Gets the list of master reports available 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 = 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`](../modules/ReportDesigner#reportresourceinfo)[]\>

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

___

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

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

Gets the list of reports available 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 = 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`](../modules/ReportDesigner#reportresourceinfo)[]\>

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

___

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

___

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

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

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

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

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

___

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

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

Gets the list of stylesheets available 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 = { 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`](../modules/ReportDesigner#stylesheetresourceinfo)[]\>

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

___

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

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

Gets the list of themes available in the designer.

**`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 = 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`](../modules/ReportDesigner#themeresourceinfo)[]\>

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