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

  • Properties Common to Designer and Viewer
  • Additional Properties Specific to Viewer
  • Examples
    • To define designer instance
    • To define viewer instance

• Initialize Dashboard

  • API to Initialize Designer Class and Viewer Class
  • Additional API Specific to Designer Class
  • Examples
    • To initialize designer class
    • To initialize viewer class
    • To destroy designer instance
    • To destroy viewer instance

Define Dashboard Instance

create(CreationType, {CreationOptions})

---

Description

Creates a dashboard designer or a dashboard viewer.

Arguments

• CreationType
• CreationOptions

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

dashboardId

---

Description

The dashboard document id.

Type

string

Required

Yes

userId

---

Description

The name of the user.

Type

string

Required

No

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

token

---

Description

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

Type

string

Required

No

lng

---

Description

Set the language of the user interface.

Type

Lng

Acceptable Values

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

Required

No

dp

---

Description

The dashboard parameters.

Type

string

Acceptable Values

 any[] 

Required

No

theme

---

Description

The dashboard theme.

Type

string

Required

No

Additional Properties Specific to Viewer

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

pageNumber

---

Description

The viewer page number, starts from 1.

Type

number

Required

No

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

width

---

Description

The viewer page width.

Type

number

Required

No

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

container

---

Description

The html node on which the instance is mounted.

Type

HTMLDivElement

Required

Yes

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) }

onMount

Description

Triggered after the instance creation has finished.

Return Type

void

onLoaded

Description

Triggered after the dashboard document is fetched.

Return Type

void

Argument (type)

docName: (string)

onClose

Description

Triggered after the instance is closed.

Return Type

void

destroy

Description

Close the dashboard and release the dashboard resources.

Return Type

void

Additional API Specific to Designer Class

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();