Create a dashboard

This page provides the steps to create and configure a dashboard in xDM Dashboard.

Create a dashboard

To create a dashboard:

  1. Select Dashboards in the navigation drawer.
    The Dashboards list opens.

  2. Click on the Create new dashboard floating action button in the lower-right corner of the screen.

  3. In the New Dashboard dialog:

    1. Enter a Label for the dashboard. This label appears to users.

    2. Enter a Name for the dashboard. This name is used to refer to this dashboard (e.g., from the application’s navigation drawer).

    3. Click Create.
      The dashboard is created with a first tab named Default Tab.

  4. Click the edit Open dashboard properties button in the editor toolbar.
    The properties side nav opens.

  5. Select the Required Role to access the application. This role must be configured in the xDM platform.

  6. In the Display Properties, select the Icon used to represent this dashboard.

  7. In the Documentation section, edit the rich text describing the dashboard. If the documentation is configured, an information icon appears next to the dashboard title, displaying the documentation content. The Markdown syntax is supported for this text.

You may now proceed with the following steps:

Add tabs to a dashboard

To create a new tab:

  1. Hover over the floating action button in the lower-right corner of the screen and select the tab Tab action.

  2. In the New Tab dialog:

    1. Enter a Label for the tab.

    2. Enter a Name for the tab.

    3. Click Create.
      This new tab is added to the dashboard.

To edit a tab:

  1. Click the edit Tab properties button on the tab.
    The properties side nav opens.

  2. Use the copy Copy, arrow left Move left, arrow right Move right and delete Delete buttons in the sidenav header to organize this tab.

  3. Use the rename Rename button to change the name and label of the tab.

  4. Select an Icon that may be displayed in the tab.

  5. Select in Display as whether the tab should display the label and/or the icon.

Add charts to a dashboard

To add a chart to a dashboard tab:

  1. Select the tab into which you want to add the chart.

  2. Move your mouse cursor on the floating action button in the lower-right corner of the screen and then select the chart Chart action.

  3. In the New Dashboard Chart dialog:

    1. Select an existing Chart from the list of charts.

    2. Enter a Label and Name for this dashboard chart.

    3. Click Create.
      This new chart is added to the dashboard tab.

  4. Click the chart placeholder in the dashboard editor.
    The properties side nav opens.

    • Use arrow left Move left and arrow right Move right to move this element in the tab.

    • Use arrow expand horizontal Expand and arrow collapse horizontal Reduce to change this element’s width.

    • In the Filters section, optionally create multiple filters to use a subset of the data returned by the query.

      1. Click the Add Filter button.
        The Add filter dialog opens.

      2. Select a query Attribute to filter.

      3. Select an Operator.

      4. Select or enter one or multiple Values depending on the operator.

      5. Click Add

      6. Repeat the previous steps to create multiple filters. These filters are combined with an AND operator.

        The filters that you define on a dashboard chart apply on top of those defined in the chart configuration.

    • In the Display Properties section:

      • Define the Height in pixels for this element.

      • Define the Label placement and whether to Show a Divider for between the label and the chart.

      • Select Enable drilldown to allow users to click on the chart’s shapes or values in order to drill down into the data behind the aggregated measures. If this property is unset, the behavior defined in the selected chart applies.

    • In the Documentation section, edit the rich text describing the chart. If the documentation is configured, an information icon appears next to the chart title, to display the documentation text. The Markdown syntax is supported for this text.

You can click at any time a chart placeholder in the dashboard editor to open the properties side nav for this chart.

Add text elements to a dashboard

To add a text element to a dashboard tab:

  1. Select the tab into which you want to add the text element.

  2. Move your mouse cursor on the floating action button in the lower-right corner of the screen and then select the text Text action.

  3. In the New Text dialog, enter a Name for this text element and then click Create.
    This new text element is added to the dashboard tab.

  4. Click the text element placeholder in the dashboard editor.
    The properties side nav opens.

  5. In the Content field, edit the text. The Markdown syntax is supported.

  6. Use arrow left Move left and arrow right Move right to move this element in the tab.

  7. Use arrow expand horizontal Expand and arrow collapse horizontal Reduce to change this element’s width.

  8. In the Display Properties section:

    1. Define the Height in pixels for this element.

    2. Define the base Color for the text.

You can click at any time a text placeholder in the dashboard editor to open the properties side nav for this text.

Add slicers to a tab

Slicers appear within the dashboard tabs to filter the data in the charts, based on a selection of values.

