Changing Table filter on Tab change

Changing Table filter on Tab change

  

Hi,

I'm using Silk UI and using the webpatterns Tabs. I have 4 tabs and want each tab to display a sub-selection of the table. Is there any way that I can use 4 different filters on the same table for each tab? For example, if i click on tab2, then content2 would display the table with the 2nd filter and so on.

Thanks!

Hello Anurag,


If you clone the WebPatterns module, you'll be able to change the Tabs element. By default, you can't easily do that.


If it's really necessary, just clone and change the tabs element and adapt the "TabChange" server action so you can set the correct filters. Pay attention to the placeholders so you can "replicate" the "tab title" click event with only one content placeholder.


Cheers!

Armando Gomes wrote:

Hello Anurag,


If you clone the WebPatterns module, you'll be able to change the Tabs element. By default, you can't easily do that.


If it's really necessary, just clone and change the tabs element and adapt the "TabChange" server action so you can set the correct filters. Pay attention to the placeholders so you can "replicate" the "tab title" click event with only one content placeholder.


Cheers!

Hi Armando,

I'm currently very new to Outsystems and I'm still having some trouble. 

So basically, I cloned WebPatterns but, How do i use this cloned one in my main module where all my Entities etc are?

Thanks!


Hello Anurag,


You'll have to publish the module. I would advise to remove all the items you don't need. Check any Javascript and/or CSS dependency within the module.


Once you publish the cloned module, just reference it.


Cheers

Hi,

I created a local variable and changed it upon tab onkeydown, different value for each tab, so that I could use this variable in the table filter which would then change the filter based on which tab is selected. But although I referenced it into my main module, I am not able to change it once its in the main module.

Thanks


Although I couldn't get a solution by using the tabs, I worked around by linking each tab title to an action that would change a variable, and i used this variable to filter the table. So now, upon clicking the title of the tab( text part in a tab), the corresponding content would display the table with the updated filter. 

This still needs more refinement since if the tab itself is clicked and not the text part in the tab, then the variable will not be updated as the action is linked only with the text part and not the tab itself. (Maybe this needs to be updated in the next version/release?)

Solution

Hi Anurag, 

If I'm imagining your page correctly, then each tab has its own table. If this is the case then:

  1. What I would do is place the table in a WebBlock. You can pass the filter criteria to the WebBlock as parameters. When you click on a tab, the WebBlock will run its preparation again, getting new data from its aggregate to the table.
  2. Another solution is to set the Source Record List of each table to a separate Aggregate that is filtered the way you want. 
  3. Finally, you could experiment with putting the contents of each tab in a container that has Screen Action (that sets your variable) in the on OnClick destination. I think you will need more than just one TextWidget in the container for the click to apply when you click outside the title of the tab.

I hope this helps!

Solution