- SAP Managed Tags:
Appgyver is a Low-code no-code platform with which you can build apps quickly.
You can refer to my bog Appgyver- Introduction where I tried to put some introduction and SAP’s acquisition of Appgyver.
In the previous blogs I have explained how you can get onboarded in Appgyver and what are the main constitutes of the Appgyver IDE - Composer Pro.
In the previous Blog we created a basic app for creating a service ticket and previewed it via Appgyver preview mobile app. The preview is looking like below
In this blog we will extend the scenario to see how we can do some actions on button click.
Binding Variables
But before we go there we must bind the input fields with some variables so that we can validate the values later.
Switch to the variable editor and create a page variable.
For now create a page variable and use it for our purpose. We will discuss different variables in next chapter.
My page variable is a structure which consists of two text fields - description and type.
Save this variable and switch to View editor. Choose the Input control and from the property pane choose the value field.
Next choose the 'Data and Variable' > 'Page Variable' > choose the newly created page variable and and bind to the 'desc' field to this control.
Now the input field for Description is bound to Page variable.
Let's add some action now !!
For this we need to understand a concept in Appgyver, called logic and flow function
Logic and Flow Function
In an app when you need to execute some action or logic, you should use Logic and Flow functions.
To use flow functions you need to open the Logic Editor from the below
Click on the up arrow and this will open a logic editor.
Logic can be embedded in various parts of the app.
This can be embedded on user actions like Button press etc. or on page load as well.
to plug in logic choose the related control from where you'd initiate the logic flow. In our case we'd like to add some validation rule on press of the 'Create Ticket' button. If the description is empty then we'll throw an error pop up.
To do this we need to add a flow logic for the Button press action.
Choose the Button from canvas and Open the Flow Logic Editor
For our purpose we need an IF logic to test whether the variable bound to the Description field is empty. If it is empty then we'll throw pop up message 'Please provide a description' or we'll pop up message 'Description updated!!'
For this we need to add the following flow logic
The IF statement can be dragged from Utility section from left pane. Under the Condition add a Formula. Formulae are powerful constructs which acts more like functions in Excel and you can build logic snippet with this. For our purpose the formula to be added in the Formula editor is:
IS_EMPTY(pageVars.FormData.desc)
The IF utility flow logic branches two outcomes.
Accordingly I just added two pop up action with proper message and saved my project.
Now review the app in the Appgyver preview and you'll see the error validation message is popping up on button press action.
With empty description field the error message is coming in pop up:
With some description, the success message is popping up.
This example is just to show the power of logic flow to show some basic example. You can play around with the logic flow to do far more.
If in some scenario the given logic flows are not sufficient, then you can build your own custom function using JavaScript as well.
In the next blog I'll cover some more deeper look at the Data and variables
Navigation
< Prev | Root | Next >
You can refer to my bog Appgyver- Introduction where I tried to put some introduction and SAP’s acquisition of Appgyver.
In the previous blogs I have explained how you can get onboarded in Appgyver and what are the main constitutes of the Appgyver IDE - Composer Pro.
In the previous Blog we created a basic app for creating a service ticket and previewed it via Appgyver preview mobile app. The preview is looking like below
In this blog we will extend the scenario to see how we can do some actions on button click.
Binding Variables
But before we go there we must bind the input fields with some variables so that we can validate the values later.
Switch to the variable editor and create a page variable.
For now create a page variable and use it for our purpose. We will discuss different variables in next chapter.
My page variable is a structure which consists of two text fields - description and type.
Save this variable and switch to View editor. Choose the Input control and from the property pane choose the value field.
Next choose the 'Data and Variable' > 'Page Variable' > choose the newly created page variable and and bind to the 'desc' field to this control.
Now the input field for Description is bound to Page variable.
Let's add some action now !!
For this we need to understand a concept in Appgyver, called logic and flow function
Logic and Flow Function
In an app when you need to execute some action or logic, you should use Logic and Flow functions.
To use flow functions you need to open the Logic Editor from the below
Click on the up arrow and this will open a logic editor.
Logic can be embedded in various parts of the app.
This can be embedded on user actions like Button press etc. or on page load as well.
to plug in logic choose the related control from where you'd initiate the logic flow. In our case we'd like to add some validation rule on press of the 'Create Ticket' button. If the description is empty then we'll throw an error pop up.
To do this we need to add a flow logic for the Button press action.
Choose the Button from canvas and Open the Flow Logic Editor
For our purpose we need an IF logic to test whether the variable bound to the Description field is empty. If it is empty then we'll throw pop up message 'Please provide a description' or we'll pop up message 'Description updated!!'
For this we need to add the following flow logic
The IF statement can be dragged from Utility section from left pane. Under the Condition add a Formula. Formulae are powerful constructs which acts more like functions in Excel and you can build logic snippet with this. For our purpose the formula to be added in the Formula editor is:
IS_EMPTY(pageVars.FormData.desc)
The IF utility flow logic branches two outcomes.
- TRUE : if the condition is met
- FALSE: if the condition is not met
Accordingly I just added two pop up action with proper message and saved my project.
Now review the app in the Appgyver preview and you'll see the error validation message is popping up on button press action.
With empty description field the error message is coming in pop up:
With some description, the success message is popping up.
This example is just to show the power of logic flow to show some basic example. You can play around with the logic flow to do far more.
If in some scenario the given logic flows are not sufficient, then you can build your own custom function using JavaScript as well.
In the next blog I'll cover some more deeper look at the Data and variables
Navigation
< Prev | Root | Next >
| User | Count |
|---|---|
| 34 | |
| 13 | |
| 11 | |
| 11 | |
| 10 | |
| 9 | |
| 9 | |
| 9 | |
| 8 | |
| 7 |
