Dashboard Sections
Contents
See Also
Overview
Dashboard Sections are used to group multiple related sections and display them horizontally to form a dashboard. From v5.2.
Example Dashboard App
The 'Example Dashboard' App (example_dashboard) is included in the Lianja App Builder distribution and demonstrates how to build a digital dashboard using a dashboard Section and multiple related sections of other types.
In the Development View the Sections can be seen arranged vertically on the Page as normal.
The top section (here named 'section2') is the dashboard Section. The other Sections: Form, Grids and Charts all have their Dashboard group attribute set to the name of the dashboard section:
section2
Once you switch to the Desktop App View, the grouped sections are arranged based on their order and their horizontal or vertical stretch attributes.
In the Example Dashboard App in the Lianja App Center screenshot above, the vertical stretch of the Grid sections is set to 50 (%) and that of the Chart sections set to 33.333 (%).
For a row of horizontal Sections, the horizontal stretch can be set for each Section as a percentage of the whole.
Dashboard Group Section Attributes
The following Section Attributes are used with sections that are part of a dashboard group.
Dashboard group
The dashboard section that this section belongs to.
Horizontal stretch
The horizontal % stretch factor that this section should occupy.
Vertical stretch
The vertical % stretch factor that this section should occupy.
Note that if the value is prefixed with a + then this denotes to skip to next horizontal column position.
Cell padding
Padding for the cells.
Cell CSS
CSS for the cells. This can be, for example name:value;name2:value or bootstrap classes, e.g. border-dark rounded boxshadow.
Further Example Apps
Lianja App Builder v5.3 includes additional example Apps. Find them listed under 'General' in the App Names explorer panel in the Apps Workspace.
example_dashboard2
The example_dashboard2 App shows how to layout sections horizontally:
example_dashboard3
The example_dashboard3 App displays a grid on the left and a form on the right in a dashboard section. The action bar buttons navigate between records in the form section. Clicking on a row in the grid (on the left) relates a record in the form. You can then navigate the records with that "child key".: