Consume a REST API in an MDK App

1. Open Swagger Petstore, find all pets with status as available.

   

2. Click Execute to get the response.

   

   By looking at results, you now have understood

   • what is the Request URL to retrieve pet information
   • what is header parameter to be passed in GET call
   • what is the response code
   • how the response body looks like

This step includes creating a mobile project in SAP Build Lobby.

1. In the SAP Build Lobby, click Create > Create to start the creation process.

   

2. Click the Application tile and choose Next.

   

3. Select the Mobile category and choose Next.

   

4. Select the Mobile Application to develop your mobile project in SAP Business Application Studio and choose Next.

   

5. Enter the project name mdk_petstore (used for this tutorial) , add a description (optional), and click Review.

   

   SAP Build recommends the dev space it deems most suitable, and it will automatically create a new one for you if you don’t already have one. If you have other dev spaces of the Mobile Application type, you can select between them. If you want to create a different dev space, go to the Dev Space Manager. See Working in the Dev Space Manager.

6. Review the inputs under the Summary tab. If everything looks correct, click Create to proceed with creating your project.

   

7. Your project is being created in the Project table of the lobby. The creation of the project may take a few moments. After the project has been created successfully, click the project to open it.

   

8. The project opens in SAP Business Application Studio.

   

   When you open the SAP Business Application Studio for the first time, a consent window may appear asking for permission to track your usage. Please review and provide your consent accordingly before proceeding.
   

   

The Storyboard provides a graphical view of the application’s runtime resources, external resources, UI of the application, and the connections between them. This allows for a quick understanding of the application’s structure and components.

• Runtime Resources: In the Runtime Resources section, you can see the mobile services application and mobile destination used in the project, with a dotted-line connected to the External Resources.
• External Resources: In the External Resources section, you can see the external services used in the project, with a dotted-line connection to the Runtime Resource or the UI app.
• UI Application: In the UI Applications section, you can see the mobile applications.

1. Click on the + button in the Runtime Resources column to add a mobile services app to your project.

   

   This screen will only show up when your CF login session has expired. Use either Credentials OR SSO Passcode option for authentication. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.

   

2. Click on the + button to add a new mobile services app configuration.

   

3. In the Basic Information step, provide the required information and click Next.

   Field	Value
   Application Name	SAP MDK REST API
   Application ID	myapp.mdk.restapi
   Security Settings	Leave the default value as XSUAA

   

4. In the Destinations step, provide the required information and click Create App.

   Field	Value
   Destination Name	swagger_petstore
   Destination Type	Internet Destination
   URL	https://petstore.swagger.io/v2
   SSO Mechanism	No Authentication

   

5. Mobile Services App may take 2-3 minutes in creating the required configuration. You will notice the app state as Creating.

   

6. Once the app is in Created state, click Add App to Project.

   

   You can access the mobile services admin UI by clicking on the Mobile Services option on the right hand side.

   In the storyboard window, the app will be added under the Runtime Resources column.

   

7. Click the + button in the UI application column header to add mobile UI for your project.

   

8. In the Basic Information step, select No for the Enable Auto-Deployment to Mobile Services After Project Creation property, and click Finish. You will modify the generated project in next step and will deploy it later.

   

9. After clicking Finish, the storyboard is updated displaying the UI component. The MDK project is generated in the project explorer based on your selections.

   

1. Right-click the Services folder | MDK: New Service.

   

2. Provide the below information and click Finish.

   Field	Value
   Name	petstore
   Data Source	Select Mobile Services from the dropdown. You will be asked to select the Mobile services landscape where you have configured the MDK app
   Destination	Select swagger_petstore from the dropdown
   Path Suffix	Leave it as it is
   Language URL Param	Leave it as it is
   REST Service	choose this option

   

   .service and .xml (empty file) have been created under the Services folder.

   

You will add an Object Table control item on Main.page to display the list of Pets.

1. In the Layout Editor, expand the Controls | Data Bound Container group, drag and drop the Object Table control onto the Main.page area.

   

2. Provide the required information for Target section:

   Field	Value
   Target	Select REST Service Target from the dropdown
   Service	Select petstore.service from the dropdown
   Path	Enter /pet/findByStatus?status=available

   

   You can find more details on Target in documentation.

   Method GET is pre-selected for binding the ObjectTable control to a RestServiceTarget.

3. Under Appearance, provide below information:

   Property	Value
   Description	leave it empty
   Footnote	leave it empty
   PreserveIconStackSpacing	Select false from the dropdown
   ProgessIndicator	leave it empty
   Status	{status}
   Subhead	Pet Name: {name}
   Substatus	leave it empty
   Tags	Click the item0 and click the trash icon to delete the default item
   Title	Pet ID: {id}

   

4. In the Avatar Grid section of the Properties pane, remove the default Avatar. First, click on the item0, a trash icon appears. Click on the trash icon to delete the default item.

   

5. In the Avatar Stack section of the Property pane, remove the default Avatar. First, click on the item0, a trash icon appears. Click on the trash icon to delete the default item.

   

   If you see any error in Main.page (code editor), ignore it as MDK editor currently can’t validate such REST Service endpoint properties.

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will Deploy the Project definitions to Mobile Services to use in the Mobile client.

1. Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services .

   

2. Select deploy target as Mobile Services.

   

   If you want to enable source for debugging the deployed bundle, then choose Yes.

   

   You should see Deploy to Mobile Services successfully! message.

   

SAP Business Application Studio includes a feature that displays a QR code for onboarding in the mobile client. To view the onboarding QR code, click the Application QR Code icon in the editor’s header area.

The On-boarding QR code is now displayed.

Leave the Onboarding dialog box open for the next step.

Congratulations, you have learned how to consume a REST API in MDK app to display Pets list.

Next, you will learn how to create a new pet record.

1. In Swagger Petstore, add a new pet to the store.

   

   There is payload example to be passed for adding a new pet.

2. For testing, use below payload.

   JSON

   Copy

   {
     "name": "pet-test",
     "status": "available"
   }
   

3. Click Execute to get the response.

   

   By looking at results, you now have understood

   • what is the Request URL & body to create a new pet record
   • what are header parameters to be passed in POST call
   • what is the response code
   • how the response body looks like

With above details, you will now create a new MDK rule to create a new Pet record.

In this step, you will create a Section page with a Form Cell Section to contain the Form Cell controls. You will add the fields that will be editable by the end-user.

1. Right-click the Pages folder | MDK: New Page | Section | Next.

   

2. In the Base Information step, enter the Page Name as Pet_Create and click Finish.

   

3. In the Properties pane, set the Caption to Create Pet.

   

4. Now, you will add the fields (Pet name and Status) for creating a new pet record by the end-user. In the Layout Editor, expand the Static Container group. Drag and drop Form Cell section onto the Page area.

   

   Form Cell section is used to contain Form Cell controls in a section page.

5. You will now add Form Cell controls in the Form Cell Section. Expand the Form Cell Controls group, drag and drop a Simple Property onto the Page area.

   

6. Drag and drop one more Simple Property control onto the page so you have two total controls.

   

7. Select the first Simple Property control and provide the below information:

   Property	Value
   Name	FCCreatePet
   Caption	Pet Name
   PlaceHolder	Enter Value

   

8. Select the second Simple Property control and provide the below information:

   Property	Value
   Name	FCCreateStatus
   Caption	Status
   PlaceHolder	Enter Value

   

After filling-up the details for creating a new pet record, you will send these data to the backend.

1. In Pet_Create.page, drag & drop an action bar item to the right corner of the action bar.

   

2. In the Properties pane, click the link icon to open the object browser for the System Item property. Double click the Save type and click OK.

   

3. Navigate to Events tab, click three dots icon and click create a new rule/action.

   

4. Keep the default selection for Object Type (as Action) and Folder path.

   

5. Choose REST Service in Category | select REST Service Send Request Action | Next.

   

6. In the Base Information, provide the below information:

   Field	Value
   Name	CreatePet
   Service	choose petstore.service from the dropdown
   Path	/pet

   

7. For RequestProperties object, choose POST method from the dropdown. Under Body, switch to object type by clicking the icon, once it’s color has changed, click on Body[0] to add array items, this should now display a create icon in front of Body[0]. Click Create icon to create an array item(0).

   Provide the below information:

   Field	Value
   Key	name
   Value	Bind it to input control #Control:FCCreatePet/#Value

   

8. Click create icon to add another array item(1).

   Field	Value
   Key	status
   Value	Bind it to input control #Control:FCCreateStatus/#Value

   

9. Set FetchCSRF to false as you don’t need to obtain a CSRF token for the petstore service, and click Finish.

   You can find more details about SendRequest action in help documentation.

10. When the CreatePet.action is successful, you may want to close the page. Expand the Common Action Properties and bind the Success Action to the CloseModalPage_Complete.action.

    

Now, you will add a button on the Pet_Create.page and set it’s onPress to ClosePage.action.

1. Drag and drop an Action Bar Item to the left corner of the action bar.

   

2. In the Properties pane, click the link icon to open the object browser for the System Item property. Double click the Cancel type and click OK.

   

   System Item are predefined system-supplied icon or text. Overwrites Text and Icon if specified.

3. Now, you will set the onPress event to ClosePage.action.

   In Events tab, click the dotted icon for the OnPress property to open the Object Browser.

   Double click the ClosePage.action and click OK to set it as the OnPress Action.

   

You will add a button to the Main.page called Add. When you click on this button, you want to navigate to the create pet page.

1. In Main.page, drag and drop an Action Bar Item to the upper right of the action bar.

2. Click the link icon to open the object browser for the SystemItem property.

   Double click the Add type and click OK.

   

3. Navigate to the Events tab, click the dotted icon for the OnPress property to open the Object Browser.

   

4. Keep the default selection for Object Type (as Action) and Folder path.

   

5. Choose UI in Category | click Navigation | Next.

6. In the Base Information, provide the below information and click Finish.

   Property	Value
   Name	NavToPet_Create
   PageToOpen	Select Pet_Create.page from the dropdown
   ModalPage	Select true from the dropdown

   

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services

You have created a new record consuming REST API. Similarly, you can also modify and delete an existing record.