All docs
V21.1
21.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Report Designer Integration in Vue Application

  • 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:

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:

    <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:

    <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:

    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.