Overview

Syncfusion Dashboard Platform SDK includes ionic framework. Ionic is an open source Mobile SDK to develop native and progressive web apps, and it works with newer version of Angular 4 and typescript.

Prerequisites and compatibility

Prerequisites

While running the ionic it requires Node.js (which includes npm) in the system.

Install ionic

Install the latest Cordova and Ionic command-line tools in your terminal. Follow the Windows and Mac guides to install required tools for development.

JS

npm install -g cordova ionic

Getting started with dashboard viewer in ionic application

This section guides you to start with ionic framework for the dashboard viewer through the step-by-step instructions.

Step 1 : Install the latest version of the ionic CLI. Run the following commands.

JS

npm install -g ionic@latest

Step 2 : Run the following command to create an Ionic sample project.

JS

ionic start Syncfusion-Dashboard blank --type=ionic-angular

Note : Syncfusion-Dashboard is the project name and blank is the project template.

Adding JavaScript and CSS reference

Copy the scripts, themes, and fonts folder from the Dashboard Platform SDK build installed location which is mentioned below, and paste them in the src\assets folder under the newly created Syncfusion-Dashboard project.

%localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\JavaScript\ionic app\src\assets

Create a folder named as dashboard in the src\app under the newly created Syncfusion-Dashboard project.

In the dashboard folder, create a new component as dashboard.component.ts and import the scripts/themes references in the order mentioned in the following code example.

TS

import '../../../node_modules/jquery/src/jquery';

import '../../../node_modules/jsrender/jsrender';

import '../../assets/scripts/jquery.easing.1.3.min';

import '../../../node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min';

import '../../assets/scripts/ej.dashboardViewer.all.min.js';

Initializing and configuring the widget

Create a new folder as ej in the src/pages folder.

Copy the angular dashboardviewer source files from the following Dashboard Platform SDK installed location and paste them into the ej folder.

%localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\JavaScript\ionic\src\pages\ej

Create the dashboard.component.html file in the dashboard folder and initialize the ejDashboardViewer Angular component using the following code example.

HTML

<div>
      <ej-dashboardviewer  id="dashboard" [serviceUrl]="url" [dashboardPath]="dashboardPath"></ej-dashboardviewer> 
    </div>

Import and declare the Syncfusion source component and EJ_DASHBOARDVIEWER_COMPONENTS component in the src\app\app.module.ts file using the following code snippet.

TS

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { EJ_DASHBOARDVIEWER_COMPONENTS } from '../pages/ej/dashboardviewer.component';

import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    MyApp,
DashboardComponent,
    EJ_DASHBOARDVIEWER_COMPONENTS
	],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    DashboardComponent
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

export class AppModule {}

Copy and paste the following code in the src\app\app.component.ts.

TS

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { DashboardComponent } from './dashboard/dashboard.component';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  rootPage:any = DashboardComponent;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Create the dashboard.component.scss file in the dashboard folder and import the below CSS file reference

SCSS

@import url('../../assets/themes/default-theme/ej.dashboardViewer.all.min.css');

Copy and paste the following code in the dashboard.component.ts file under the dashboard folder.

TS

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import '../../../node_modules/jquery/src/jquery';

import '../../../node_modules/jsrender/jsrender';

import '../../assets/scripts/jquery.easing.1.3.min';

import '../../../node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min';

import '../../assets/scripts/ej.dashboardViewer.all.min.js';

declare var $:any;

@Component({
  selector: 'ion-app',
  templateUrl: 'dashboard.component.html',
 
})

export class DashboardComponent {

  public url; report; dashboardPath;

  constructor(public navCtrl: NavController) {
 
    this.url = "https://dashboardsdk.syncfusion.com/DashboardService/DashboardService.svc"; //Service URL

    this.dashboardPath = "https://dashboardsdk.syncfusion.com//Dashboards//Northwind Traders Sales Analysis.sydx"; //path of the Dashboard

  }
}

NOTE

The online dashboard service URL and dashboard path are provided for the demo purpose.
Make sure whether the given dashboard path should be accessible with the given Dashboard Service URL.

Copy and paste the below CSS in the index.html file under the src folder

HTML

<style>
    #dashboard {
              overflow: hidden !important;
              height: 100% !important;
              width: 100% !important;
              position: absolute !important;
              margin: 0;
          }

   </style>

Copy and paste the following dependencies in the package.json file.

JSON

{
  "name": "Syncfusion-Dashboard",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.2.0",
    "cordova-android": "^7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^3.0.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jquery": "^3.3.1",
    "jquery-validation": "1.16.0",
    "jsrender": "^0.9.90",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "syncfusion-javascript": "^16.1.37",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2",
    "@types/ej.web.all": "^16.1.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^1.10.31"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Binding dashboard service

To initiate the dashboard service instance, you can follow anyone of the following methods:

1. Hosting dashboard service in IIS.

2. Hosting dashboard service in IIS express.

3. Hosting dashboard service as Windows service background process.

IMPORTANT

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

Running the application

• To run the application, execute the following command.

JAVASCRIPT

npm install

ionic serve

• Browse to http://localhost:8200, to see the application. The component is rendered as shown in the following screenshot. You can make changes in the code found under the src folder, and the browser should auto-refresh itself while saving the files.