Aurelia

Overview

Syncfusion Dashboard Platform SDK includes Aurelia wrapper for DashboardViewer. The properties of DashboardViewer are defined as attributes for Aurelia component, so you can easily set value to its properties, simply by prefixing property name with e- in component markup.

Getting started

This section guides you to create a web application using Aurelia Framework with DashboardViewer widget wrapper.

Creating an Aurelia Application with Dashboard Viewer Wrapper

Create a folder testapp.
Copy the contents of aurelia app folder into your newly created testapp folder from Dashboard Platform SDK build installed location mentioned below.

%localappdata%\Syncfusion\Dashboard\Samples\JavaScript\aurelia app

Clear the contents of src/dashboardviewer folder (src folder is present inside the testapp folder).

Binding Dashboard Service

To initiate the dashboard service instance you can follow anyone of the below methods

IMPORTANT

Hosting dashboard service at IIS is recommended for the production environment for object management and other memory management features.

Initializing Dashboard Viewer

Create dashboardviewer.html view file inside src/dashboardviewer folder and render ejDashboardViewer Aurelia component using the below code example.

HTML

<template>
    <require from="./dashboardviewer.css"></require>
        <div id="dashboardsample">
            <section>
                <div class="row">
                    <div>
                         <ej-dashboard-viewer  id=dashboard e-service-url.bind="url" e-dashboard-path.bind="dashboardPath" e-size.bind="size">
                         </ej-dashboard-viewer>
                    </div>
                </div>
            </section>
        </div>                
</template>

Create dashboardviewer.js file inside src/dashboardviewer folder and populate the properties with respective values as in the below code example.

JAVASCRIPT

export class BasicUse {
    constructor() {
      this.url = ' https://dashboardsdk.syncfusion.com/DashboardService/DashboardService.svc';
      this.dashboardPath = 'https://dashboardsdk.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx';
      this.size = {width: '100%', height: '100%'};     
    }
}

NOTE

Provided online Dashboard Service URL and Dashboard Path are for demo purpose.
Make sure the given dashboard path should be accessible with the given Dashboard Service URL.

Create dashboardviewer.css file inside src/dashboardviewer folder and add the below code example.

CSS

body, html, #dashboard, ej-dashboard-viewer {
            overflow: hidden !important;
	    width: 100%! important;
	    height: 100%!important;
}

Create index.js file inside src/dashboardviewer folder and add the below code example.

JAVASCRIPT

import {useView, inject} from 'aurelia-framework';
import {Registry} from 'shared/registry';
@useView('shared/showcase.html')
@inject(Registry)
export class Index {
    constructor(registry) {
        this.registry = registry;
    }
    configureRouter(config, router) {
        this.router = router;
        return this.registry.load(config, 'dashboardviewer');
    }
}

Create registry.json file inside src/dashboardviewer folder for route configurations and add the below code example.

JSON

{
  "title": "DashboardViewer",
  "documentation":"https://help.syncfusion.com/dashboard-platform/dashboard-sdk/ejdashboardviewer",
  "samples": {
     "default":{
       "files": ["html", "js","css"],
       "default": "true"
      }
   }
}

Running the application

Open Command Prompt window and navigate to “testapp” folder and type the below commands to install the required packages and run the Aurelia application.

JAVASCRIPT

> npm install
> npm install jspm -global
> jspm install
> “copy.bat”
> gulp watch

Browse to http://localhost:9000 to see the application. The dashboard gets rendered as like in the below screenshot.

Aurelia image