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 KansalJanuary 30, 2023
Created by
jitendrakansal
October 4, 2022
Contributors
maximilianone
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 the Get Started page.

      MDK

      If you do not see the Get Started page, you can access it by typing >get started in the center search bar.

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

      This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. 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.

      MDK

    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. Provide the below information and click Finish.

      Field Value
      Name<Provide any name of your choice>
      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 as per step 2 and then select the application com.sap.mdk.restapi
      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
      MDK

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

    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
      Tags Click the item0 and click the trash icon to delete the default item
      Title Pet ID: {id}
      MDK
    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.

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

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

      MDK

      You can find more details about Form Cell page.

    2. Enter the Page Name as Pet_Create and click Finish.

      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

    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.

      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, click three dots icon and click create a new rule/action.

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

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

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

      Field Value
      NameCreatePet
      Service choose petstore.service from the dropdown
      Path /pet
      MDK
    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
      Keyname
      Value{}Bind it to input control #Control:FCCreatePet/#Value
      MDK
    8. Click create icon to add another array item(1) and click Finish.

      Field Value
      Keystatus
      Value{}Bind it to input control #Control:FCCreateStatus/#Value
      MDK

      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

    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.

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

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

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

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

      Property Value
      NameNavToPet_Create
      PageToOpen Select Pet_Create.page from the dropdown
      ModalPageSelect true from the dropdown
      MDK
  • Step 14

    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 UI in Category | click Close Page | Next.

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

      Property Value
      NameClosePage_Complete
      DismissModal Select Completed from the dropdown
      CancelPendingActionsSelect false from the dropdown
      MDK
    3. 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 15

    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 16

    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