Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

To create a dashboard definition one would need to know what it means to create a definition. In one definition you model a single dashboard application contains pages, widgets and menu's. You can see it as the skeleton of a dashboard application. Dashboard definitions are created using JSON and contain some constraints, which aren't actively enforced yet so be sure to follow this guide.

The dashboard

The root JSON object in the definition is the dashboard itself. 

Properties

PropertyTypeExplanation
IdStringThe ID of the dashboard
entryPageString

The default page which will be loading when starting a dashboard application

pagesDashboardPage Array

An array of DashboardPage objects.

Constraints

  • The entryPage must match one the IDs of the dashboard pages.
  • A dashboard can contain one or more pages.

Dashboard Page

A dashboard page displays widgets for a specified layout, structured in columns. To navigate between dashboard pages each page contains a menu.

Properties

PropertyTypeExplanation
IdStringThe ID of the dashboard page
eventsDashboardEvent Array

An array of DashboardEvent objects.

layout

single-column

two-equal-columns

left-sidebar

right-sidebar

The layout which is used to display the dashboard page

single-column takes up the whole page

two-equal-columns divides the page in two equals columns

left-sidebar divides the page into a one-third column and two-third's column

right-sidebar divides the page into a two-thirds columnand one-third column

columnsDashboardColumn Arrays

An array of DashboardColumn objects, containing widgets.

Constraints

  • The ID of a dashboard page must be unique.
  • The amount of dashboard column must align with the layout option that is provided.


A page has widgets and a menu. The menu has single items that link to other pages.
Additionally, you can choose a layout for how the widgets are placed on the page.
Possible layouts include:

  • two-equal-columns
  • single-column
Code Block
languagejs
titleExample
linenumberstrue
collapsetrue
{
  "id": "dashboard",
  "entryPage": "page",
  "pages": [
    {
      "id": "page",
      "events": [
        {
          "type": "start-case",
          "context": "someCaseType"
        },
        {
          "type": "start-case",
          "context": "otherCaseType"
        }
      ],
      "layout": "two-equal-columns",
      "columns": [
        {
          "widgets": [
            {
              "id": "widget",
              "type": "blueriq-flow",
              "shortcutName": "ListOfStuff",
              "baseUrl": "/runtime"
            }
          ]
        }
      ],
      "menuItems": [
        {
          "path": "otherPage",
          "displayText": "Some Other Page"
        }
      ]
    }
  ]
}

The Dashboard

...

The Page

A page has widgets and a menu. The menu has single items that link to other pages.
Additionally, you can choose a layout for how the widgets are placed on the page.
Possible layouts include:

...

The Widget

A widget has an 'id' property that uniquely identifies all widgets among each other. A 'type' of widget can be:

...