How to show data in dashboard

Question

I have a dashboard, which shows the total count of four containers. for this, I'm having four aggregates which return totalcount and the label as shown below

and in the dashboard, showing up the four data as below

and for each expression value i'm using GetLarvaeDetails.List.Current.CountSum, GetPupaeDetails.List.Current.CountSum...

My question is, I'm making four query calls and rendering it in the dashboard. Is there a way to make one query call which returns a single table with all data and render it via looping like we do in angular ngFor?

Update#1: I have created a aggregate as shown below and now it returns as a table. How to render it on the dashboard page?

Update#2:

So here if I use the expression value as GetContainerReport.List.Current.CountSum, it's not working. How to show only the particular count?

Your Update#2 expression will work fine when you build the Count blocks within a list that iterates over `GetContainerReport.List`. — Mark Baijens, Aug 11 '22 at 14:14
So, I need a list and for each list item, I need to put the whole container? — Ranjith Varatharajan, Aug 11 '22 at 14:19
Tried that, but the list is always taking up the full space and every item is coming in the next row. Here the items are in column wise — Ranjith Varatharajan, Aug 11 '22 at 14:27
You should be able to fix that using css styling / changing the tag into a span, if you use traditional ui you should set the line seperator to `none` as well. — Mark Baijens, Aug 11 '22 at 14:44
As Mark Baijens commented, a list widget will solve your problem. Just make sure to keep the order the same if you have different icons. :) You can calculate fields in your aggregate to help with dynamic scenarios too (i.e. CSS classes, icon URLs etc) — Lucas F. F. Lopes, Aug 11 '22 at 15:38
Is this a react application or a traditional one? I have an example ready here for a react application if this is a traditional one, please have a look [**here**](https://success.outsystems.com/Documentation/How-to_Guides/Front-End/How_to_show_records_side_by_side_in_a_List_Record_widget). — Lucas F. F. Lopes, Aug 12 '22 at 03:59

score 1 · Accepted Answer · answered Aug 12 '22 at 15:31

You can use the List widget with a List Item widget inside. Then you add the CSS below.

.list .list-item {
    float: left;
}

It will generate this result:

You can add more properties to the list returned from the aggregate (i.e.: color, icon name) and CSS to make each item look like you need them to look

How to show data in dashboard

1 Answers1