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 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/resource/themes/orange-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-viewer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 600px; } </style> </head> <body> <div id="viewer-host"></div> <script> const viewer = new ActiveReports.Viewer("#viewer-host"); GC.ActiveReports.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>