Skip to Content

Consume a REST API in an MDK App

test
0 %

Consume a REST API in an MDK App

November 3, 2020
Created by
June 16, 2020
Create a fully functional native mobile app consuming Petstore REST API.

You will learn

  • How to configure an application in Mobile Services
  • How to define a REST endpoint as a destination in Mobile Services
  • How to create MDK applications in SAP Business Application Studio
  • How to create a MDK Service file pointing to REST endpoint destination
  • How to use RestService SendRequest Action to make directly call to Petstore API

Prerequisites

You may clone an existing project from GitHub repository and start directly with step 6 or 16 in this tutorial but make sure you complete step 2.


Mobile Development Kit allows you to consume REST APIs. You need to first define REST endpoint as a destination in Mobile Services and then easily bind a RestServiceTarget to an MDK control e.g., ObjectTable, ContactCell, ObjectCollection etc. This assumes the REST service returns JSON similar to how OData requests are returned.

A publicly available Petstore API from swagger.io is used as an example in this tutorial.

MDK
Step 1: Understand the Petstore API to retrieve data
  1. Open Swagger Petstore, find all pets with status as available.

    MDK
  2. Click Execute to get the response.

    MDK

    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

With above details, you will next configure an app in Mobile Services, add root of request URL as a destination and then consume it in MDK.

Log on to answer question
Step 2: Configure new MDK app in Mobile Services cockpit
  1. Navigate to SAP Cloud Platform Mobile Services cockpit on Cloud Foundry environment.

  2. On the home screen, select Create new app.

    MDK
  3. Provide the required information and click Next.

    Field Value
    ID com.sap.mdk.restapi
    Name SAP MDK REST API
    MDK

    Other fields are optional. For more information about these fields, see Creating Applications in the SAP Cloud Platform documentation.

  4. Select Mobile Development Kit Application from the dropdown and Click Finish.

    MDK
  5. Click Mobile Connectivity to add Petstore root API as a destination.

    MDK
  6. Click Create icon to add a new destination.

    MDK
  7. Provide the required information and click Next.

    Field Value
    Destination Name swagger.petstore
    URL https://petstore.swagger.io/v2
    MDK
  8. For this tutorial, there is no Custom Headers, Annotations, Authentication required, click Next and Finish the form.

Log on to answer question
Step 3: Create a new MDK project in SAP Business Application Studio
  1. Launch the Dev space in SAP Business Application Studio.

  2. Navigate to File menu → click New Project from Template.

    MDK
  3. Select MDK Project and click Next.

    MDK
  4. In Basic Information step, select or provide the below information and click Next:

    Field Value
    MDK template type Select Empty from the dropdown
    Your project name MDK_Petstore
    Your application name <default name is same as project name, you can provide any name of your choice>
    MDK

    More details on MDK template is available in help documentation.

    If you see Cloud foundry token expired, continue without mobile services connection? message, then set the Cloud Foundry environment again by clicking at bottom left corner of your status bar to initiate a valid session and repeat above steps.

  5. After clicking Next, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Petstore project in the project explorer. As you have already opened the workspace, there is no need to open the generated project in a new workspace. Ignore the pop-up or click the cross icon to hide the window.

    MDK
Log on to answer question
Step 4: Create a new MDK Service file
  1. Right-click the Services folder | MDK: New Service.

    MDK
  2. Select the application com.sap.mdk.restapi from Mobile Services.

    MDK
  3. Provide or select the below information:

    Field Value
    Name <Provide any name of your choice>
    Service Source Type Select Mobile from the dropdown
    Destination Name Select swagger.petstore from the dropdown
    Path Suffix Leave it as it is
    Language URL Param Leave it as it is
    Enable Offline Store uncheck it
    REST Service Check it
    MDK
  4. Click Next and Finish the step.

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

    MDK
Log on to answer question
Step 5: Display Pets list in MDK page

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

  1. In Main.page, drag and drop Object Table control on the page.

    MDK
  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
    MDK

    You can find more details on Target in documentation.

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

    MDK
  3. Under Appearance, provide below information:

    Property Value
    Description leave it empty
    DetailImage 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
    Title Pet ID: {id}
    MDK

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

Log on to answer question
Step 6: Deploy the application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, we deploy this application definition to Mobile Services.

  1. Right-click Application.app and select MDK: Deploy.

    MDK
  2. Select deploy target as Mobile Services.

    MDK

    You should see Deploy succeeded message.

    MDK
Log on to answer question
Step 7: Populate the QR code for app onboarding

SAP Business Application Studio has a feature to generate QR code for app onboarding.

Double-click the Application.app to open it in MDK Application Editor and click Application QR Code icon to populate the QR code.

MDKMDK
Log on to answer question
Step 8: Run the app in MDK client

Make sure you are choosing the right device platform tab above. Once you have scanned and onboarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

Follow these steps to on-board the MDK client.

Once you accept app update, you will see the Pets list on the Main page.

MDK

Follow these steps to on-board the MDK client.

Once you accept app update, you will see the Pets list on the Main page.

MDK

Once you have scanned and onboarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

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.

