9
Views
5
Comments
Solved
Dropdown across all my pages to optionally filter the pages
Question
Application Type
Reactive

This question may already be answered in the forums, but I'm having difficulty finding this particular question.

I have a responsive app, where I have an application that contains data for 3 distinct groups of data. In my pages, I let the users navigate the full set of data at any time, but I now want globally on all my pages to have a dropdown in the top menu, where the 3 groups are listed. The selection of a group is optional, but if the user selects a group, I want the data of each aggregate on each page, that the user visits, to be filtered based on the selection.

I have tried putting the dropdown in the top menu, in the "UserInfo" component, and I have added a local variable to hold the user's selected value. 

My question now is, how can I let the active page know that the selection has changed, and then make the active page do a reload? I cannot make a client action "OnChange" and the call the RefreshData, because the "UserInfo" component doesn't know which page I'm currently on (or at least it needs the context of the page in the designer, in order to invoke a RefreshData action).

I was also thinking ending the "OnChange" event with a "Destination" pointing to the same page, to force a reload and thereby a filtering of data, but how do I know which page I'm on, in the UserInfo component?

Hope this question makes sense - any takers? :)

mvp_badge
MVP
Rank: #78
Solution

Hi Andras,

For the mentioned use-case, one of the solution that would be, is to forcefully re-load the current screen using JavaScript code

Steps to follow:

1) Map the Group dropdown widget variable property with a client variable i.e. store the Group dropdown selection in a client variable for global access

2) Within the Group dropdown OnChange handler action flow, define a JS node with the below mentioned JS code snippet

window.location.reload(); // to forcefully re-load the current screen

3) Refer/use the same client variable value in every screen aggregate's filter condition, wherever the data is to filtered on the basis of selected Group value

4) In case, if you want to get the current screen url, you can refer the location object href property using the JS node

location.href; // to get the current screen url


  • For the mentioned use-case, the other solution which I could think of is to use the block event trigger/handling mechanism


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #295
Solution

Hi Andras,

Here i have provided you an oml for the implementation of your use case using Event Handling mechanism.

You need to look carefully towards the event triggering of each parent of the UserInfo Block.

And you can also take at the below link for the demo.

https://shweta-gedam.outsystemscloud.com/TriggerEvent/Employees?_ts=637436455270366676

Hope it helps!!

TriggerEvent.oml

Rank: #295

Hi Andras,

To refresh/reload your active page whenever the dropdown value changes of the UserInfo block, you can trigger an event on dropdown onChange action which will pass the updated value to the active page and will refresh your data source.

You can take a look at the below link to know how to use Events.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Reuse_UI/Use_Events_to_Propagate_Changes_From_a_Block_to_the_Parent


Hope it helps!! Thanks

mvp_badge
MVP
Rank: #78
Solution

Hi Andras,

For the mentioned use-case, one of the solution that would be, is to forcefully re-load the current screen using JavaScript code

Steps to follow:

1) Map the Group dropdown widget variable property with a client variable i.e. store the Group dropdown selection in a client variable for global access

2) Within the Group dropdown OnChange handler action flow, define a JS node with the below mentioned JS code snippet

window.location.reload(); // to forcefully re-load the current screen

3) Refer/use the same client variable value in every screen aggregate's filter condition, wherever the data is to filtered on the basis of selected Group value

4) In case, if you want to get the current screen url, you can refer the location object href property using the JS node

location.href; // to get the current screen url


  • For the mentioned use-case, the other solution which I could think of is to use the block event trigger/handling mechanism


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #295
Solution

Hi Andras,

Here i have provided you an oml for the implementation of your use case using Event Handling mechanism.

You need to look carefully towards the event triggering of each parent of the UserInfo Block.

And you can also take at the below link for the demo.

https://shweta-gedam.outsystemscloud.com/TriggerEvent/Employees?_ts=637436455270366676

Hope it helps!!

TriggerEvent.oml

Rank: #22104

Thank you both for the suggestions. I'm in doubt of which approach to take. Implementing a javascript block feels much more straight forward as this is the exact piece of the puzzle that I needed in my current setup. However, your suggestion @Benjith, my gutfeel is that it does feel somewhat "dirty" to put javascript into the action, but I don't know why it feels that way. 

On the other side, this particular javascript code hasn't changed in decades, and will of course work cross-browser. I therefore did implement the javascript code, and put the "SelectedValue-variable" into Client Variables of my reactive web app. It seems to work perfectly. Very fast and easy way of solving this. Thanks Benjith!

The approach suggested by @Shweta Gedam somehow seems more clean, but I need to try it out to see if I am able to use this approach for this scenario, as the shown article shows how a page block sends data to it's parent, but the UserInfo block is an application-level block (not sure if these work the same way?). I need to try it out.

Thanks!

Andras