To add a slicer to a dashboard tab:

  1. Select the tab into which you want to add the slicer.

  2. Move your mouse cursor on the floating action button in the lower-right corner of the screen and then select the slicer Slicer action.

  3. In the New Slicer dialog:

    1. Enter a Label and Name for this slicer.

    2. The Filtered chart field shows an expandable list of all charts and their parameters. Select for each chart that you want to filter the parameter this slicer applies to. Note that you can only select one parameter per chart.

    3. Click Create.
      This new slicer is added to the dashboard tab.

  4. Click the slicer placeholder in the dashboard editor.
    The properties side nav opens.

  5. Use arrow left Move left and arrow right Move right to move this element in the tab.

  6. Use arrow expand horizontal Expand and arrow collapse horizontal Reduce to change this element’s width.

  7. In the Display Properties section:

    1. Define the Height in pixels for this element.

    2. Define the Label placement and whether to Show a Divider for between the label and the slicer.

  8. In the Slicer Options section:

    1. Define a Sort Order for the values in the slicer.

    2. Select the Allow multiple selection option to have the slicer appear as a list of checkboxes. Otherwise, it appears as a list of radio buttons.

    3. Select the Display search field option to display a search field above the slicer values to search into these values.

    4. Select the Allow select all option to allow selecting/unselecting all values in this slicer.

    5. Select the Show items with no data option to show all the items in the slicer, including those that will show no data points in the charts. When this option is selected, two additional options are available to configure how these items appear in the slicer.

      • Grey out items with no data makes these items less visible in the list by dimming their color.

      • Show items with no data last automatically reorder the list of items to move all these items at the end of the list.

  9. In the Documentation section, edit the rich text describing the slicer. If the documentation is configured, an information icon appears next to the slicer title, to display the documentation text. The Markdown syntax is supported for this text.

You can click at any time a slicer placeholder in the dashboard editor to open the properties side nav for this slicer.

Configure dashboard slicers

Dashboard Slicers appear in the side nav of the dashboard to filter the data in the charts, based on a selection of values.

To add a dashboard slicer:

  1. Click the edit Open dashboard properties button in the editor toolbar.
    The properties side nav opens.

  2. Select the Slicers tab. This tab shows the list of dashboard slicers configured for this dashboard.

  3. Click the Add Dashboard Slicer button.

  4. In the New Slicer dialog:

    1. Enter a Label and Name for this slicer.

    2. The Filtered chart field shows an expandable list of all charts and their parameters. Select for each chart that you want to filter the parameter this slicer applies to. Note that you can only select one parameter per chart.

    3. Click Create.
      This new slicer is added to the list in the Slicers tab in the properties side nav.

      In this list, use the drag drag button to reorder slicers, and the delete Delete button to delete them.

  5. Click the slicer in the Slicers tab to further edit its properties.
    The properties side nav changes to show the slicer properties.

  6. In the side nav header:

    • Use arrow up Move up and arrow down Move down to position this slicer higher or lower in the list of slicers.

    • Use the rename Rename button to change the name and label of the slicer.

    • Use the delete Delete button to delete the slicer.

  7. In the Slicer Options section:

    1. Define a Sort Order for the values in the slicer.

    2. Select the Allow multiple selection option to have the slicer appear as a list of checkboxes. Otherwise, it appears as a list of radio buttons.

    3. Select the Display search field option to display a search field above the slicer values to search into these values.

    4. Select the Allow select all option to allow selecting/unselecting all values in this slicer.

    5. Select the Show items with no data option to show all the items in the slicer, including those that will show no data points in the charts. When this option is selected, two additional options are available to configure how these items appear in the slicer.

      • Grey out items with no data makes these items less visible in the list by dimming their color.

      • Show items with no data last automatically reorder the list of items to move all these items at the end of the list.

  8. In the Documentation section, edit the rich text describing the slicer. If the documentation is configured, an information icon appears next to the slicer title, to display the documentation text. The Markdown syntax is supported for this text.

  9. Use the arrow left Back button to return to the list of dashboard slicers.

Configure dashboard parameters

You may add parameters to a dashboard to support passing values to this dashboard. These values are used similarly to slicer selections to filter the charts in this dashboard.

To configure dashboard parameters:

  1. Click the edit Open dashboard properties button in the editor toolbar.
    The properties side nav opens.

  2. Select the Parameters tab.
    This tab shows the list of parameters configured for this dashboard.

  3. Click the Add Parameter button.
    The new parameter is added to the list.

  4. Define the Parameter name.

  5. In the Filtered charts field, click the edit Edit button.

  6. The Filtered chart dialog shows an expandable list of all the charts and their parameters. Check, for each chart that you want to filter, the chart parameter this dashboard parameter applies to. Note that you can only select one parameter per chart.

  7. Click Apply.