Using Resource Locator

A report can include references to other reports if it contains a subreport or allows drill-through interactivity. If you use Modules or JSON data to load reports into the viewer component, then references to subreports and drill through reports can not be resolved automatically, and it is required to provide the code that returns a report definition object by its Id. In addition, a report can use a Theme that needs to be resolved at runtime. The open method of Report Viewer component accepts the second optional argument, which is an object that can include the Resource Locator implementation, for instance:

// 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());
      }
    },
  },
});

If you load a report definition programmatically, then the resource locator can be passed to the load method of a PageReport instance, for example:

const report = new GC.ActiveReports.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 for the code samples for Angular, React, Vue and Pure JS applications.