52
Views
12
Comments
Solved
Create dropdown in table

Hello,
I have a table rendering and i want to add a row with column 'status' having yes/no with submit button where the user can submit all the row at a time. The table is loaded from an entity


Am a newbie can anyone assist me here?



image (21).png
2025-05-19 09-29-29
Balu
Solution

hi @Kishore Perumal
I’ve created a sample OML—could you please take a moment to review it? I hope it meets your requirements. 

Table_Drop.oml
UserImage.jpg
Kishore Perumal

It works thanks

2025-05-19 09-29-29
Balu
Solution

Hi  @Kishore Perumal , this is completed. The first two columns are fixed and the rest are scrollable. Please check. 

stickytable.oml
2025-12-03 17-22-41
Lavanya Kamalaguru

Hi @Kishore Perumal ,

The best way to implement this is by using a Checkbox or Switch for the Status field, since is directly maps to a Boolean (Yes/No) Variable.

You can bind the checkbox variable to: GetAggregate.List.Current.Status.

This way, when the user checks or unchecks the box, the value automatically updated in the record. 

On Submit, you can loop through all the records using a For Each and update them in the database accordingly.

If you want to achieve using Dropdown,

1. Create a local list with values like YES and NO during screen initialization.

2. Bind the list to the dropdown

3. In the OnChange action of the dropdown, assign the selected value to the corresponding record variable.

4. On Submit, use a For Each Loop to save all updated records.

Here you can check the Documentations: Checkbox, Switch, Dropdown

2024-10-05 13-30-20
Huy Hoang The

Hi @Kishore Perumal ,

In this case, you can use  Checkbox or Switch. I think dropdowns don't support boolean. 

However, you can add another integer output and when dropdown onchange you can check integer value and reassign the boolean field.

Hope this helps!

Huy Hoang

UserImage.jpg
Kishore Perumal

Thanks  Huy. Actually my dropdown should 3 values, yes/no/inprogress. Am loading the table from a list entity and i have a submit button. So, on click of dropdown it should show 3 values. User can select anyone like that, I need to have 2 dropdowns means two columns. Could you provide me some sample code?

2024-10-05 13-30-20
Huy Hoang The

Okay, it will depend on the data type of "status". In this case, It has 3 values (yes/no/inprogres)s , so it won't be a boolean. You can use list text or list integer.

2025-05-19 09-29-29
Balu
Solution

hi @Kishore Perumal
I’ve created a sample OML—could you please take a moment to review it? I hope it meets your requirements. 

Table_Drop.oml
UserImage.jpg
Kishore Perumal

It works thanks

2026-03-20 01-28-51
Saugat Biswas

Hi @Kishore Perumal ,

I completely agree with the approach suggested in @Balu 's Table_Drop OML. This idea puts you on the right track and is a good approach to move forward.

The current implementation uses OnAfterFetch to populate the status dropdown with hardcoded values, which works functionally. However, from a best‑practice and maintainability perspective, I would recommend using Static Entities to manage dropdown options and binding the dropdown source to those entities instead. 

Using Static Entities: 

  • Improves consistency across the application 
  • Avoids hardcoded values in logic 
  • Makes future changes easier and safer 
  • Aligns better with OutSystems architectural best practices

Thanks again, @Balu , for sharing the solution and for your continued support to the community.

Best

Saugat

UserImage.jpg
Kishore Perumal

Now i have the container which has class

.table-scroll-wrapper {  overflow-x: auto;  width: 100%;}.table-scroll-wrapper table {  width: max-content;}.table-scroll-wrapper th,.table-scroll-wrapper td {  white-space: nowrap;  min-width: 120px;}.table-scroll-wrapper {  max-height: 400px;        /* adjust as needed */  overflow-y: auto;          /* vertical scroll */  overflow-x: auto;          /* horizontal scroll if wide table */}.table-scroll-wrapper thead th {  position: sticky;          /* makes header sticky */  top: 0;                    /* stick to top */  background: white;         /* prevents overlap */  z-index: 3;                /* above data rows */}.table-scroll-wrapper th,.table-scroll-wrapper td {  white-space: nowrap;     /* prevent shrinking */}

inside this i have a table with class "table table-scroll-wrapper"


now all i want is the first two columns of the table to be fixed and other columns should be scrolled horizontally. Here the table has almost 20+ columns.

can anyone suggest?

2025-05-19 09-29-29
Balu
Solution

Hi  @Kishore Perumal , this is completed. The first two columns are fixed and the rest are scrollable. Please check. 

stickytable.oml
UserImage.jpg
Kishore Perumal

@Balu thanks for the solution i would like to have the table header fixed when scrolled vertically. could you provide me a solution?

2025-05-19 09-29-29
Balu

@Kishore Perumal, please just add the below CSS alone

The max-height: 400px; is just an example — you can set it as per your requirement. 

.FixedColTable-wrapper {

  overflow: auto;     

  position: relative;

  max-height: 400px;     

}

.FixedColTable thead th {

  position: sticky;

  top: 0;

  z-index: 3;

  background: var(--color-background-primary, #fff);

}

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.