Designer Component - Saving Reports

These samples show how to save reports in the ActiveReportsJS Designer component within Angular, React, Vue, and pure JavaScript applications. The code uses the in-memory reports storage. The "Save as" button automatically saves the report with the new name. The "Open Report" dialog displays previously saved reports. For more details, please visit the Save Reports page for more information. 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 { margin: 0 auto; width: 100%; height: 550px; } </style> </head> <body> <div id="designer-host"></div> <script> var CPLReport = { Name: "Report", Body: { Width: "8.5in", Height: "11in", }, }; var resolveFunc = null; var designer = null; var counter = 0; reportStorage = new Map(); function fillReportList() { $("#listReports").empty(); let reportIds = reportStorage.keys(); let result = reportIds.next(); while (!result.done) { const reportId = result.value; const openReportBtn = $( '<button type="button" class="list-group-item list-group-item-action">' + reportId + "</button>" ); openReportBtn.on("click", function () { onSelectReport(reportId); }); $("#listReports").append(openReportBtn); result = reportIds.next(); } } GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host"); designer.setActionHandlers({ onCreate: function () { const reportId = `NewReport${++this.counter}`; return Promise.resolve({ definition: CPLReport, id: reportId, displayName: reportId, }); }, onOpen: function () { const ret = new Promise(function (resolve) { resolveFunc = resolve; fillReportList(); $("#dlgOpen").modal("show"); $("#dlgOpen").on("hide.bs.modal", function () { $(this).off("hide.bs.modal"); resolveFunc = null; resolve(null); }); }); return ret; }, onSave: function (info) { const reportId = info.id || `NewReport${++this.counter}`; reportStorage.set(reportId, info.definition); return Promise.resolve({ displayName: reportId }); }, onSaveAs: function (info) { const reportId = `NewReport${++this.counter}`; reportStorage.set(reportId, info.definition); return Promise.resolve({ id: reportId, displayName: reportId }); }, }); function onSelectReport(reportId) { if (resolveFunc) { resolveFunc({ definition: reportStorage.get(reportId), id: reportId, displayName: reportId, }); $("#dlgOpen").modal("hide"); resolveFunc = null; } } </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" id="listReports"></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>