Designer Component - pre-defined resources

These samples show how to use pre-defined resources with the ActiveReportsJS Designer component with Angular, React, Vue, and pure JavaScript applications.

Visit the Using Predefined Data Sources and Use-Shared-Resources for more information. Scroll down the page to see the code.

<!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" /> <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/dist/ar-js-designer.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" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-designer.css" /> <style> @import url("https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"); #designer-host, #viewer-host { width: 100%; height: 550px; } </style> </head> <body> <div id="designer-host"></div> <div id="viewer-host"></div> <script src="resources.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); const designer = new GC.ActiveReports.ReportDesigner.Designer( "#designer-host" ); designer.setActionHandlers({ onRender: (report) => { document.getElementById("viewer-host").style.display = ""; document.getElementById("designer-host").style.display = "none"; viewer.open(report.definition); return Promise.resolve(); }, }); designer.setDataSourceTemplates(resources.dataSources); designer.setResourceProvider({ getImagesList: async () => resources.images, }); designer.setReport({ id: "reports/initial.rdlx-json" }); var viewer = new ActiveReports.Viewer("#viewer-host"); var designButton = { key: "$openDesigner", text: "Edit in Designer", iconCssClass: "mdi mdi-pencil", enabled: true, action: () => { document.getElementById("viewer-host").style.display = "none"; document.getElementById("designer-host").style.display = ""; }, }; viewer.toolbar.addItem(designButton); viewer.toolbar.updateLayout({ default: [ "$openDesigner", "$split", "$navigation", "$split", "$refresh", "$split", "$history", "$split", "$zoom", "$fullscreen", "$split", "$print", "$split", "$singlepagemode", "$continuousmode", "$galleymode", ], }); document.getElementById("viewer-host").style.display = "none"; </script> </body> </html>
const resources = {}; resources.dataSource = { Name: "Northwind", ConnectionProperties: { DataProvider: "JSON", ConnectString: "endpoint=https://demodata.mescius.io/northwind/api/v1", }, }; resources.categoriesDataSet = { Name: "Categories", Query: { DataSourceName: "Northwind", CommandText: "uri=/Categories;jpath=$.[*]", }, Fields: [ { Name: "categoryId", DataField: "categoryId" }, { Name: "categoryName", DataField: "categoryName" }, { Name: "description", DataField: "description" }, ], }; resources.productsDataSet = { Name: "Products", Query: { DataSourceName: "Northwind", CommandText: "uri=/Products;jpath=$.[*]", }, Fields: [ { Name: "productId", DataField: "productId" }, { Name: "productName", DataField: "productName" }, { Name: "supplierId", DataField: "supplierId" }, { Name: "categoryId", DataField: "categoryId" }, { Name: "quantityPerUnit", DataField: "quantityPerUnit" }, { Name: "unitPrice", DataField: "unitPrice" }, { Name: "unitsInStock", DataField: "unitsInStock" }, { Name: "unitsOnOrder", DataField: "unitsOnOrder" }, { Name: "reorderLevel", DataField: "reorderLevel" }, { Name: "discontinued", DataField: "discontinued" }, ], }; resources.dataSources = [ { id: "Northwind", title: "Northwind", template: resources.dataSource, canEdit: false, datasets: [ { id: "Categories", title: "Categories", template: resources.categoriesDataSet, canEdit: false, }, { id: "Products", title: "Products", template: resources.productsDataSet, canEdit: false, }, ], }, ]; resources.images = [ { id: "images/ambulance.svg", displayName: "Ambulance", mimeType: "image/svg", }, { id: "images/bed.svg", displayName: "Bed", mimeType: "image/svg", }, { id: "images/blooddonation.svg", displayName: "Blood Donation", mimeType: "image/svg", }, { id: "images/siren.svg", displayName: "Siren", mimeType: "image/svg", }, ]; resources.reports = [ { id: "reports/CustomersTable.rdlx-json", displayName: "Customers Table", }, { id: "reports/TaxiDrives.rdlx-json", displayName: "Taxi Drive Report", }, ];