View RSS Feed

LianjaDev

HOWTO Build a digital dashboard in Lianja

Rate this Entry
A digital dashboard is a business intelligence tool that allows business leaders to track, analyze and report on KPIs and metrics. Modern, interactive dashboards make it easy to combine data from multiple sources and deeply explore and analyze the data directly within the dashboard itself.

You can build a digital dashboard in Lianja without any coding needed.

In this article I will show you the steps needed to build a dashboard like this.

Dashboards are made up of cells which can be of different sizes.

Note that the cells are all related together as you navigate records using the ActionBar or the Query Builder. The Dashboard cells maintain their section relationships that you have specified.

Any type of section can be placed in a cell even custom sections.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 11.00.49 AM.jpg 
Views:	2391 
Size:	68.1 KB 
ID:	2689

Let's get started.

Firstly create a new page and in the page attributes check Accordion behavior.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.55.25 AM.jpg 
Views:	2230 
Size:	98.6 KB 
ID:	2691

Tip: type acc in the App Inspector Search Bar to filter the attributes.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 11.09.14 AM.jpg 
Views:	2261 
Size:	41.0 KB 
ID:	2690

A dashboard section occupies the whole of a page when it is rendered. As with all other Lianja UI sections it has an ID, in this case section2.

Sections contained on the page that belong to the dashboard should have their Dashboard group attribute set to the name of the dashboard group they belong to. In this case section2.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.55.58 AM.jpg 
Views:	2257 
Size:	100.2 KB 
ID:	2692

Add additional sections to the page and specify the Horizontal and Vertical stretch factors.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.56.29 AM.jpg 
Views:	2181 
Size:	99.5 KB 
ID:	2693

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.57.44 AM.jpg 
Views:	2238 
Size:	99.0 KB 
ID:	2694

The next three sections each have their Vertical stretch set to 33.333% so each cell is the same height.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.58.19 AM.jpg 
Views:	2239 
Size:	94.7 KB 
ID:	2695

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.58.41 AM.jpg 
Views:	2244 
Size:	91.9 KB 
ID:	2696

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 10.59.01 AM.jpg 
Views:	2244 
Size:	86.9 KB 
ID:	2697

Click the Preview Live in Browser icon.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 11.38.18 AM.jpg 
Views:	2269 
Size:	88.7 KB 
ID:	2698

and we have a dashboard.

Click image for larger version. 

Name:	Screen Shot 2021-11-30 at 11.00.49 AM.jpg 
Views:	2391 
Size:	68.1 KB 
ID:	2689

Submit "HOWTO Build a digital dashboard in Lianja" to Google Submit "HOWTO Build a digital dashboard in Lianja" to Facebook Submit "HOWTO Build a digital dashboard in Lianja" to Twitter

Updated 2021-11-30 at 05:21 by barrymavin

Tags: None Add / Edit Tags
Categories
LianjaDev , NoCode , HOWTO

Comments

Journey into the Cloud
Join us