WorkBook

Customize a Dashboard's Layout

By default, widgets are arranged on a dashboard one underneath the other. When you add a widget to a dashboard, it is added at the bottom of that dashboard. Each widget occupies a single row when laid out in this manner. This section provides instructions for customizing this layout.

Overview

A dashboard's layout can have up to four columns. Each of those columns allows you to have widgets laid out beside and above and below each other. The default layout for a dashboard is a single column, but you can change this to have up to four columns by using the Options icon on the right of the dashboard header ribbon and selecting Columns from the shortcut menu.

You can rearrange the layout of widgets using drag-and-drop. Widgets can sit beside or above and below each other. Widgets that are beside each other create rows; you can move them from one row to another, and insert them into an existing row. You can move widgets can up or down the dashboard. When a row consists of a single widget, and you move that widget to another location on the dashboard, the existing row is removed. A row of widgets only spans the width of the column they are in, so using the Columns functionality described here, you can create a specific layout for your dashboard.

Move Widgets on a Dashboard

You can move widgets around a dashboard layout using drag-and-drop. With the dashboard in Design mode, place your mouse cursor over the widget's title so that the cursor changes to the four-sided arrow and hold the left mouse button. The page layout is revealed, showing the placement of existing rows of widgets on the dashboard. Drag the selected widget around the dashboard, and the layout is updated, indicating the new location and the updated layout. Placing a widget above or below an existing widget or row creates another row; placing a widget to the left or right of an existing widget rearranges the widgets within that row, resizing them accordingly. Release the left mouse button to place the widget in the new position on the dashboard.

Resize Rows or Columns

You can resize rows and columns individually on a dashboard. This also affects the size of the widget that occupies that row or column.

To resize a row or column:

  1. Move the cursor over the visible border between widgets that represents the edge of the row or column.
    When the cursor is over the border, it changes to a two-arrow icon, indicating that you can move the border. You can move a row border up or down; you can move a column border left or right.
    • Cursor indicates that you can change a row height by dragging up or down.
    • Cursor indicates that you can change a column width by dragging left or right.
  2. With an arrows cursor showing, hold the left mouse button and drag the border to the required location, then release the left mouse button.

    Releasing the left mouse button sets the border in the new location and resizes all widgets accordingly to fill the available space within the row or column.

Distribute Widgets Equally on a Row

Having dragged and dropped widgets around the dashboard, you might want to distribute the widgets equally within a row without having to manually adjust the individual column widths.

To distribute widgets equally on a row:

  1. Navigate to the row that where you want to redistribute the widgets.
  2. Left-click the Options icon in the upper-right corner of any widget in that row and select Distribute Equally in this Row from the shortcut menu.

Add a Widget to a Dashboard

To add a widget to a dashboard click the Widget button in the top-right of the Dashboard Design page. When you add a new dashboard from the Welcome to your New Dashboard page, it is best practice to first add a title to the dashboard using the icon and then add additional widgets later.

When you click Widget, the New Widget dialog box opens. You can either click to select data or click the Advanced Configuration link in the lower-left corner to open the Advanced Configuration page. It is best practice to use the Advanced Configuration page.

The Advanced Configuration page has three panes:
  • The left pane controls the widget settings, allowing you to select the type of widget that you are adding, as well as the data fields to be used within that widget.
  • The center pane gives a preview of what the widget will look like, based on the current settings and configurations applied.
  • The right pane controls the filters and design elements of the new widget.
Configure the Widget Settings

To configure widget settings in the left pane:

  1. Select the type of widget to add from the drop-down list in the top-left corner.
  2. Based on the selection and type of widget, define the data fields to be shown in the rows, columns, axes, and values within the widget.
    To add a new field to a row, column, or axis:
    1. Click the to the right of an element (row, column, or axis).
    2. From the Add a Field dialog box, select a field to add. All available data tables and data fields from the connected data model are shown in the drop-down list. You can search for a specific field or for all available fields in a specific data table by entering the name of the element in the search field. All available fields that match the search criteria, or all fields in a data table that match the criteria, are displayed.
    3. Click on the data field to add it to the widget.
    To add a numeric value to a value field:
    1. Click the to the right of the value or values area.
    2. Either select a specific field using the same method outlined in the preceding steps or create a formula by clicking the icon to the left of the search field.

      The Create New Formula dialog box opens to allow you to populate a formula by adding fields or specific supported functions to the Expression box, which contains the message Start typing your expression if no function or expression is added yet. Precede functions such as SUM or COUNT by a + or - and specify the field that should be added within parenthesis, for example:

      +Count([Name])

      Clicking on fields within the list of fields below the Expression box adds those fields into the formula at the cursor position. Fields are always included within square brackets.

      Hovering the cursor over any field name triggers a tooltip that provides information about the data table and data field being referenced.

      Any errors found in the expression are indicated in red text at the bottom of the dialog box. When the formula is error-free and ready to be added, the OK button is enabled.

    3. Click OK to add the value to your widget.

