I have a table where the user can select from 4 different "Views". Each view shows different columns and has different filters. All 4 views are based on the same aggregate, just with different default columns and filters.
I have a configuration table with a list of column names and which views that column should be shown or hidden. I have a client action that reads the table, but I am having difficulty actually showing or hiding the column from within the client action.
Can this be done with an assign or does it have to be done via JS? I'm very new at JS and don't know how to do this.
Hi Jeff,
You could also just hide a specific column conditionally using the "Hidden" HTML Attribute on the HeaderCell and the RowCell.You can set the value to True or False based on an IF block:
Hi @Jeff Kest
I think you can achieve it just by using IF
just add 4 tables with different views/column
add IF on every table that will equal your current view and add IF on the filter
Does this work for your question?
Also if you only want to use 1 table but different column per view, you will need to use CSS to hide/show columns depending on the view
The issue is they can dynamically unhide columns not in the view's default, so all columns need to be in the aggregate.
How do you use CSS from within an action?
Hi @Jeff Kest I am not an expert on CSS but the one I know is to create a CSS class with display: None
then add some logic to reflect the row/header cell based on the condition.
or If you have an OutSystems UI Hidden class you can use it
you can also refer to this one
https://www.outsystems.com/forums/discussion/76075/show-hide-columns-in-reactive-web-ui/
furthermore, this is a sample GIF of how it works. using hide/show CSS
Hi @Jeff Kest ,
I would suggest you to create one flag with boolean data type inside the table for example "HideColumn"
And use this flag in If condition to hide and show perticular column and change this flag value as per the selection.
Best
Arun
I've tried using a css style "Display:None" within an if statement, but it's not working either.
When I start the form, I build a variable with ColumnRowHeader list as its data type (ColumnRowHeader is the theme's name). That variable has 29 rows, 1 for each column.
So for the third column, I set the style to IF(ColumnRowHeader[2].isVisible,"","Display:None"). I do this for both the header and row for that column. But it does nothing.
Right answer, wrong place.
For the row cells, it didn't work when I put the if statement in the hidden attribute. But when I put it in the style class, it worked perfectly.
Hi Jeff,I just tested this again and you are 100% correct. The hidden attribute doesn't seem to work dynamically when using an if condittion wich i was not expecting. As you mentioned, an alternative would be to use the existing "hidden" class in the Style Class parameter.Apologies for the confusion