Dev Tip: Force refresh of reactive block

This application displays the number of unfinished tasks on the home page and on the bottom bar.

If we navigate to the inbox, you can see that the app loads all tasks and also updates the bottom bar. Now I’m going to create a new task in the back office. As the user navigates through the application, the bottom bar is unaware of the new task I just created. It is only when we navigate to the inbox that the app updates the bottom bar.

This happens because the logic updating the number of unfinished tasks is on the Inbox screen. We can move this logic to the bottom bar instead; in this case, the app will update this number on every navigation. I demonstrate this by creating a new task and navigating within the app. 

Now let’s look at another use case. We want a refresh button to force the app to update the bottom bar; as we can see, this is still not working. For the bottom bar to refresh itself, we will use the OnParametersChanged event. This will refresh the data from the server and update the client variable. To invoke the OnParametersChanged, we add a new input parameter to the block. We use an optional DateTime input for convenience. All that is left to do is use this input parameter on the home page and update it whenever the user clicks the Refresh button. As you can see in my example, everything works! That’s your dev tip for today.

Leonardo Fernandes, Head of Delivery + OutSystems MVP, outlines how to easily force refresh reactive blocks in this 4-minute video.