Report Designer Integration in Vue Application

• Jun 18, 2024
• 3 minutes to read

View Example: How to use the Report Designer in JavaScript with Vue

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 help topic to create a back-end application: 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"),
           requestOptions: {
           host: "https://localhost:5001/",
           getDesignerModelAction: "DXXRD/GetDesignerModel"
           }
       };
       ko.applyBindings(designerOptions, this.$refs.designer);
   },
   beforeUnmount() {
       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 (54114 in this example).

   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 "ace-builds/css/ace.css";
   import "ace-builds/css/theme/dreamweaver.css";
   import "ace-builds/css/theme/ambiance.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.

Troubleshooting

When you start the application, you may encounter the following problems:

Page is blank

The Report Designer page is blank. The following error message is displayed at the bottom of the page: The page is blank because the Report Designer failed to load the report. Consult the developer for assistance. Use development mode for detailed information. If the page does not display the Document Viewer, press F12 to invoke DevTools and inspect the console messages.

Check the following:

• The backend application is up and running.
• The specified controller action path matches the back-end application type. If you use the ASP.NET Core backend, specify the /DXXRD/GetDesignerModel path, if you use the ASP.NET MVC backend, specify the /ReportDesigner/GetReportDesignerModel path.
• The backend application runs on the port specified in the host setting of the Report Designer component.
• The application’s URI satisfies the CORS policy specified in your backend application.
• The reportName value matches an existing report. For the backend application it means that the Reports folder contains the reportName.repx file or the ReportsFactory.Reports dictionary contains the reportName entry (if backend application originated from the DevExpress template).
• The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help topic for more information: Troubleshooting.