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.
index.html
Copy to CodeMine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJS Report Designer Report Saving 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/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 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();
}
}
MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
"/activereportsjs/demos/resource/fontsConfig.json"
);
designer = new MESCIUS.ActiveReportsJS.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">×</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>
Feedback
Submit and view feedback for