Skip to Content

Use OData Annotations to Add CRUD Functionality to an MDK App

Generate a fully functional CRUD multi-channel application based on OData annotations.
You will learn
  • How MDK editor parses OData Annotations for a given OData service
  • How to create a fully functional multi-channel application
jitendrakansalJitendra KansalJanuary 29, 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 5 in this tutorial but make sure you complete step 2.

Mobile Development Kit brings OData annotations capabilities to your multi-channel applications. MDK editor supports generating List-Detail pages based on annotations. List-Detail pages are similar to a Master-Detail page, but it is two pages instead of one. The MDK editor parses existing annotations to give you a huge leap forward in your multi-channel applications.

MDK
  • Step 1

    If you are a Fiori app designer, you may already be familiar with OData annotations and smart templates.

    SAP Fiori elements provide designs for UI patterns and predefined templates for common application use cases. App developers can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations. With little or no coding, you can create SAP Fiori applications. UI5 has a Web solution, named smart templates, that builds a starter application by parsing the annotations in your OData service.

    You can also check out more information on the Fiori elements List Report and Smart templates

  • Step 2

    Sample backend in SAP Mobile Services provides annotation functionality for Products. If you add annotation path in given backend endpoint, the same annotation information can be leveraged by MDK editor to generate related CRUD pages.

    Make sure you have already configured an app in Mobile Services cockpit and have added Sample service as per step 3 in this tutorial.

    1. In SAP MDK Demo App configuration, click Mobile Connectivity.

      MDK
    2. Click Edit icon to add annotation path to the SampleServiceV2 destination.

      MDK
    3. In following steps, let the existing settings as it is.

      In Annotations step, click Add Annotation URL to add OData Annotations to the Sample service.

      Provide the below information, click on the empty area to trigger the Next button clickable and then click Next:

      Field Value
      Annotation NameProduct
      Path/File /annotations/Products
      MDK
    4. In the following screen, let the default settings as it is. Click Finish.

      Navigate to the SampleServiceV2 destination info, you can see that OData Annotation information is updated in the SampleServiceV2 destination.

      MDK
  • Step 3

    This step includes creating the mobile development kit project in the editor.

    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, select or provide the below information and click Next:

      Field Value
      MDK Template TypeSelect Base from the dropdown
      Your Project Name Provide a name of your choice. MDK_Annotations 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. In Service configuration step, provide or select the below information and click Finish:

      Field Value
      Data Source Select Mobile Services from the dropdown
      Mobile Services Landscape Select standard from the dropdown
      Application Id Select com.sap.mdk.demo from the dropdown
      Destination Select SampleServiceV2 from the dropdown
      Enter a path to the OData service Leave it as it is
      Enable Offline Choose No
      MDK

      Regardless of whether you are creating an online or offline application, this step is needed for the app to connect to an OData service. When building an Mobile Development Kit application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services and SAP Business Technology Platform.

      Since you will create an online based app, hence Enable Offline Store option is unchecked.

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

  • Step 4
    1. Right-click Application.app and select MDK:New Annotation Component.

      MDK
    2. In the Annotation Selection step, MDK editor fetches annotation details. Select Product Annotation and click Next.

      MDK
    3. In Template Customization step, select CRUD Template and click Finish.

      MDK

      In MDK project, you will see new pages, actions, rules have been generated for Products.

      MDK

      You will also notice a button control has been generated on the Main.page to navigate to Product_List.page.

      Pages, actions and rules created are a starting point. You can edit those pages and make it your own. At this point the MDK editor is no longer reading the annotations from OData.

      If the OData designer updates the backend services data schema (annotations), the MDK pages will stay as originally created. It will not automatically update the pages or overwrite your changes. You are disconnected from the annotations at this point.

    Which page is not part of generated pages in Product folder?

  • Step 5

    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 6

    What Entity Type is listed while adding new MDK Annotation Component?

Back to top