Designer Component - Loading Reports

These samples show how to load reports in the ActiveReportsJS Designer component within Angular, React, Vue, and pure JavaScript applications. When the application loads, the designer shows the template report. The "New" button loads the same template report. The "Open" button displays the dialog where a user selects the report to open. Finally, the "Load Blank Report" button loads the empty report into the designer. For more details, please visit the Loading Reports page. 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" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-designer.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <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" type="text/css" href="/activereportsjs/demos/resource/themes/orange-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-designer.css" /> <style> #designer-host { width: 100%; height: 500px; } </style> </head> <body> <div id="designer-toolbar" class="container-fluid"> <div class="row mt-3 mb-3"> <button type="button" class="btn btn-outline-primary btn-sm col-sm-2 ml-1" onclick="onLoadBlank(false)" > Load Blank Report </button> </div> </div> <div id="designer-host"></div> <script> var CPLReport = { Name: "Report", Body: { Width: "8.5in", Height: "11in", }, }; var FPLReport = { Name: "Report", Page: { PageWidth: "8.5in", PageHeight: "11in", }, FixedPage: { Pages: [{}] }, }; var resolveFunc = null; var designer = null; GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host"); designer.setActionHandlers({ onCreate: function () { return Promise.resolve({ id: "reports/company-template.rdlx-json", }); }, onOpen: function () { const ret = new Promise(function (resolve) { resolveFunc = resolve; $("#dlgOpen").modal("show"); $("#dlgOpen").on("hide.bs.modal", function () { $("#dlgOpen").off("hide.bs.modal"); resolveFunc = null; resolve(null); }); }); return ret; }, }); designer.setReport({ id: "reports/company-template.rdlx-json" }); function onLoadBlank(fpl) { designer.setReport({ definition: fpl ? FPLReport : CPLReport, }); } function onSelectReport(report) { if (resolveFunc) { resolveFunc({ id: report }); $("#dlgOpen").modal("hide"); } } </script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous" ></script> <div class="modal" id="dlgOpen" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Open Report</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <strong>Select Report:</strong> <div class="list-group"> <button type="button" class="list-group-item list-group-item-action" onclick="onSelectReport('reports/CustomersTable.rdlx-json')" > Customers Report </button> <button type="button" class="list-group-item list-group-item-action" onclick="onSelectReport('reports/TaxiDrives.rdlx-json')" > Taxi Drives Report </button> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" > Close </button> </div> </div> </div> </div> </body> </html>