# Using Resource Locator

Learn how to use a resource locator for subreports and drill through reports

## Content

A report can include references to other reports if it contains a [subreport](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Subreport) or enables [drill-through interactivity](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity#jump-to-report). In addition, a content report always refers to its [master report](/activereportsjs/docs/v6.1/ReportAuthorGuide/master-reports).
If you use [Modules](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/LoadingFromModules) or [JSON data](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/LoadingFromJSON) to load reports into the viewer component, references to master reports, subreports, and drill-through reports cannot be resolved automatically. In such cases, you'll need to provide code that returns a report definition object based on its `id`.
A report may also use a [Theme](/activereportsjs/docs/v6.1/ReportAuthorGuide/Themes) or [Stylesheet](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-stylesheets) that needs to be resolved at runtime.
The [open method](/activereportsjs/api/v6.1/classes/ReportViewer.Viewer#open) of the Report Viewer component accepts an optional second argument, which is an object that can include a `Resource Locator` implementation. For example:

```js
// eslint-disable import/no-webpack-loader-syntax
import mainReport from '!json-loader!../reports/MainReport.rdlx-json';
import subReport from '!json-loader!../reports/Subreport.rdlx-json';
import drillthroughReport from '!json-loader!../reports/DrillthroughReport.rdlx-json';

this.reportViewer.open("MainReport", {
  ResourceLocator: {
    getResource: (resourceId: string) => {
      switch (resourceId) {
        case "MainReport": return mainReport;
        case "Subreport": return subReport;
        case "DrillThroughReport": return drillthroughReport;
        case "Theme": return fetch("assets/themes/light-theme.rdlx-json-theme").then(response => response.json());
        case "Stylesheet": return fetch("assets/stylesheets/main-stylesheet.rdlx-json-style").then(response => response.json());
        
      }
    },
  },
});
```

If you load a report definition programmatically, the resource locator can be passed to the [load method](/activereportsjs/api/v6.1/classes/Core.PageReport#load) of the `PageReport` instance, for example:

```js
const report = new MESCIUS.ActiveReportsJS.Core.PageReport();
await report.load("MainReport", {
    resourceLocator: {
        getResource: (resourceId) => {
          return fetch("assets/" + resourceId).then(response => response.json());
        },
      },
);
```

The `getResource` function can return a report definition or a theme object or a `Promise` object that resolves to the same.
Visit the [Resource Locator demo](https://developer.mescius.com/activereportsjs/demos/features/viewer-resource-locator/purejs) for the code samples for Angular, React, Vue and Pure JS applications.