Wyn Enterprise: Dashboard API

This document elaborates the API to create a complete dashboard interface using the designer and the viewer components. You can create, edit, and save dashboards in dashboard designer, and view dashboards in dashboard viewer.

Wyn Enterprise also offers Lite Viewer for high speed rendering in case of large screen dashboard display. For more details, visit Dashboard Lite Viewer API page.

Define Dashboard Instance

method create(CreationType, {CreationOptions})


Description

Creates a dashboard designer or a dashboard viewer.

Arguments

CreationType


Description

Specify the interface you want to create for a dashboard - the designer or the viewer.

Acceptable Values

 'DashboardDesigner' | 'DashboardViewer'

CreationOptions


Description

Specify the options/properties for the created dashboard designer or dashboard viewer, as described in the following sections.

Properties Common to Designer and Viewer

property dashboardId


Description

The dashboard document id.

Type

string

Required

Yes

property userId


Description

The name of the user.

Type

string

Required

No

property baseUrl


Description

The Wyn Enterprise server url. If your integration and wyn server are not on the same site, you should provide your wyn server host.

Type

string

Required

No

property token


Description

The access token. The token is generated from the Admin portal.

Type

string

Required

No

property lng


Description

Set the language of the user interface.

Type

Lng

Acceptable Values

'zh' | 'en' | 'en-gb' | 'zh-tw' | 'pl' | 'es'

Required

No

property dp


Description

The dashboard parameters.

Type

string

Acceptable Values

 any[] 

Required

No

property theme


Description

The dashboard theme.

Type

string

Required

No

Additional Properties Specific to Viewer

property toolbar


Description

Control the visibility of the viewer toolbar; that is, whether to show or hide the viewer toolbar. Default value is 'show'.

Type

Toolbar

Acceptable Values

 'hide' | 'show'

Required

No

property pageNumber


Description

The viewer page number, starts from 1.

Type

number

Required

No

property size


Description

Set the display mode of the dashboard in the viewer.

Type

PageDisplayMode

Acceptable Values

'fitheight' | 'fittoheight' | 'fitwidth' | 'fittowidth' | 'fitscreen' | 'fittoscreen' | 'auto'

Required

No

property width


Description

The viewer page width.

Type

number

Required

No

property height


Description

The viewer page height.

Type

number

Required

No

Examples


To create designer instance

const designerInstance = WynDashboards.create('DashboardDesigner', {
    dashboardId: '8b75d061-0420-40ca-9b6b-35d0356f0327', 
    userId: username,
    token: 'token',
    baseUrl: 'http://example.wyn.com',
    lng: 'en',
    dp: '', 
    theme: 'default'
});

To create viewer instance

const viewerInstance = WynDashboards.create('DashboardViewer', {
    dashboardId: '8b75d061-0420-40ca-9b6b-35d0356f0327',
    userId: username,
    token: 'token',
    baseUrl: 'http://example.wyn.com',    
    lng: 'en',
    toolbar: 'hide',
    pageNumber: 1,
    size: "fitToScreen",
    width: 10,
    height: 10  
});

Initialize Dashboard

API to Initialize Designer Class and Viewer Class

property container


Description

The html node on which the instance is mounted.

Type

HTMLDivElement

Required

Yes

method setParameters


Description

Set the parameters for the Dashboard to view or design. Takes an object of key,value pairs.

Return Type void

Argument (Type)

{ parameterName (string) : parameterValue (any) }

event onMount

Description

Triggered after the instance creation has finished.

Return Type

void

event onLoaded

Description

Triggered after the dashboard document is fetched.

Return Type

void

Argument (type)

docName: (string)

event onClose

Description

Triggered after the instance is closed.

Return Type

void

method destroy

Description

Close the dashboard and release the dashboard resources.

Return Type

void

Additional API Specific to Designer Class

event onSave

Description

Triggered after successfully saving the document.

Return Type

void

Arguments (type)

docName: (string)

docId: (string)

Examples


To initialize designer class

 designerInstance.initialize({
      container: document.querySelector('#designer'),
      onClose: () => {
        console.log('close');
      },
      onSave: (docName) => {
        console.log('save', docName);
      },
      onLoaded: (docName) => {
        console.log('loaded', docName);
      },
    });

To initialize viewer class

viewerInstance.initialize({
      container: document.querySelector('#viewer'),
      onClose: () => {
        console.log('close');
      },
      onLoaded: (docName) => {
        console.log('loaded', docName);
      },
    });

To destroy a designer instance

designerInstance.destroy();

To destroy a viewer instance

viewerInstance.destroy();