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.

Try adding a data source and a data set using the Data panel of the property inspector. You can select fields from a data set and drag-and-drop them into a report to create a Table data region
Select the Image report item and try setting its Image property in the property grid. (Icons made by Linector from www.flaticon.com)

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 Report Designer Predefined Resources 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/arjs/styles/ar-js-ui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/activereportsjs/demos/arjs/styles/ar-js-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>
      MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
        "/activereportsjs/demos/resource/fontsConfig.json"
      );
      const designer = new MESCIUS.ActiveReportsJS.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 MESCIUS.ActiveReportsJS.ReportViewer.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>

Feedback

Submit and view feedback for

This Product This Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJS Report Designer Predefined Resources 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/arjs/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-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>
MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
"/activereportsjs/demos/resource/fontsConfig.json"
);
const designer = new MESCIUS.ActiveReportsJS.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 MESCIUS.ActiveReportsJS.ReportViewer.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",
},
];