v2.1.0
v2.2.0v2.1.0v2.0.0v1.2.0

ActiveReportsJS ActiveReportsJS Vue Report Designer

This page provides a detailed overview of the ActiveReportsJS Vue Report Designer. You can check the Get Started tutorial for a concise guide for integrating the report designer into a Vue application.

ActiveReportsJS Vue NPM package

We distribute the library that contains the ActiveReportsJS Vue Report Designer via the @grapecity/activereports-vue npm package. The main @grapecity/activereports package provides the core functionality. If you are using Vue 2.0 then ActiveReportsJS also requires @vue/composition-api package to be installed.

ActiveReportsJS Vue Designer component

ActiveReportsJS Vue Designer component can be imported from @grapecity/activereports-vue package and included in a parent component's template, for example:

import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template: "<div style='width:100%;height: 100vh'><arjs-designer /></div>",
});

The designer component accepts the following properties.

Property Type Description
hotkeysEnabled boolean indicates whether the save and open hotkeys are enabled
language string sets the language of Designer Component interface. Check the Localization page for more information
fontSet "default" | "registered" | "all" indicates the available font set. Visit the Font Configuration for more information.
dataSources array of Data Source Templates sets the Pre-defined data sources and data sets.
reportList array of Report Resource Info items sets the Pre-defined report names for a subreport
imageList array of Image Resource Info items sets the Pre-defined images for an Image report item
onCreate onCreate function adds the New Report button in the designer toolbar and sets the corresponding click handler
onOpen onOpen function adds the Open Report button in the designer toolbar and sets the corresponding click handler
onRender onRender function adds the Preview Report button in the designer toolbar and sets the corresponding click handler
onSave onSave function adds the Save Report button in the designer toolbar and sets the corresponding click handler
onSaveAs onSaveAs function adds the Save As.. button in the designer toolbar and sets the corresponding click handler
onOpenFileMenu onOpenFileMenu function adds the "File" menu in the designer toolbar and sets the corresponding click handler
report report object loads the specified report in the designer

In addition, the parent component can use the getReport, setReport, and processCommand methods of the Designer class instance by creating the ref for a Designer component, for example

import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-designer ref='reportDesigner' /></div>",
  mounted: function () {
    this.$refs.reportDesigner.setReport({id: "report.rdlx-json"})
  },
});