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.

Common Settings

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
```
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
```
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
```
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
```
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  
```
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.


Setting	Margin Visibility
Description of the setting	Control margins inside the tile.
Possible Values	show, hide
Sample Use	`margin_visibility show`
Setting	Panel Visibility
Description of the setting	Control if the panel should be shown with a header bar
Possible Values	show, hide
Sample Use	`panel_visibility hide`
Setting	Box Shadow
Description of the setting	Control if panel should be shown as a shadowed box
Possible Values	show, hide
Sample Use	`box_shadow hide`
Setting	Panel Background
Description of the setting	Specify the panel background
Possible Values	default, none
Sample Use	`panel_background default`
Setting	Border Style
Description of the setting	Specify the type of border required
Possible Values	default, solid, dashed, dotted
Sample Use	`border_style dashed`
Setting	Tile Background
Description of the setting	Specify the tile background. This would be specifically relevant when displaying metric sheets.
Possible Values	default, none
Sample Use	`tile_background none`

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 Markdown tag or 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 custom widget with a formatted heading.

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

Custom content 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.

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 report included on the dashboard. The reports 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
```
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 report 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
```

Dashboard Appearance

Home

Common Settings

Layout of nested tiles

Including Custom Content

Conditional Rendering of Tiles