Using Action Flow - On-Screen actions

When you are building your Apps there can be different actions that would be in response to the clicking of the Action button. These are actions that happen on the client-side or on-screen and need no interaction with the server. You can get an immediate response as a result of the completion of the action. The Action Flow - On-screen side actions blocks available on the click action of the Action button, provides you these capabilities to build your customized actions.

Now let us take an example to understand how to use the on-screen actions. We will take an example to provide ratings for the selected restaurants and in response to the input provide a gift voucher/coupon of a certain amount to the reviewer.

So let us add text control for Reviewer name, Drop down for Restaurant list, Rating control to accept rating, Action button to submit a rating, and a label/text control to display the Coupon amount.

Now in this example, the Submit Rating button (which is the Action button we added) would be triggering the actions to check the ratings given and set the variable value that represents the coupon amount depending upon the rating selected.

To add the actions select the Submit rating Action button and click Actions button. Now click button_click(click) to go to the Action Flow.

action flow

Here in this case we do not need any data from the server-side. Hence we would be using only the On-screen screen actions for Branch, toast, set control value and set variable.

Let us first add a Branch action from the Logic block where the rating selected will be checked.

If the rating is equal to five or four or less than four then the variable value would be set accordingly. So in this case we need to add a variable for Points. To add a variable go-to Studio Console click Variables, and click +Add. Enter variable name as Point and Type as Persistent. For a detailed understanding of adding variables refer this article here. Now use the SetVariable action under the Utility block to set the value for the Points variable.

We will then add a Toast action to show the response stating a response or a message reflecting the action.

After adding the Toast block we will use the Set control value action to set the value of the text/label control to display the points that we have defined using the variable based on the rating.

setcontrolvalue

Thus the action flow is now ready and can be seen as follows. When adding the action blocks make sure that you add self-explanatory Unique names that reflect the action block.

Now if we run the form let us see how it works.

You can thus make use of the On-screen actions to perform several activities that need no input from the server and provide the necessary response to the user.

Note:

  • Please note that the Rating control used is for illustration purposes only. The rating is normally sent to the server. You can make use of the server-side actions to send the values to the server.