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. Visit the Save Reports page 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/ie-polyfills.js"></script> <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/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-designer.css" /> <style> #designer-host { margin: 0 auto; width: 100%; height: 550px; } </style> </head> <body> <div id="designer-host"></div> <script> var reportTemplates = GC.ActiveReports.ReportDesigner.templates; 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: reportTemplates.CPL, id: reportId, displayName: reportId, }); }, onOpen: function () { const ret = new Promise(function (resolve) { resolveFunc = resolve; fillReportList(); $("#dlgOpen").modal("show"); }); 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) { $("#dlgOpen").modal("hide"); resolveFunc({ definition: reportStorage.get(reportId), id: reportId, displayName: reportId, }); 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"> <h2>Select Report:</h2> <div class="list-group" id="listReports"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" > Close </button> </div> </div> </div> </div> </body> </html>