[]
DEMO DOCS API
DOWNLOAD
(Showing Draft Content)

Using Resource Locator

A report can include references to other reports if it contains a subreport or enables drill-through interactivity. In addition, a content report always refers to its master report.

If you use Modules or JSON data 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 that needs to be resolved at runtime.

The open method of the Report Viewer component accepts an optional second argument, which is an object that can include a Resource Locator implementation. For example:

// 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, the resource locator can be passed to the load method of the PageReport instance, for example:

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 for the code samples for Angular, React, Vue and Pure JS applications.