Working with Dashboards

j-dashboard Element

Use j-dashboardelement to display an existing dashboard.

<j-dashboard id="dashboard">
    <h2 j-bind="title"></h2>
</j-dashboard>

Viewing Dashboard

Use load method to load (display) a dashboard.

load(id: string | DashboardModel): Promise<DashboardModel>;

loadmethod returns a promise and you can use dashboard id or DashboardModel.

As a common scenario, you can use jdash.Provider.getMyDashboards method to get a list of dashboard for the current user. After a click on a dashboard, use load method to display selected dashboard.

Refer to Getting Started for the sample usage of load method.

About View Modes

A dashboard may have one of the following view modes:

View mode Description
readonly Displays dashboard in readonly mode. Best for viewing dashboard
dashletedit User can edit dashlet properties and positions. Best for creating and configuring dashlets
layoutedit User can edit layout of dashboard. Best for desiging structure of dashboard.

Set initialize dashboard view mode use j-view-mode attribute of j-dashboard element.

<j-dashboard id="dashboard" j-view-mode="dashletedit">

</j-dashboard>

You can also use HTMLElement.setAttribute method to change it later.

var dashboard = document.querySelector('#dashboard');
dashboard.setAttribute('j-view-mode', 'readonly');

Adding Dashlets

Getting a list of available dashlets

Use jdash.DashletModule.getModule method to get a list of available dashlet elements. Refer to Dashlet Development (next section) for more information on defining dashlets.

You can use title attribute to display a dashlet to user. id attribute can be used to create an instance.

var dashletElements = jdash.DashletModule.getModules();
for(var i = 0; i < dashletElements.length;i++) 
    console.log(dashletElements[i].title, ',', dashletElements[i].id)

An example output can be

Hello World, hello-world
Astronomy of Day, nasa-apod-dashlet
Rss Dashlet, rss-dashlet
Chart Dashlet, chart-dashlet
Pure HTML, content-dashlet
Rich Content, rich-content

Adding dashlet to dashboard

Use addDashlet method of j-dashboardelement to create a new dashlet.

dashboard.addDashlet('hello-world');

You can also create a dashlet instance and use that instance instead of using element tag.

var mydashlet = document.createElement('hello-word');
mydashlet.title = 'Say Hi to me!';
dashboard.addDashlet(mydashlet);

j-dashboardelement automatically calls createDashletmethod of provider so new dashlet is persisted and will be available when dashboard loads at later.

Drag-drop adding

As an alternative you can use makeDroppable method of layout. This lets yo to create an HTML element for a dashlet and users can add this dashlet just by dropping to the dashboard element.

Refer to sample applications to see how to use makeDroppable method.