OutPower Tutorial – Reactive web application – How to pass data between WebBlocks (OutSystems)

OutPower Tutorial – Reactive web application – How to pass data between WebBlocks (OutSystems)


Hello and welcome to our new OutPower tutorial. On this video we talking about how we can pass data between Web Blocks,
we go through a short guide where we explain all the necessary steps to be able to
achieve this in a Reactive Web Application. With that in mind, let’s go
check this. When we are in the situation where we
have a parent page or WebBlock with several child WebBlocks,
we could be in a position where we want the content of one of those WebBlocks to
change based on the action that happened on a different WebBlock. For example, let’s consider that we are at a parent page with two WebBlocks. In one of the WebBlocks, the source, we are going to Select a record and on the target WebBlock we can show that record details, or a chart etc. So to recap our
example, there is a screen that is the parent of two WebBlocks, the source WebBlock that implements a listing of records. Target WebBlock that shows the
detail of that record. When you select a record on the source web block the target web block needs to be refreshed As you can see… We are at an empty page,
this is our starting point so let’s begin by creating the source WebBlock. In our case it will be a list of records that represent messages that were sent
within the application. In a WebBlock we are going to create an action where we can trigger the event using the Trigger Event tool, passing the necessary
data has an input parameter to the event. Now we right-click the source WebBlock
and add an Event. We also add an input parameter to the Event to pass the values to the parent. Next we have an action where we trigger
the event using the Trigger Event tool and pass necessary data. Finally on a parent screen, In here we handle the event triggered by the source WebBlock and update the variable
that then will be used as an input parameter at the target WebBlock. So on
the screen of the interface editor, We select the source WebBlock In the properties of the WebBlock, on event the Event and handler section, Under the Event section, we click and have a new Event handler action For the event triggered by the
source WebBlock. In the newly created action, we add a logic to set the new values for the input parameters of the target WebBlock, when this happens the
target WebBlock will be automatically updated. Let’s build our target WebBlock. And last on a target WebBlock we set to
execute the logic in the, “OnParametersChange” event handler. In the properties pane, edit the “OnParametersChange” property under the event section and select a new
client action to create a client action that runs when the values of the input
parameters change. In the newly created action, in our case, we just need to refresh the query, but in here is where you would handle the new values of the
input parameters. Our target WebBlock is ready, now let’s
add it to our parent webpage. Okay our development is ready.
Now let’s check out our demo in action. let’s start by doing the 1- Click Publish. Okay finished. Okay so on the top, we have our source WebBlock and below we’ll have our target WebBlock. Which will only appear as soon as we select one of the records. So we start off with the first for
example. There we go, our target WebBlock appeared and showing the data from the
source WebBlock. As you can see in our demo when you select one record in the source WebBlock it refreshes the data On our target the WebBlock showing its details. And with that we wrap up our video tutorial on passing data between WebBlocks. We hope you have enjoyed our video and please join us next time for more OutSystems tutorials by OutPower.

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *