Skip to Content

Consume a REST API in an MDK App

Create a fully functional multi-channel application 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 define a REST endpoint as a destination in Cloud Foundry
  • 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
jitendrakansalJitendra KansalAugust 5, 2022
Created by
jitendrakansal
June 16, 2020
Contributors
jitendrakansal

Prerequisites

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

Mobile Development Kit allows you to consume REST APIs. You need to first define REST endpoint as a destination 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
    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.

  • Step 2
    1. Navigate to SAP Mobile Services cockpit on Cloud Foundry environment.

    2. On the home screen, select Create new app or navigate to Mobile Applications Native/MDK New.

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

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

      If you are configuring this app in a trial account, make sure to select License Type as lite.

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

    4. In the XSUAA Settings step, continue with the default settings and click Next to navigate to further steps.

      MDK
    5. In the Assign Features step, choose Mobile Development Kit Application from the dropdown and Click Finish.

      MDK
    6. Click Mobile Connectivity to add petstore root API as a destination.

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

      MDK
    8. Provide the required information and click Next.

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

  • Step 3
    1. Download the zip file from here and unzip it on your machine.

      MDK
    2. Navigate to Connectivity Destinations to create a BTP destination, click Import Destination to import the extracted file and click Save.

      MDK
  • Step 4
    1. Launch the Dev space in SAP Business Application Studio.

    2. Click Start from template on Welcome page.

      MDK

      If you do not see the Welcome page, you can access it via Help menu or via View menu > Find Command > Welcome.

    3. Select MDK Project and click Start.

      MDK

      If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.

    4. In Basic Information step, provide the below information and click Finish:

      Field Value
      MDK Template TypeSelect Empty from the dropdown
      Your Project Name Provide a name of your choice. MDK_Petstore is used for this tutorial
      Your Application Name <default name is same as project name, you can provide any name of your choice>
      Target MDK Client Version Leave the default selection as MDK 6.0+ (For use with MDK 6.0 or later clients)
      Choose a target folder By default, the target folder uses project root path. However, you can choose a different folder path
      MDK

      More details on MDK template is available in help documentation.

    5. After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Petstore project in the project explorer.

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

      MDK
    2. Select the Mobile Services landscape where you have configured the MDK app (step 2).

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

      MDK
    4. Provide or select the below information:

      Field Value
      Name<Provide any name of your choice>
      Data Source Select Mobile Services from the dropdown
      Destination Select swagger_petstore from the dropdown
      Path Suffix Leave it as it is
      Language URL Param Leave it as it is
      REST Service Check it
      MDK
    5. Click Next and Finish the step.

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

      MDK
  • Step 6

    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
      Descriptionleave it empty
      DetailImage leave it empty
      Footnoteleave it empty
      PreserveIconStackSpacing Select false from the dropdown
      ProgessIndicatorleave 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.

  • Step 7

    So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy the application definitions to Mobile Services and Cloud Foundry to use it in the Mobile client and Web application respectively.

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

      MDK
    2. Select deploy target as Mobile & Cloud.

      MDK editor will deploy the metadata to Mobile Services (for Mobile application) followed by to Cloud Foundry (for Web application).

      MDK

      You should see successful messages for both deployments.

      MDK
  • Step 8

    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.

  • Step 9
    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.

      JSON
      Copy
      {
        "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.

  • Step 10

    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 (Pet name and Status) for creating a new pet record by the end-user.

      In the Layout Editor, expand the Controls group, 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 one more Simple Property control onto the page so you have two total controls.

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

      Property Value
      NameFCCreatePet
      Caption Pet Name
      PlaceHolderEnter Value
      MDK
    7. Select the second Simple Property control and provide the below information:

      Property Value
      NameFCCreateStatus
      Caption Status
      PlaceHolderEnter Value
      MDK
  • Step 11
    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 NameCreatePet
      Service Select petstore.service from the dropdown
      Path /pet
      MDK
    3. Expand RequestProperties and provide the below information.

      Field Value
      MethodPOST
    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
      Keyname
      Value{}Bind it to input control #Control:FCCreatePet/#Value
      MDK

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

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

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

  • Step 12

    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 3 dots 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
  • Step 13
    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
  • Step 14

    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 NameNavToPet_Create
      PageToOpen Select Pet_Create.page from the dropdown
      ModalPageSelect true from the dropdown
      MDK
    3. Click Next and then Finish on the confirmation step.

  • Step 15

    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 3 dots 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
  • Step 16

    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 NameClosePage_Complete
      DismissModal Select Completed from the dropdown
      CancelPendingActionsSelect 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 Click link icon and bind it to CloseModalPage_Complete.action
      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.

    What is the _Type value for CreatePet.action?(Hint: Open CreatePet.action in code editor)

  • Step 17

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

    Alternatively, you can select MDK: Redeploy in the command palette (View menu>Find Command OR press Command+Shift+p on Mac OR press Ctrl+Shift+P on Windows machine), it will perform the last deployment.

    MDK
  • Step 18

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

    What options are there in the RequestProperties object part of RestService SendRequest action?

Back to top