SAP AppGyver is a tool to quickly develop app without writing code. In this example, we will create an app using AppGyver and then consume the Northwind Odata service and display list of products in the app.
- After logging into SAP AppGyver, go to URL SAP AppGyver – Composer Pro
- On this page, you will see all your projects.
- To create a new project, choose Create New
- Enter the name of the app and choose Create
- In the UI Canvas, change the Headline and the Text, and choose Save
- Choose Launch. Under Web Apps, click OPEN APP PREVIEW PORTAL button to launch the app in web browser.
- Next, we would like to consume NorthWind Odata service. Click on DATA, click ADD DATA RESOURCE and choose OData integration. In the BASE API Url field enter the odata service base url – https://services.odata.org/V2/Northwind/Northwind.svc/ and click VERIFY URL. Ignore the CORS error.
- Next, toggle the Products button. Click SAVE DATA RESOURCE.
- Under Resource ID, you will find Products.
- Choose Products again. It opens the Configure Odata integration dialog box. Choose list. Switch to Test tab and click Run Test.
- The test run will pull all the products, indicating that the OData integration is working good.
- Close the dialog box.
- Go to UI Canvas tab. From the LISTS section, choose List item and drag and drop it into the canvas.
- Next, we need to create Variables. Toggle the View – Variables button.
- Choose DATA VARIABLES. Click ADD DATA VARIABLE. Choose Products as the data source. It creates a variable named Products1. Ensure Data variable type is Collection of data records. Toggle back to View.
- Choose List item. In list properties, click Repeat with icon. In the binding dialog box, choose Data and Variables -> Data variable. Choose the Products1 variable and click Save.
- Next, we have to change the binding of Primary label and Secondary label. Choose binding icon under Primary label. In the binding dialog box, choose Data item in repeat.
- Under Select repeat, choose current. For Select repeat data property, choose Product Name.
- Click Save to create the binding.
- Similarly, bind Secondary label with UnitPrice.
- Choose Save to save the development.
Install the SAP AppGyver preview app from playstore in your smartphone. Go to Lauch tab, and scan the QR code to see the preview of the app in the smartphone. Below is the output of the above development.
