Introduction
To organize your data efficiently, you can present it in columns using a table that categorizes the information according to a specific field. For example, by working with an aggregate such as "Account" and using the "Industry" field (which should be under the parent entity or aggregate) to group the data, you can achieve a clear and structured result. The final result is a dynamic table where each column represents an industry, with the ability to explore the associated accounts directly via a dedicated application page.
Step-by-step instructions
1. Create a page of type "custom" where the table will be displayed.
2. Create a Repeater from an Aggregate
In our example, we use the "Accounts" aggregate.
a. From the "Attributes" tab, change the orientation of the "Repeater" to "Horizontal".
b. Remove all fields from the "Repeater".
c. Add a behavior called "Group Component Data" to group the data.
This behavior specifies the field used for grouping, which in our example is "Industry". Write:
account => account.industry
Note: This behavior changes the structure of the data received. Now, the "Repeater" will have as many records as there are industries (instead of accounts).
.png)
3. Add a Text Field in the Box under the Repeater
In the "Attributes" tab, under the "Value" section, choose "Field" and write: id. This will form the columns.
Note: What is displayed are the values of the "id" field, which is the result of the "Group By" from Step 2-C.
.png)
4. Insert a Second Repeater to Display Detailed Data
Add another "Repeater" inside the first one using the toolbox.
Recommendation: Drag it onto the page into the "Industry" box.
Then, link it to the data (your list of accounts), which contains the grouped data. To do this, add a "Set Component Data" behavior of type JavaScript and write:
data.data
The account IDs will instantly appear.
.png)
5. Add Specific Fields for the Accounts
From the "Project Explorer" panel, drag the fields you want to display into an "Account Card", under the ID text. In our example, we drag the "Name" and "Account Manager" fields. Then, remove the field containing the ID.
.png)
6. Apply Visibility Conditions to the "id" and "None" Fields
a. When an account does not have an industry, the value is empty. Create a conditional column header that will only appear in this situation. To do this, drag a text field from the "toolbox" directly onto the page, inside the "box" under the industries. Then, in the "Attributes" tab, enter the value: None.
b. To make this text component visible only when the id value is empty, add the behavior "Show Component Based on a Condition" and enter:
!data.id
.png)
c. Then, apply the opposite condition to the "id" field:
!!data.id
.png)
Result for Step 6: You now have headers for empty industries.
.png)
Bonus: Style the Table to Improve Visual Appearance
Add some style to make the table visually appealing:
Adjust padding, margins, and fonts.
Use fixed column widths.
Enable horizontal scrolling if there are too many columns.
.png)
Conclusion:
Presenting data in columns requires structuring the data into clear groups, adjusting the presentation using specific behaviors, and applying styles for an optimal rendering. These steps ensure an intuitive and organized visualization of the data.