Difference between revisions of "Dashboard Sections"

From Lianjapedia
Jump to: navigation, search
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
''Under construction, coming soon in Lianja v5.2.''
+
==See Also==
 +
[[Dashboard Section Attributes]]
  
In the forthcoming Lianja v5.2 there is a new section type: '''Dashboard'''.
+
==Overview==
 +
Dashboard Sections are used to group multiple related sections and display them horizontally to form a dashboard.  From v5.2.
  
You can relate multiple sections together as part of the '''Dashboard''' section's '''Dashboard group''' and have them displayed horizontally on a page.
+
[[{{ns:file}}:dashboard1.png|800px|left|border|link={{filepath:dashboard1.png}}|Dashboard Section]]
 +
<br clear=all>
  
The sections, being related, all change dynamically as you navigate data in the first section (typically a Form, Canvas or Custom section).
+
==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 Attributes|dashboard Section]] and multiple related sections of other types.
  
This new section layout is specifically designed for building digital dashboards.
+
[[{{ns:file}}:example_dashboard.png|link={{filepath:example_dashboard.png}}|Example Dashboard App]]
 +
<br clear=all>
  
See [https://www.lianja.com/community/showthread.php?4935-Dashboard-section-coming-in-5-2 this forum post for a preview.]
+
In the Development View the Sections can be seen arranged vertically on the Page as normal. 
 +
 
 +
[[{{ns:file}}:dashboard_dev.png|800px|left|border|link={{filepath:dashboard_dev.png}}|Dashboard Section]]
 +
<br clear=all>
 +
 
 +
The top section (here named 'section2') is the [[Dashboard Section Attributes|dashboard Section]]. The other Sections: Form, Grids and Charts all have their [[#Dashboard group|Dashboard group]] attribute set to the name of the dashboard section:
 +
 
 +
<pre>section2</pre>
 +
 
 +
Once you switch to the Desktop App View, the grouped sections are arranged based on their order and their [[#Horizontal stretch|horizontal]] or [[#Vertical stretch|vertical]] stretch attributes. 
 +
 
 +
In the Example Dashboard App in the Lianja App Center [[#Overview|screenshot above]], the [[#Vertical stretch|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|horizontal]] stretch can be set for each Section as a percentage of the whole.
  
 
==Dashboard Group Section Attributes==
 
==Dashboard Group Section Attributes==
Line 22: Line 40:
 
===Vertical stretch===
 
===Vertical stretch===
 
The vertical % stretch factor that this section should occupy.
 
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 App==
 +
Lianja App Builder v5.3 includes an additional example App: example_dashboard2.  Find it listed under 'General' in the App Names explorer panel in the [[Apps Workspace]].
 +
 +
It shows how to layout sections horizontally:
 +
 +
[[{{ns:file}}:dashboard2.png|800px|left|border|link={{filepath:dashboard2.png}}|Dashboard Section]]
 +
<br clear=all>
  
 
[[Category:Lianja v5.2]]
 
[[Category:Lianja v5.2]]

Revision as of 07:38, 23 January 2020

See Also

Dashboard Section Attributes

Overview

Dashboard Sections are used to group multiple related sections and display them horizontally to form a dashboard. From v5.2.

Dashboard Section


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.

Example Dashboard App

In the Development View the Sections can be seen arranged vertically on the Page as normal.

Dashboard Section


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 App

Lianja App Builder v5.3 includes an additional example App: example_dashboard2. Find it listed under 'General' in the App Names explorer panel in the Apps Workspace.

It shows how to layout sections horizontally:

Dashboard Section