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 Ding model. These are as follows.

Common Settings

  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.

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

Layout of nested tiles

Dashboards may sometimes require layouts with multiple nested tiles. Ding 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. Ding 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.

Last updated 2 months ago.