5. Data and Variables

[Shibaji]

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, what are the main constitutes of the Appgyver IDE - Composer Pro, We then created our first App in Appgyver and added some validation logic.

So at this moment our app is validating input values and responding accordingly

Data and Variable

We touched this topic briefly in chapter 3 of this series. Now we'll look into the data and variable options in Appgyver platform.

Variables

Mainly there are 5 types of variables you can define.

• App Variable : You can think of these are global variable and stays for the whole life cycle of the app. Note: for some performance reason, Appgyver suggests not to use App variables unless it's absolutely necessary


• Page Variable: These are the most common variable and stays only for a page


• Page parameters: you can define these to transmit some values from one page to another. I think this is limited to text type. So probably you cannot pass a deep nested JSON.


• Data Variables: This is interesting for back end and data handling. You need to define data source in the Data tab and you can define corresponding variable referring to the data component. Think of Data sources are defining the data type/schema and connections, and data variables are the instances of such types.


• Translations: This I am guessing similar to i18n in UI5. However this is not offered in free trial so I could not test this.

Data

Here you need to define the data source. Generally speaking there are 4 types of data source you can define.

1. Client side data store: this is going to store the data in the mobile app. Useful for local prototypes


2. REST APIs: We can add a REST API as data source


3. AppGyver Cloud data storage: Appgyver provides some minimal cloud storage for non-productive hobby projects only.


4. AppGyver Cloud Integration - This is not offered in free trial so I could not test this.


5. Apart from that there a marketplace from where you can source out some common useful sources like Exchange Rates or Country Codes or Google Geocoding etc.

Working with a List

Now that we covered some basics, let's apply some of this concepts to work on a list. Previously we created a form and put some validation logic. Now we will create a local list to display the tickets that are being created.

Create a Client side data store with the following structure.

• 
  
  Resource ID : TicketData


• 
  
  Short description: Ticket Data


• Property: desc (text type)


• Property: type (text type)

Now create a data variable in the variable editor.

Choose TicketData as source and select the option for Collection of data. In this case the variable will be of Array type.

Save the variable.

List View Component

In the view canvas add a list item component. Then set the corresponding properties to bind appropriately.

Add data on button action

Now that our list is bound to the data source, all we need to do is to add some code to save the data when Create Ticket button is pressed and validation is successful.

To do this we need to go back to the logic flow editor.

On button press I have added the following flow-logic:

We have done the IF_EMPTY check in our last blog. Now we added some logic to actually save the record. First we have to reorganize the page variable with all necessary data.

• id = use formula GENERATE_UUID() // This will generate unique ID


• desc = refer to the page Variable FormData.desc


• type = here we can directly pick the value from the control by referring it. The mapping looks like below

Next in the flow we have to add a Create Data record logic as below:

Also to ensure we can delete the items from the list we added some logic on tap of the delete icon

We added a confirmation message. If it is confirmed then we are doing the deletion operation. Make sure to maintain the ID as mentioned above in the deletion property.

Results

So now our simple app is ready to do create entry and delete entries in a local data store.

 

In the next blog we will see how we can incorporate a REST based data source. Esp. Integrating a OData V4 created on SAP BTP Cloud Application Programming model (CAP)

 

Navigation

< Prev   |   Root   |   Next >