Demos
코드 샘플
디자이너
사전 정의된 리소스

디자이너 컴포넌트 - 사전 정의된 리소스

이 샘플은 Angular, React, Vue 및 순수 JavaScript 응용 프로그램 내에서 ActiveReportsJS Designer 컴포넌트와 함께 사전 정의된 리소스를 사용하는 방법을 보여 줍니다.

자세한 내용은 사전 정의된 데이터 소스 사용 및 Use-Shared-Resources를 방문하십시오. 코드를 보려면 아래로 스크롤하십시오.

JavaScript
Angular
Vue
React
index.html
resources.js
<!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>
<!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", }, ];