How to Add Logic to your Applications in SAP Build Apps

[former_member805914]

So, now you’re ready to move forward in your Citizen Developer Journey! In the previous blog, we discussed what Conditional Logic is and how it works. In this blog, we will look at how to implement Conditional Logic in SAP Build Apps by verifying an email address.

Let’s start by adding some User Interface elements. I have added an input field and a button:

Next we need to create some variables. We will create 1 App Variable and 1 Page Variable. Both of these will be of type “Email address”.

I have named my App Variable “User” because it will act as a means to identify the user that has logged on throughout the entire application:

 I have named my page variable “email” because it will act as a placeholder: it will only hold the value of the email address entered until we’ve verified that the input is in the correct email address format:

To add your variables, toggle to the variables view and create a data variable of type “Email Address” as we did in the post on creating variables.

The next step is to set the value of this email page variable to the value of the email address entered in the input field. This means that page variable will hold the email address entered only for the duration of the user viewing this page. In the UI view, select the input field and in the right hand-side panel under the properties tab find the value section:

Currently the input is bound to nothing. We want to bind it to our page variable. Click on the icon with the X and select “Data and Variables”:

Now select “Page variable”:

Then select our “email” variable and be sure to save this:

Let’s begin to build our logic now! Select the Button and expand the logic panel at the bottom:

Now we can add our conditional statement. In the Market Flow Function panel on the left hand-side, locate the “Utility” section. Here you will find an “If Condition”:

Now, drag the if condition onto your logic builder and connect it to the on tap component:

We can now specify what we want the if condition to be, ie: we want to check that the email address entered is indeed an email address before we set our app variable. To do this, select the if condition component. In the right hand-side panel under the properties tab, select the icon under the “Conditions” section:

We will use a formula to define our condition:

Now click on the drop down to define the condition:

Now we can state our condition. There are various different functions and conditions already build into Build Apps’ logic:

But, we want to check that email address contained in our email page variable is in fact an email. So, our condition will have the following syntax:

Save this condition.

So now we will have 2 scenarios:

1. The condition is true: the email address entered is in the correct format. For this we can set the User App Variable to the value of the email page variable as we did in blog Giving Meaning to Variables and add a toast to confirm that the email address is valid when the application runs:

2. The condition is false: the email address entered is not in the correct format. For this, we can add a toast to notify the user that this is not a valid email address:

Be sure to save this!

Now we can test that this works!

Launch your Application and enter a valid email address. If it is correct, we will see the toast confirming that everything is in order and out app variable has been set:

Now enter an input that does not have the correct email format. We should see the toast that informs us that the email address is invalid:

Conditional Logic plays a key role in all application development. Decisions must always be made by the application to ensure that functionality and user experience is correct. These decisions can range in complexity: from a simple scenario, like the one above, to more complex cases where multiple decisions must be made and actions carried out. Now that you understand how to implement Conditional Logic in your Build Apps Applications, we can move forward and bring a backend data source into the picture with APIs in the next blog!

Remember to share your feedback and experiences in the comments!