Report Viewer Component - Custom Resource Locator

Sometimes it is needed to resolve references to report definitions at runtime in the application's code. For example, suppose you use the server-side database to keep report templates and load them from the client-side using the API that requires authorization. In that case, the reporting engine can not obtain those templates, and it relies on the hosting application to provide them. In this situation, you can use the custom resource locator feature. The samples below show the usage of a custom resource locator to resolve subreports with Angular, React, Vue, and pure JavaScript applications. For more details, please visit the Resource Locator documentation. To view the code, scroll down the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJS Report Viewer Custom Resource Locator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"
/>
<script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script>
<script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script>
<script src="$DEMOROOT$/lib/purejs/license.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
/>
<style>
#viewer-host {
margin: 0 auto;
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="viewer-host"></div>
<script>
const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(
"#viewer-host"
);
viewer.theme="ActiveReports";
MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
"/activereportsjs/demos/resource/fontsConfig.json"
).then(() => {
viewer.open("MainReport", {
ResourceLocator: {
getResource: (resourceId) => {
var reportUrl;
switch (resourceId) {
case "MainReport":
reportUrl = "reports/CarsListing.rdlx-json";
break;
case "VehicleDetailsSubreport":
reportUrl = "reports/VehicleDetails.rdlx-json";
break;
case "ManufacturerDetailsSubreport":
reportUrl = "reports/ManufacturerDetails.rdlx-json";
break;
default:
reportUrl = null;
break;
}
if (reportUrl)
return fetch(reportUrl).then((data) => data.json());
},
},
});
});
</script>
</body>
</html>