Dashboard Appearance

Let us first explore different features of dashboards and tiles that help us control the appearance of the dashboard content

Common Settings

Certain settings dealing with appearance and nomenclature are applicable to different types of tiles that may be defined in the bippDash model. These are as follows.

1. Name: The name of the tile can be used to identify the tile in code. It is not mandatory and an underscore may be used instead of the name. Following is sample code for specifying the name.

    tile _			//Tile without a name
    tile logotile	 //Tile with a name
   

2. Title: The title of the tile that would be displayed on the tile panel. Following example specifies a title Efficiency By Date for a tile graphTile.

    tile graphTile
        title Efficiency By Date
   

3. Sub-Title: The sub-title would be displayed next to the title on the tile panel in a smaller font. Following example specifies a tile with a title and subtitle.

    tile graphTile
        title Productivity
        subtitle Months Vs Quantity
   

4. Basis: This denotes the percentage width that the tile would occupy on the screen. The sum of the basis of all the tiles in a row should be less than or equal to 100%. If the sum of the basis exceeds 100, some of the tiles will wrap over to the next row when the dashboard is rendered on the screen. An example for specifying the basis is as follows.

    tile graphTile
        basis 50.00
   

5. Tooltip: Additional information about a tile may also be displayed as a tooltip. Specifying a tooltip in code, results in a small (i) icon on the tile panel. You can view the tooltip by clicking this icon. Following is the code for including a tooltip on a specific tile.

    tile graphTile
        tooltip X:Months;Y:Quantity  
   

6. Display settings: Display settings can be used to control the appearance of the panel, margins and borders. These settings are inherited from the parent tile by default if not specified in the model. Following table shows the different display settings available with examples.

Layout of nested tiles

Dashboards may sometimes require layouts with multiple nested tiles. bippDash container tiles can be used to include other tiles. The container tile may have child-tiles laid out horizontally or vertically within it. The orientation of the tile can be specified by the type property as shown in the following code snippet.

tile VertContainer
    basis 20.00
    type vertical
    tile logotile
        //describe content here
    tile nametile
        //describe content here

Here the two tiles logotile and nametile would be laid out vertically one below the other in the container tile VertContainer. Note that, when defining child-tiles in code, the tile definition should be indented by one tab-stop with respect to the parent tile as shown in the code snippet.

Including Custom Content

There may be a need to include custom content on a dashboard for example logos, static text and hero-images. bippDash provides the ability to build such content through the use of custom widgets. Content inside custom widgets is static and can be defined using a combination of Markdown and HTML tags. Custom HTML and CSS may be used and combined with images and links to achieve the desired user interface. The content should be specified using the markdown property of the widget. Following example shows the definition of a simple custom widget with a formatted heading.

tile _
    content customwidget
        markdown """ <h1 style="text-align: center; color: Blue" ;="" bgcolor:="" black"=""><b>bipp Inc</b></h1>"""

Complex html may also be included as follows using the html keyword.

tile logotile
    content customwidget
    markdown m1
        html """ <h1 style="text-align: center; color: Blue" ;="" bgcolor:="" black"=""><b>bipp Inc</b></h1><div><img src="https://bipp.io/img/Hero01.svg"></div>"""

Links to other dashboards may also be included in the HTML using the following code.

tile ContentwithLink
    content customwidget
    markdown m1
        html """ Click {{ id1 }} for Productivity Graph"""
        link id1
            ID D~I1b2emZVa //Dashboard Id
            type dashboard

The {{ id1 }} will be replaced by a link to another dashboard with ID D~I1b2emZVa when this dashboard is rendered. When clicked, the dashboard D~I1b2emZVa will open in the same window replacing the original dashboard.

Custom widgets may also be used to create other HTML components like buttons, tabs or links on the dashboard.

Conditional Rendering of Tiles

Certain tiles can be shown on the dashboard only if a specific condition is true. This is called conditional rendering of tiles. bippDash provides a construct required to define such conditions. Conditions may be based on the click of a specific custom widget or selection of a specific filter value on the dashboard.

1. Using Custom Widgets: Custom widgets can be used to create tabs or links in the dashboard. Consider a use case where data may be presented in two types of views, eg., table view and map view. Each of these views are a different sheet included on the dashboard. The sheets should be shown based on which view the user has selected on the dashboard. Following image shows two tabs created using custom widgets.

   

   Following is the bippDash code for creating these tabs

    tile MapTab
        basis 25.00
        content customwidget
        markdown """<div style="text-align: center;">Map View</div>"""
    tile TableTab
        basis 25.00
        content customwidget
        markdown """<div style="text-align: center;">Table View</div>"""
   

   We create a factor at the top level of the bippDash model to declare the condition as follows.

    dashboard tabbedDb
        factor ShowView
            default_value Map. //Map sheet will be shown by default.
   

   The markdown for each of the tabs is modified to set the applicable value for the factor using the data-factor-details attribute. For the custom widget MapTab it becomes.

    markdown """<div style="text-align: center;" data-factor-details="factor:ShowView@Map">Map View</div>"""
   

   For the custom widget TableTab it becomes

    markdown """<div style="text-align: center;" data-factor-details="factor:ShowView@Tab">Table View</div>"""
   

   Now to actually define the condition based on which a tile will be rendered we use the show_if construct in the tile definition. If we have two tiles, one containing the map and the other containing the table, we can show them based on which tab is clicked. To do this include the following code in the tile definition.

    // For the map tile
    tile MapSheet
        show_if _
            name ShowView
            compare_value Map
            operator =
        content sheet
            ID N~hmkfnNRLA
         
    // For the table tile
    tile TabSheet
        show_if _
            name ShowView
            compare_value Tab
            operator =
        content sheet
            ID N~Jt8tMKwEN
   

2. Using Channels/Filters: This method can be used when we want to show a particular tile only when a specific value is selected in another tile or filter widget. Let’s say we have two columns called PerpetratorEthnicity and PerpetratorRace in our dataset and we want to display a sheet containing count of crimes by PerpetratorRace only when a specific value is selected for PerpetratorEthnicity. We have a channel defined to propagate the selected value for PerpetratorEthnicity as follows.

    clickevent channel_462
        table XLSX_SHT__Crimes
        column PerpetratorEthnicity
   

   The factor we use to control tile visibility can subscribe to this channel as follows

    factor ShowDetails
        default_value 0
        subscribe channel_462
   

   Any tile can now be shown based on the value selected for PerpetratorEthnicity by including the following code in the tile definition.

    tile _
        show_if _
            name ShowDetails
            compare_value Not Hispanic
            operator =
        content sheet
            ID N~zbNreEN12