Log on to answer question
Step 9: Understand the Petstore API to create new record
  1. In Swagger Petstore, add a new pet to the store.

    MDK

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

  2. For testing, use below payload.

    {
      "name": "pet-test",
      "status": "available"
    }
    
  3. Click Execute to get the response.

    MDK

    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.

Log on to answer question
Step 10: Create new page for new pet record

In this step, you will create the Pet_Create.page as a Form Cell Page. This type of page allows for form input style changes. You will add the fields that will be editable by the end-user.

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

    MDK

    You can find more details about Form Cell page.

  2. Enter the Page Name Pet_Create and click Next and the Finish on the Confirmation step.

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

    MDK
  4. Now, you will add the fields (like Category name, Pet name, Tag Name, Status) for creating a new pet record by the end-user.

    In the Layout Editor, expand the Control | Container Item section. Drag and drop a Simple Property onto the Page area.

    You can find more details about available controls in Form Cell page.

    MDK
  5. Drag and drop three additional Simple Property controls onto the page so you have four total controls.

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

    Property Value
    Name FCCreatePet
    Caption Pet Name
    PlaceHolder Enter Value
    MDK
  7. Select the second Simple Property control and provide the below information:

    Property Value
    Name FCCreateStatus
    Caption Status
    PlaceHolder Enter Value
    MDK
Log on to answer question
Step 11: Create an action to POST pet record
  1. Create a RestService SendRequest action:

    Right-click the Actions folder | MDK: New Action | choose MDK RestService Actions in Category | click RestService SendRequest Action | Next.

    MDK
  2. Provide the below information:

    Field Value
    action Name CreatePet
    Service Select petstore.service from the dropdown
    Path /pet
    MDK
  3. Expand RequestProperties and provide the below information.

    Field Value
    Method POST
  4. 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
    MDK

    Repeat above step to create another array item(1).

    Field Value
    Key status
    Value{} Bind it to input control #Control:FCCreatePet/#Value
    MDK
  5. Click Next and Finish the confirmation step.

    You can find more details about SendRequest action.

Log on to answer question
Step 12: Add cancel button on create pet page

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.

    MDK
  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.

    MDK

    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 link 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.

    MDK
Log on to answer question
Step 13: Call the SendRequest Action in MDK page
  1. In Pet_Create.page, drag & drop an action bar item to the right corner of the action bar.

    MDK
  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.

    MDK
  3. Navigate to Events tab and bind CreatePet.action rule to OnPress event.

    MDK
Log on to answer question
Step 14: Create navigation action

Now, create a navigation action that will open the Pet_Create.page when executed.

  1. Right-click the Actions folder | MDK: New Action | choose MDK UI Actions in Category | click Navigation Action | Next.

  2. Provide the below information:

    Property Value
    Action Name NavToPet_Create
    PageToOpen Select Pet_Create.page from the dropdown
    ModalPage Select true from the dropdown
    MDK
  3. Click Next and then Finish on the confirmation step.

Log on to answer question
Step 15: Add create button to pet list page

You will add a button to the Main.page called Add. You will link this button to the navigation action you just created. This event will open the NavToPet_Create.action when the Add button is pressed by the end-user.

  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.

    MDK
  3. In the Properties pane, click the Events tab, click the link icon for the OnPress property to open the object browser.

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

    MDK
Log on to answer question
Step 16: Create Close Page Complete action

Now, you will create a new action ClosePage_Complete.action that will be called after CreatePet.action is successful.

  1. Right-click the Actions folder | MDK: New Action | choose MDK UI Actions in Category | click Close Page Action | Next.

  2. Provide the below information:

    Property Value
    Action Name ClosePage_Complete
    PageToOpen Select Completed from the dropdown
    ModalPage Select false from the dropdown
    MDK
  3. Click Next and then Finish on the confirmation step.

  4. Next, define Success actions for CreatePet.action.

    Open CreatePet.action in the action editor, expand the Common Action Properties and provide the below information:

    | Property | Value |
    |—-|—-|
    | Success Action | Select CloseModalPage_Complete.action from the dropdown |

    MDK

    >When CreatePet.action gets executed successfully then CloseModalPage_Complete.action will be triggered. You may create a message action and set it as failure action if CreatePet.action fails.

Log on to answer question
Step 17: Redeploy the application

Right-click the Application.app file in the project explorer pane, select MDK: Deploy and then select deploy target as Mobile Services.

Log on to answer question
Step 18: Update the MDK app with new metadata
  1. Re-launch the app on your device, authenticate with passcode or Biometric authentication if asked. You will see a Confirmation pop-up, tap OK.

  2. Tap + icon on Main.page to navigate to Create Pet page.

    MDK
  3. Fill out the details to create a new Pet record.

    MDK
  1. Re-launch the app on your device, authenticate with passcode or Biometric authentication if asked. You will see a Confirmation pop-up, tap OK.

  2. Tap + icon on Main.page to navigate to Create Pet page.

    MDK
  3. Fill out the details to create a new Pet record.

    MDK

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

Congratulations! You have successfully completed Level Up with the Mobile Development Kit mission and you are now all set to Brand Your Customized App with Mobile Development Kit SDK mission.

Which statements are true regarding sendMobileServiceRequest(path, params) method?
×

Next Steps

Back to top