Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

How to Add Web Report Designer to a Vue application

This section explains the steps required to Add web Report Designer to a Vue application.

Prerequisites

Before getting started with the bold report designer, make sure that your development environment includes the following commands.

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

Install the Vue CLI

Vue provides the easiest way to set Vue CLI projects 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 app project. Accept the defaults by pressing the Enter.

Configure Bold 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 Reporting packages are distributed in npm as @boldreports/javascript-reporting-controls.

npm install @boldreports/javascript-reporting-controls

Adding Report Designer component

Hence 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. Hence create a file named ‘globals.js’ inside the src folder and import jQuery in ‘globals.js’ file as like the below code snippet.

import jquery from 'jquery';

window['jQuery'] = jquery;

window['$'] = jquery;

Refer the globals.js file in main.js file as like below code snippet. The Bold Report Designer script and style files need to be imported, in order to run the web 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')

Hence 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/6.2.32/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>

Run the Application

To run the application, run the following command in command prompt.

npm run serve

How to Add Web Report Viewer to a Vue application