Episode 05

In this episode let's build a simple but powerfull dashboard!

The gallery

Follow this steps for creating the gallery:

1. Insert a vertical blank gallery

2. Connect to the list Work Progress Tracker

3. Insert inside the gallery lowcodera panel component. Turn off the shadow using EnableShadow property.

4. Insert lowcodera icons (check, calendar)

5. Add one label for the description of the task

6. Add another label for the due date. For formating use the following: Text(ThisItem.'Due date', "dd mmmm yyyy"

To show only the last items added we are using the following formula:

LastN(WorkProgressTracker,4)

Cards

To create the cards as below please follow the steps:

1. Insert lowcodera Panel component for each of the KPI's (Not assigned tasks, Overdue and All tasks)

2. Use the table below for giving the right attributes for each of the cards.

   1. KPI on Description property

   2. Icon on Icon property

   3. Formula on Title property

KPI	Icon	Formula
Not assigned tasks	exclamation	CountRows(Filter(colWorkProgressTracker, 'Assigned to'.Email = Blank()))
Overdue	clock	CountRows(Filter(colWorkProgressTracker, 'Due date' > Today()))
All tasks	check	CountRows(colWorkProgressTracker)

We are assuming a small chunk of dataset is being created in our local collection. Work with big datasets in a collection can cause performance issues.

Summary Chart

To create the summary chart, please follow these steps:

1. Import the component column chart

2. Use the following Power Fx formula to organize the data

Table(
    {
        name: "Priority",
        data: [
            {
                label: "Low",
                value: CountRows(Filter(collWorkItems,Priority = "Low"))
            },
            {
                label: "Medium",
                value: CountRows(Filter(collWorkItems,Priority = "Medium"))
            },
            {
                label: "High",
                value: CountRows(Filter(collWorkItems,Priority = "High"))
            },
            {
                label: "Critical",
                value: CountRows(Filter(collWorkItems,Priority = "Critical"))
            }]
    }
)

For more information about column chart please check lowcodera docs

Use the panel component to create a nice background to the chart