You can rename the field or value by double-clicking the existing name. When you are finished, click to apply the changed name to the value.

You can further filter or format fields that have been added into rows, columns, and axes of values areas of a widget.

When you hover the cursor over the field, the Filter icon appears in the upper-right beside the field name. You can apply a variety of filtering depending on the nature of the field. For example, you can filter text fields for specific words, while you can apply value filters to numeric fields. A Ranking option is available within the filter options of both numeric and text fields; it allows you to specify a certain number of results—for example, you can create a Top 10 list by applying a Ranking filter to a specific field.

You can delete fields from a widget using the icon in the lower-left corner of the value field.

You can enable or disable fields using the toggle in the bottom-right corner. Fields that are disabled do not appear in View mode or for viewers of the widget on the dashboard.

You can format numeric values in several different ways. If you hover the cursor just to the left of the enable toggle, the numeric formatting and sorting icons appear. These allow you to format numeric values, or to sort in a specific order. In some contexts, you can do color formatting, such as for line charts, or for applying conditional formatting to numeric indicators.

Tip: This formatting is lost if you change the dashboard's color palette, so best practice is to apply the dashboard color palette first, and then apply the widget-level color formatting.

Configure Widget Filters

There are three parts to the configuration of filters in the right pane.

You can configure the filters that exist on the dashboard to which the widget belongs to either apply in full or in part to the widget, or to be ignored completely. The Filters tab lists all existing dashboard filters.

  • To ignore all of the dashboard filters, disable them using the Dashboard Filters toggle.

    Alternatively, you can ignore individual filters by disabling them individually, using the toggle beside each of them.

    Note: You can only disable or enable dependent filters as a whole; you cannot ignore individual parts of a dashboard dependent filter.

  • To configure the impact of a filter on a widget, select Slice/Filter or Highlight.
    • Slice/Filter filters the widget specifically, based on the dashboard filters that are applied.
    • Highlight only applies a highlight shading to data that is selected by the dashboard filters, but unselected data is not filtered out.
  • To add specific widget-level filters that only apply to this widget. You can add fields to apply a filter on by clicking the to the right of the Widget filters area. After you add a field, you include or exclude specific values in that field via the filter.

    Note: You should use this type of filter with care because dashboard users cannot impact or change this filter.

Configure Widget Design

You can apply specific design elements related to the selected widget using the Design tab in the right-side pane. These elements differ, depending on the widget that you are adding. Widget design elements can include the definition of line style for graphs; and the inclusion, positioning, and formatting of legends, markers, axes, and value markers.

Widget Narrative

Some widgets support narratives. These are add-on elements of the widget that you can include along with the widget or on their own. You enable them using the narrative toggle in the Widget Design pane.

Enabling a narrative opens another range of settings that are specific to the appearance of the narrative: Display, Format, Verbosity, and Terminology (Sentiment, Aggregation). You can set the position of the narrative either above or below the visualization, or choose to show only the narrative and hide the visualization. This can be helpful when you want to place a visualization and related narrative side-by-side.

You can format narratives as paragraphs of text or bulleted lists. You can set the amount of detail included via the Verbosity setting. You must also provide detail to the narrative about the terminology it should use, indicating the singular and plural naming of the data points to be referenced in the narrative (which are based on those included in the widget itself). Sentiment relates to the nature of the underlying data and whether positive or negative values and movements are to be interpreted as good.

Preview the Widget

Changes that you make to the configuration of the widget update the preview of that widget in the center pane. The only change that you can apply specifically to a widget in the center pane is to add or change the name of the widget. The widget name is shown on the dashboard and can be useful, but is not a requirement for a widget.

Return to the Dashboard View

When you have configured the widget as required, click Apply in the top-right of the page. All changes are applied to the widget, and you are returned to the Dashboard View page.

If you click Cancel you are also returned to the Dashboard View page, but none of your changes are applied to the widget or saved.

Copy a Widget on the same Dashboard
To copy a widget on the same dashboard:
  1. Ensure that the dashboard is in Design mode.
  2. Find the widget that you want to copy.
  3. Click the Options icon in the upper-right and select Duplicate from the shortcut menu.

A copy of the widget is created immediately beside the existing widget. All elements of the original widget are duplicated in the new copy.

This is particularly useful when you want to apply a similar configuration of settings to two different widgets, where you can create the first widget, then duplicate it, before applying configuration changes to the copy version.

Copy a Widget to Another Dashboard

To copy a widget to another dashboard:

  1. Ensure that the dashboard is in Design mode.
  2. Find the widget that you want to copy and position the cursor over its title area so that the cursor changes to a four-sided arrow.
  3. Click and hold the left mouse button to select the widget in the same way that you would if you were moving it around the dashboard, but instead, drag it to the list of dashboards that are shared with you, in the left pane.

    As the cursor moves over a dashboard, the icon changes to represent a line chart with a small circular plus in the lower-right corner. The tooltip that opens also indicates the dashboard into which the widget will be copied.

  4. If this is the correct dashboard, release the left mouse button.

    The widget is copied to that target dashboard. When you open that dashboard, the copied widget is located at the bottom.

