The table should be visible when the page loads. Whenever the dropdown value changes, new member columns should be added dynamically (e.g., Member 2, Member 3), and each member column should include its child columns: ‘Do you suffer from?’ and ‘First Diagnosis Date’, as shown in the image.
How to achieve this
Hi @Shivani More
Because a Data Grid supports fully dynamic columns, you can add or remove columns at runtime based on the selected number of members. The grid loads with the basic disease rows, and when the dropdown value changes, you programmatically generate new grid columns for each member. For every member, you create two dynamic columns: one for “Do you suffer from?” (a boolean/Yes–No column) and one for “First Diagnosis Date” (a date column). These columns are added to the Data Grid using the grid’s “AddColumn” actions or by rebuilding the grid’s JSON configuration. Each time the dropdown changes, you clear existing member columns and recreate them according to the selected count. The Data Grid automatically renders these new columns without needing to restructure the UI. Your data source should include rows for each disease and dynamic fields for each member, which you can store in a structure or JSON. When the user interacts with the grid, Data Grid events update the underlying data model.
Regards,
Karan Shinde
Hi @Shivani More ,
This doesn’t look like an OutSystems Data Grid. Could you share how the table is being created and what the underlying structure looks like? An OML would be extremely helpful.
Hi Mihai,
This is sample UI design that I wanted to implement in Outsystems
If that is just a sample UI design and you have to built this type of dynamic table from scratch, I would also recommend using OutSystems Data Grid instead of using table as also suggested by @Karan Shinde .
This will help you to achieve your requirement.
Also refer to this sample application by outsystems to get a better understanding on data grid.
Anees
Hi, @Shivani More
Yes, you can build the UI shown in the image using OutSystems. However:
Use ListRecords with a custom table layout. This gives you full control over the UI elements like Yes/No buttons and DatePickers.
Avoid using DataGrid, as it does not support custom widgets inside cells easily (especially in Reactive Web).
You can manage the layout with simple CSS and bind each input to local variables or a structured list for both members.
Useful References:
ListRecords Documentation – OutSystems
Reactive Editable Table – Forge Component
DataGrid Reactive – Forge Component
Hope this helps you.
Best regards,
Peter Hieu.