Developing SMP 3 Mobile App using Appbuilder, Kapsel and SMP 3 Trial - Part 2

[midhun_vp]

Part 1

Part 2

Part 3

Update: SAP's recommended tool to develop SAPUI5 app is using SAP Web IDE. So I would suggest you to start with Web IDE instead of Appbuilder. More info: SAP Web IDE - Enablement

Create a new project in Appbuilder

A simple UI5 app can be developed using Appbuilder with few clicks. I am using SuperList in this example.

1. Open Appbuilder and click on "New" button and provide the details as given below and click on "Confirm".

2. Click on Help> SMP Settings and provide the following settings. You can find your IP using Google. The credentials provided is backend credentials. Click on "Confirm" to create a new profile.

3. Perform the on-boarding of the Appbuilder by clicking on the pencil icon in SMP Services panel in left side. Choose the SMP profile we defined and click on "Retrieve" button. Click on "Confirm" button after getting the success message as given below.

Creating a SuperList to populate data

1. Select "Designer"> New SuperList. In the new dailog window leave all fields as by default and click on "Confirm".

2. Click on dataStructure button on right side to select data source.

3. Click on "..." button and select "BusinessPartnerCollection" and click on "Confirm".

4. Enter "BusinessPartnerID" inside Navigation Parameters textbox and click on "Confirm".

5. Locate "Label" in Toolbox> Drag and drop 2 labels to phone screen. Select first label and change it's properties> click on button on right side> delete content inside "Express Definition" textbox> double click on "BusinessPartnerID"> Confirm. For the second label select Company.

6. Save the project and click on "Return" button.

7. From toolbox drag and drop Superlist to phone screen.

8. Expand the style property of SuperList and provide given below details:

9. Click on metadataFile button on the right side> Select Superlist file created and click on "Confirm". You will get a list on the phone screen now. Click on "Run" button to see the app running in a simulator. We have called Odata service to get the data from backend.