Report Designer Integration in Vue Application

• Apr 07, 2021
• 2 minutes to read

Note

The complete sample project How to use the Report Designer in JavaScript with Vue is available in the DevExpress Examples repository.

The server-side model stores a report and provides it for rendering to the End-User Web Report Designer integrated in the Vue JavaScript application.

The project consists of server and client parts.

Server (Back-End) Application

Review the following topics to create a back-end application:

• Report Designer’s Server-Side Configuration (ASP.NET MVC)
• Report Designer’s Server-Side Configuration (ASP.NET Core)

Client (Front-End) Application

Create a folder to store application files. Use the command prompt to perform the following steps to create and configure the client part:

1. Make sure you have the current versions of Node.js with NPM installed on your machine.

   node -v
   npm -v
   

2. Install the Vue CLI (command line interface tool) globally:

   npm install -g @vue/cli
   

3. Create a Vue application with a default preset and navigate to the created folder:

   vue create vue-report-designer
   

   cd vue-report-designer
   

4. Install DevExpress packages:

   npm install devextreme @devexpress/analytics-core devexpress-reporting
   

5. Create the src/components/ReportDesignerComponent.vue file with the following content:

   ReportDesignerComponent.vue

   <template>
   <div ref="designer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0" data-bind="dxReportDesigner: $data"></div>
   </template>
   
   <script>
   import ko from "knockout";
   import 'devexpress-reporting/dx-reportdesigner';
   
   export default {
   name: "ReportDesignerComponent",
   mounted() {
       var designerOptions = {
           reportUrl: ko.observable("TestReport"), // The URL of a report that is opened in the Report Designer when the application starts.
           requestOptions: {
           host: "https://localhost:44389/",
           getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
               }
       };
       ko.applyBindings(designerOptions, this.$refs.designer);
   },
   beforeDestroy() {
       ko.cleanNode(this.$refs.designer);
   }
   };
   </script>
   

   Important

   In the code above set the host port number to the server port number of your back-end application.

   For information on the binding options specified in the code, review the

6. Open the src/App.vue file and replace its content with the following code that displays the Report Designer component on the page:

   App.vue

   <template>
   <div>
       <ReportDesignerComponent />
   </div>
   </template>
   
   <script>
   import ReportDesignerComponent from './components/ReportDesignerComponent';
   
   export default {
   name: 'app',
   components: {
       ReportDesignerComponent
       }
   }
   </script>
   

7. Add styles to the file src/main.js:

   main.js

   import "jquery-ui/themes/base/all.css";
   import "devextreme/dist/css/dx.common.css";
   import "devextreme/dist/css/dx.light.css";
   import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
   import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
   import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
   import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";
   import "devexpress-reporting/dist/css/dx-reportdesigner.css";
   

8. Run the application:

   npm run serve
   

9. Open the http://localhost:8080/ location in browser to see the test report.