[]
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.
We distribute the library that contains the ActiveReportsJS Vue Report Designer via the @mescius/activereportsjs-vue npm package. The main @mescius/activereportsjs 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 can be imported from @mescius/activereportsjs-vue
package and included in a parent component's template, for example:
import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-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 |
---|---|---|
onInit | ()=>DesignerConfig | returns the DesignerConfig object that contains the designer's initialization options |
hotkeysEnabled | boolean | Obsolete: use the |
language | string | Obsolete: use the |
customInitTemplates | Obsolete: use the | |
fontSet | "default" | "registered" | "all" | Obsolete: use the |
dataSources | array of Data Source Templates | sets the Pre-defined data sources and data sets. |
reportList | array of Report Resource Info items | |
imageList | array of Image Resource Info items | |
onCreate | adds the New Report button in the designer toolbar and sets the corresponding click handler | |
onOpen | adds the Open Report button in the designer toolbar and sets the corresponding click handler | |
onRender | adds the Preview Report button in the designer toolbar and sets the corresponding click handler | |
onSave | adds the Save Report button in the designer toolbar and sets the corresponding click handler | |
onSaveAs | adds the Save As.. button in the designer toolbar and sets the corresponding click handler | |
onOpenFileMenu | adds the "File" menu in the designer toolbar and sets the corresponding click handler | |
report | loads the specified report in the designer | |
documentChanged | (args: DocumentChangedEventArgs)=>void | sets the handler for the event that occurs when a report loaded into the designer changes |
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 "@mescius/activereportsjs-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"})
},
});