Saving a report with the ActiveReportsJS Designer

The report's storage type and the exact manner to save a report displayed in the ActiveReportsJS designer's instance depend on the application's architecture. This page provides recipes for several common scenarios.

Enabling the "Save" and "Save As" buttons

The ActiveReportsJS Report Designer component contains the "Save" and "Save As" buttons on the toolbar.

They are not enabled and not visible by default, however. The code should configure onSave and onSaveAs action handlers for the designer component to allow these buttons. Check Action Handlers page for more information. The onSaveAs handler should return the Promise that resolves to the object containing the id and the optional displayName properties of the report - the former uniquely identifies the report, the latter displays on the top bar of the designer component. The onSave handler should return the Promise that resolves to the object containing the optional displayName property of the report.

Here is the example of the onSave and onSaveAs handlers that save reports in the React application's in-memory storage. You can use a similar approach to save reports by sending requests to the REST API because these handlers are async functions that return the Promise object.

import React, { Fragment } from "react";
import { Designer } from "@mescius/activereportsjs-react";

function App() {
  const counter = React.useRef(0);
  const [reportStorage, setReportStorage] = React.useState(new Map());

  const onSave = function (info) {
    const reportId = info.id || `report${counter.current++}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ displayName: reportId });
  };

  const onSaveAs = function (info) {
    const reportId = info.id || `report${counter.current++}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ id: reportId, displayName: reportId });
  };

  return (
    <div id="designer-host">
      <Designer onSave={onSave} onSaveAs={onSaveAs} />
    </div>
  );
}

Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

Autosave

The processCommand method of the Report Designer component accepts one of the save, saveAs, create, open, and render arguments and invokes the corresponding action handler. Check the Action Handlers page for more information. Whenever a user modifies a report that is currently loaded into the designer instance, the documentChanged event of the designer component is triggered. The event handler receives an object that contains the isDirty flag, indicating whether the report has been modified since the last save. Combining these two methods allows for the implementation of the Autosave feature. Here's an example of how this can be achieved in a pure JavaScript application. Note that the same technique can be used in Angular, React, or Vue applications.

var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
  "#designer-host"
);
designer.setActionHandlers({
  onSave: function(){
    // the implementation of the onSave handler
  },
  onSaveAs: function(){
    // the implementation of the onSaveAs handler
  }
})
designer.documentChanged.register(function(args){
  if(args.isDirty){
    designer.processCommand('save');
  }
});

Saving a report with the ActiveReportsJS Designer

Enabling the "Save" and "Save As" buttons

Autosave

Related topics