Add Tabs to a Dashboard

You can configure a dashboard to include tabs, using a tabber widget. The tabber widget adds tab headings to a dashboard to hide or unhide widgets on the dashboard based on which tab heading is selected.

Note: The suggested maximum number of widgets of 20-25 per dashboard still applies, even if you use a tabber, which itself counts as a widget. A tabber controls the visibility of individual widgets on the dashboard, rather than creating individual dashboards for each tab.

Add a Tabber Widget

To add a tabber widget to a dashboard:

  1. Click the Widget button in the top right of the Dashboard Design page.
  2. In the New Widget dialog box, click Advanced Configuration in the lower-left corner.
  3. On the Advanced Configuration page, select the Tabber widget type from the drop-down list in the top-left corner
Configure a Tabber Widget

You must configure a tabber widget through scripting.

To add the script:
  1. Click the Options icon at the top right of the preview pane and select Edit Script from the shortcut menu. This opens a new browser tab that contains the Script Editing Window.
  2. Enter the following script into the Script Editing window. 
widget.on('render',function(w, e){e.prefixText = '';
     e.suffixText = '';
     e.selectedColor = '#5B6674'; /*The color of the chosen title*/
     e.fontColor = '#9096AD'; /*The color of the unchosen titles*/
     e.elementWidth = '100%';
     e.descColor = '#797E91';
     e.parentMarginLeft = '0px';
     e.height = 32; /* affects the Tabber widget default high*/
     });
widget.tabs = [
                  {title: "Tab Title 1", displayWidgetIds : ["", ""],
     hideWidgetIds : ["", ""]},		   
                  {title: "Tab Title 2 ", displayWidgetIds : [""],
     hideWidgetIds : ["", ""]},
     ];
widget.tabsConfig = 'multiply'
Editing the Tabber Widget Script

You can edit the following parts of the script.

Configure the Font Color of the Selected Tab 

     e.selectedColor = '#5B6674'; /*The color of the chosen title*/

You can add a Hex code into this line, within the single quotation marks, to apply a font color to the name of the selected tab.

Configure the Font Color of Unselected Tabs 
     e.fontColor = '#9096AD'; /*The color of the unchosen titles*/

You can add a Hex code into this line, within the single quotation marks, to apply a font color to the names of all of the unselected tabs.

Configure the Individual Tabs and their Contents

You must configure each individual tab that you want to add to your dashboard with three different elements: name, included widgets, and excluded widgets. 

     {title: "Tab Title 1", displayWidgetIds : ["", ""],
           hideWidgetIds : ["", ""]},
In the preceding example script, two tabs are specifically included. To add more, copy one of the lines and insert it below the line for Tab 2.
  • To define the tab's name, edit this part of the script: ¹¹Tab Title 1¹¹, inserting the name of the tab as you want it displayed, within the quotation marks.
  • To define the widgets to be displayed on the tab, edit this part of the script for that tab: displayWidgetIds : [¹¹¹¹, ¹¹¹¹],. You must insert the unique ID number for each widget within the quotation marks. See Finding the Widget's Unique ID for information about how to locate a widget's unique ID number.

    A tab can display one or multiple widgets. If multiple widgets are to be displayed, list each widget ID, contained within double quotation marks and separated by commas.

  • You must list all other widgets on the dashboard that are not to be displayed in the tab in this part of the script: hideWidgetIds : [¹¹¹¹, ¹¹]},. You must list the unique ID number for every widget not to be displayed within double quotation marks and separated within the list by commas.

Example

For a tab called My Tab, to show widgets 12345 and 39495, but not show widgets 98763 and 64561, the line of script looks as follows: 

     {title: "My Tab ", displayWidgetIds : ["12345 ",”39495”], hideWidgetIds : ["98763", "64561"]},

After you have completed entering and editing the script, click Save in the upper-right. A small confirmation notification tells you that the script is saved. You can close the browser tab, returning to the widget editing browser tab.

Click Apply in the upper-right corner of the widget preview pane and return to the parent dashboard.

Finding the Widget's Unique ID

Every widget component has a unique numeric identifier that must be used within the tabber script to indicate which widgets are to be displayed or hidden on each of the tabs that you define.

To locate a widget's unique ID:

  1. Open the widget configuration page.
  2. Locate the widget on the dashboard and click the Edit icon in the top right beside the widget title.
  3. In the widget configuration window click the Options icon and select Embed Code from the shortcut menu.

    The Embed Code pane for that widget opens.

  4. Under URL Code, locate the long numeric code that follows the widget/text within the URL. It follows the characters /widgets/.

    Tip: It can be easier to copy the full URL code to a text editor and locate the widget ID within the text editor.