How to Add Web Report Designer to a Vue application

To add the Bold Reports® Report Designer to a Vue application, create a Vue CLI project, install the @boldreports/javascript-reporting-controls npm package, add a Report Designer component, and refer the scripts and styles.

What do I need before adding the Report Designer to a Vue application?

Adding the Bold Reports® Report Designer to a Vue application requires Node JS (version 8.x or 10.x) and NPM (v3.x.x or higher) in your development environment.

Before you get started with the Bold Reports® Report Designer, make sure that your development environment includes the following:

  • Node JS ( version 8.x or 10.x ).
  • NPM (v3.x.x or higher)

Install the Vue CLI

Vue provides an easy way to set up Vue projects by using the Vue CLI tool. To install the CLI application globally to your machine, run the following command in the Command Prompt.

 npm install -g @vue/cli

Create a new Vue application

To create a new Vue application, run the following command in Command Prompt.

 vue create project-name

 E.g : vue create report-designer-app

The vue create command prompts you for information about features to include in the initial application project. Accept the defaults by pressing Enter.

Configure Bold Reports® Report Designer in Vue CLI

To configure the Report Designer component, change the directory to your application’s root folder.

 cd project-name

 E.g : cd report-designer-app

Run the following commands to install the Bold Reports® packages, which are distributed in npm as @boldreports/javascript-reporting-controls.

npm install @boldreports/javascript-reporting-controls

Adding Report Designer component

Create a file named ‘ReportDesigner.vue’ inside the src folder.

<template>
  <div id="designer"></div>
</template>

<script>
import $ from 'jquery';
export default {
  name: 'ReportDesigner',
  mounted()
  {
    $("#designer").boldReportDesigner({
        serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
    });
  }
}
</script>

Adding scripts reference

Bold Reports® needs ‘window.jQuery’ object to render the Vue components. Create a file named ‘globals.js’ inside the src folder and import jQuery in the ‘globals.js’ file, as shown in the following code snippet:

import jquery from 'jquery';

window['jQuery'] = jquery;

window['$'] = jquery;

Refer the globals.js file in the main.js file, as shown in the following code snippet: Import the Bold Reports® Report Designer script and style files to run the Report Designer.

import './globals'
import Vue from 'vue'
import ReportDesigner from './ReportDesigner.vue'
//Report designer dependent scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min.js'
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min.js'
//Report designer source
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';

Vue.config.productionTip = false

new Vue({
  render:h => h(ReportDesigner),
}).$mount('#designer')

Create a file named ‘style.css’ inside the public folder.

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

ej-sample,
ej-reportdesigner {
    display: block;
    height: inherit;
    width: inherit;
}

.splash {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.message {
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
}

.loader {
    margin: auto;
    width: 70px;
    text-align: center;
    position: relative;
}

.loader>div {
    width: 18px;
    height: 18px;
    background-color: black;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loader .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

Open the ‘public\index.html’ and refer the following links and scripts in < head> tag.

<link href="style.css" rel="stylesheet">
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />

Add the following code in the <body> tag.

<div class="splash">
      <div class="message">Vue.js Reports</div>
      <div class="loader">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
      </div>
</div>
<div id="designer"></div>
<!-- built files will be auto injected -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementsByClassName("splash")[0].style.display = "None";
    });
</script>

How do I run the Vue application with the Report Designer?

To run the Vue application with the Report Designer, run the following command in the command prompt.

npm run serve

See also