Ajax refreshing a table automatically on Tab Change - Outsystems 10

Hello,


I am using version 10 of Outsystems platform, and I have a small (big problem), that I can't seem to get around.


I have adapted the tabs widget of SilkUI to my Module, but instead of having just 5 tabs, I created 11 tabs. So far so good, all the tabs are working correctly, the issue isn't even in the number of tabs.


The problem is that I have a table records defined in a WebScreen that has the tabs, and I want to be able to automatically filter the contents of the table, as soon as the tab is changed.

Now, there is the TabChange action, that automatically executes logic as soon as a tab is changed, but since that action is called out of the scope of my WebScreen, I can't refresh any Widget (they don't exist there). Thought about adding input parameters, but not sure that that would work.


Also created another screen action to be called inside of the scope of my WebScreen, when the tab is changed, but it seems that it is executed sometimes (after the Tabs TabChange action), and other times not executed at all. (Maybe because they are concurrent?)


Any help would be greatly appreciated. Thanks


Hello Ricardo,


I am honestly confused with your statement. From my understanding both the records and the tabs are on the same screen. Assuming that, your attempt to use OnTabChange is the right direction, one problem I see at the moment is this:

 I can't refresh any Widget (they don't exist there)

Does your widget have names? you cannot perform ajax refresh on a widget without a name.


Also created another screen action to be called inside of the scope of my WebScreen,
when the tab is changed

What is the trigger of this action? Is it OnTabChange? Maybe your trigger is wrong for this one.


Hope this helps!

- Emman

Hi Ricardo Cotilho,

I guess your action within scope does not work sometime because changing tab is took place with java script which is much faster than running a action to refresh table record. Thats why its sometime works but not work another time. If you wants to achieve it at same time I suggest you to make custom tabs.

To create custom tabs 

you just need to clone the tab widget
Remove the javascript from javascript section of tab webblock
Just add action on tab as you are using
Add class on each tab in extended properties if(activeid=Entities.Tabs.Tab1,"activeclass","inactiveclass") - Use class and condition according to your widget this is just example
and refresh both tabs and grid

It may help you if you have not find the solution yet

John Emmanuel Si wrote:

Hello Ricardo,


I am honestly confused with your statement. From my understanding both the records and the tabs are on the same screen. Assuming that, your attempt to use OnTabChange is the right direction, one problem I see at the moment is this:

 I can't refresh any Widget (they don't exist there)

Does your widget have names? you cannot perform ajax refresh on a widget without a name.


Also created another screen action to be called inside of the scope of my WebScreen,
when the tab is changed

What is the trigger of this action? Is it OnTabChange? Maybe your trigger is wrong for this one.


Hope this helps!

- Emman

Hi John, thanks for your answer. 

"From my understanding both the records and the tabs are on the same screen" - That is the problem, they are not on the same screen. I copied the tabs web block to my common area. And that is why I can't refresh the widgets from that action. Is the only solution really to have the tabs on the same screen?



Hello Ricardo,


I see, in that case you can pass input variables to the next screen which can be used as reference when rendering the widgets as intended.


Hope this helps!

- Emman

Hi Ricardo,

May I suggest to look at the example OSMDB movie application from the Web Blocks training video? 

In this example, the stars icons rating are web blocks that respond to actions from the parent screen.

I believe in your context, it is a similar use case where the tabs actions would trigger the web blocks containing the table data. The web block preparation steps should be able to show refreshed data whenever the web block is refreshed. You can confirm this by adding breakpoints on your main screen and web block preparation while debugging.

I hope this helps. Please share if you can progress.

Kind regards,

Boney