Conditional display of Table list row data

Conditional display of Table list row data

I have a table list in and Edit page. The list has 3 columns: Yes, No, Question. I want to show / hide certain rows based upon the answers to certain questions in the returned record set. In other words, I want to fetch all of the questions and their corresponding response value (Yes, No, Null) and then set their row widget display property to either "none" or "block' depending on the answer to a particular question in the list.

I want to do this so that I can then attach an onchange handler that will refresh which rows are displayed should the user change the answer to the initial visible questions.

I've tried foreach and if statements in the preparation but can't seem to get the functionality to work.

Any help or feedback would be greatly appreciated.


Hi Clayton,

Why don't you simply avoid loading the questions that should not be displayed on the list? You can do that by simply iterating the original list in the screen preparation and appending only the records that you want visible to a new list - you can then use this new list as the source for the table records on your screen.

If you do want to control the style of the rows on your TableRecords, what you can do is add a  style extended property which value ("display: none;" or "display: block;") depends on the properties of each row (see the image below).

Kind Regards,

Daniel Lourenço

Thanks for the reply and your suggestions.

Unfortunately, your first suggestion won't work for me because I don't want to exclude a record from the record set. I just want to show/hide a row based on the value of a button in a previous row. It's basic skip logic. I also don't want to load a subset of the recordset because if the user changes an answer to a question then I have to make an Ajax call to refresh the recordset and the display. I just don't see the need to make this round trip when I should be able to implement a simple show/hide feature.

In other words, onload if Q1 button "No" is checked then hide Q2 and display Q3. If the user then changes Q1 answer by clicking on the "Yes" button then I want to show Q2 and hide Q3. This kind of functionality would take 10 minutes to otherwise write in JavaScript but I've spent hours trying to figure out how to implement this in the Service Studio environment to no avail.

Your second suggestion also doesn't work for me because your assumption is that I want to hide a widget (row) based on it's current value. The fact is I want to show/hide a given widget based on the value of another widget at runtime. Part of the problem is I don't understand how to identify widgets at runtime other than the "List.Current" widget.

Again I appreciate you feedback. If you have any other feedback or suggestions I'd greatly appreciate it.


You may be able to add an attribute of type boolean and pre-process the record set in the Preparation before the table is displayed.  Then you just need to use this attribute to display the data.
Hi Clayton,

Try the attached solution. (Sample001.oml)
We can actually retrieve all the Element_Id´s  in runtime using a "in-line function with recordlist by ref"  trick. 

Everything is possible with Outsystems!  :) Sometimes we just have "To think Out of the box".

Best Regards,
Rafael Pereira

An update for Chrome in particular - display:block doesn't keep the row aligned in the table as you would want. You'll need to use "display: table-row;" instead. Tested on latest versions of Chrome, IE & Firefox.

If (exprTrueToDisplay, "display: table-row;", "display: none;")
Matt Beale wrote:

If (exprTrueToDisplay, "display: table-row;", "display: none;")
Hello Matt,

You could also use: 
'If (exprTrueToDisplay, "", "display: none;")'

On this way the default row-style is used when it's not true and it's hidden when false. 
It saves setting a 'extra' style when 'buidling' the table row. 

Kind regards,
I am using "display:none" for hiding columns, o PC working perfect, but on phone I don't see whole table. On phone I tried to open via Outsystems app and Google Chrome.
I think the silk framework "hides" columns so it might be changing the hidden columns styling as well.  If these are columns that should be hidden because of access or another condition, maybe a seperate screen for each would work better.