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

Using ActiveReportsJS Report Designer Component in Vue applications

Create Vue Application

The easiest and recommended way for creating a new Vue application is to use Vue CLI. Run the following command from the command prompt or terminal to create a Vue 2 application using the default preset. For details, see presets on the Vue CLI site.

vue create -p default arjs-vue-designer-app

Install ActivereportsJS npm packages

We distribute the Vue Report Designer Component via @grapecity/activereports-vue npm package. The main @grapecity/activereports package provides the core functionality. To install the most current version of these packages, run the following command from the application's root folder.

npm install @grapecity/activereports-vue @grapecity/activereports

Or if you are using yarn:

yarn add @grapecity/activereports-vue @grapecity/activereports

If you are using Vue 2.0, then install @vue/composition-api package:

npm install @vue/composition-api

Or if you are using yarn:

yarn add @vue/composition-api

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files. In the public folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

Add Vue Report Designer component to the application

Open the src\App.vue file and replace the default content with the following code. This single file component uses the Vue Report Designer to load the report template that you added on the previous step. It also imports the default Report Designer Component Styles and defines style for the designer's hosting element.

<template>
  <div id="designer-host">
    <JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>
  </div>
</template>

<script>
import { Designer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSDesigner: Designer,
  },
};
</script>

<style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-designer.css" ></style>

<style>
#designer-host {
  width: 100%;
  height: 100vh;
}
</style>

Run and test the application

Run the application by using the npm run serve or yarn serve command. The ActiveReportsJS Designer component will appear on the start page of the application and display the report design. Test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.