Skip to main content

Developing an Application

 

OutSystems

Propagate Changes from a Reusable Screen Element

When a reusable screen element (WebBlock.pngBlock) is used, its parent may want to react to interactions happening on it. In OutSystems, blocks can define events that trigger event handlers on  its parent element, the screen or block where it is instantiated. The event handlers include logic to react to the interactions of the end-users.

In a mobile app:

  1. In the Elements tree, right-click on the block and add an WebBlockEvent.pngevent. When used, this event will raise the notification to the block's parent;

  2. If needed, add input parameters to the event that will we be sent with the notification;

  3. Use the event, available under the block elements tree, in the client action from where you want to propagate the change;

  4. In the parent that will handle the notification, open it and select the block. In the properties pane, go to the Events section and set the event handler property to the client action that will catch the notification;

  5. If you have any value sent by the event, add an input parameter to this action and assign to it the value from the event.

In a web app:

  1. Open the action of the block from where you want to propagate the change;

  2. In the flow of the action, add a Notify action. Optionally, set the input parameter Message to a text value you want to propagate. From now on, when the action runs it propagates a notification to its parent;

  3. In the parent that will handle the notification, open it and select the block. In the properties pane of the block, set the Destination property in the On Notify section to the action that will catch the notification.

  4. In  that action, implement the logic to handle the notification. If specified, access the message sent with the notification using the NotifyGetMessage action.

Example in a Mobile App

In the GoOut application, an application to review and rate places, end-users can rate places with 1 to 5 stars. We have created a block, called StarRating, that shows the rating. We want to change it to allow tapping on the stars to rate.

  1. Open the StarRating block;

  2. On the Interface tab, right-click on the StarRating block and add an event called RatingChanged with an input parameter NewRating of type Integer;

  3. Add a new client action to the block called ChangeRating with an input parameter NewRating of type Integer;

  4. Open the new action, drag a Trigger Event from the toolbox to the action flow, and select the event RatingChanged. Set the input parameter NewRating of the event to the input parameter NewRating of the action;

    Propagate Changes from a Reusable Screen Element - Trigger Event

  5. Open the WriteReview screen. This screen is used to submit a review to a place and uses the StarRating block to rate a Place in the review;

  6. Create an action on the screen called ChangeRating, with an input parameter NewRating of type Integer;

  7. Select the StarRating block on the screen, set the property Event RatingChanged Handler to the action ChangeRating, and the input parameter NewRating to the input parameter of the event. This sets the action ChangeRating as the handler of the event RatingChanged;

    Propagate Changes from a Reusable Screen Element - Handle Event

  8. In the action ChangeRating, change the classification of the review to the new rating received through the event;

  9. Publish and test the application.

Example in a Web App

In the GoOutWeb application, an application to review and rate places, end-users can rate places with 1 to 5 stars. We’ve created a block called StarRating that currently shows the current rating using stars icons. We want to change it to allow end-users clicking on the stars to rate places.

  1. Open the StarRating block;

  2. In the OnClick screen action, the action that runs every time the end-user clicks to rate, drag the Execute Action from the toolbox to the action flow and select the action Notify;

  3. Set the Message property of the action Notify to the NewRating input parameter of the action OnClick. This will propagate the rating selected by the end-user to the parent;

    Propagate Changes from a Reusable Screen Element - Notify Message

  4. Open the Homepage screen where we are using the StartRating block to assign the rating for a Place;

  5. Select the StarRating block and set the property Destination to a new screen action called OnNotify;

  6. In this action, set the rating of the form’s record to the new value. To read the value coming in the notify action from the block, use the NotifyGetMessage() function. Since the value received is a text but we want it to be an integer, we use the TextToInteger() function to do the cast;

    Propagate Changes from a Reusable Screen Element - NotifyGetMessage

  7. Publish and test the application.

  • Was this article helpful?