Skip to Content

Use OData Annotations to Add CRUD Functionality to an MDK App

test
0 %
Use OData Annotations to Add CRUD Functionality to an MDK App
Details

Use OData Annotations to Add CRUD Functionality to an MDK App

May 10, 2021
Created by
September 27, 2019
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
QR code

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: Understand the SAP Fiori Elements

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

Log on to answer question
Step 2: Add annotation information in the backend destination

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 and click Next:

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

    Here you can see that OData Annotation information is updated in the SampleServiceV2 destination.

    MDK
Log on to answer question
Step 3: Create a new MDK project in SAP Business Application Studio

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

    MDK

    If you do not see Welcome page, you can access it via Help menu.

  3. Select MDK Project and click Start.

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

    Field Value
    MDK template type Select Base from the dropdown
    Your project name MDK_Annotations
    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 up the Cloud Foundry environment again by navigating to View menu > Find Command> CF: Login to Cloud foundry to initiate a valid session and click Start Over.

  5. In Service Name step, provide or select the below information and click Next:

    Field Value
    Service File Name <Provide any name of your choice>
    OData 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
    Language URL Leave it with the default value
    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 Next, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Annotations project in the project explorer.

Log on to answer question
Step 4: Add MDK Annotation component to MDK project
  1. Right-click Application.app and select MDK:New MDK Annotation Component.

    MDK
  2. MDK editor fetches annotation details, select Product Annotation and click Next.

    MDK
  3. In Template Customization step, click Next.

    MDK
  4. Click Finish to create list detail from OData Annotation.

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

    MDK
  5. Next, you will add a Toolbar item on Main.page to navigate to Product_List.page.

    In Main.page, drag and drop Toolbar Item control on the page.

    MDK
  6. Change its Caption to Products.

    MDK
  7. Now, you will set the onPress event to NavToProduct_List.action.

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

    Double-click the NavToProduct_List.action and click OK to set it as the OnPress action.

    MDK

    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.

    For the List page, MDK supports the List Report. To create a Detail page, MDK requires UI.LineItem and UI.HeaderInfo in the annotation file.

    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: Deploy the application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy this application definition to Mobile Services and Cloud Foundry to consume it as Mobile 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
Log on to answer question
Step 6: Run the app

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.

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

  1. Click the Application.app to open it in MDK Application Editor and click Application QR Code icon to display the QR code.

    MDKMDK
  2. Follow these steps to on-board the MDK client.

    Once you accept app update, you will see the Main page with LOGOUT and PRODUCTS options at bottom of the page. Tap PRODUCTS, you will navigate to Product List page.

    MDK
  3. In following pages, you can create a new record, modify an existing record and even delete the record.

    MDKMDK

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.

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

  1. Click the Application.app to open it in MDK Application Editor and click Application QR Code icon to display the QR code.

    MDKMDK
  2. Follow these steps to on-board the MDK client.

    Once you accept app update, you will see the Main page with Logout and Products options at bottom of the page. Tap Products, you will navigate to Product List page.

    MDK
  3. In following pages, you can create a new record, modify an existing record and even delete the record.

    MDKMDK
  1. Click the highlighted button to open the MDK Web application in a browser. Enter your SAP BTP credentials if asked.

    MDK

    You can also open the MDK web application by accessing its URL from .project.json file.
    MDK

  2. You will see the Main page with Logout and Products options at bottom of the page. Tap Products, you will navigate to Product List page.

    MDK
  3. In following pages, you can create a new record, modify an existing record and even delete the record.

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

Congratulations, you have successfully created a fully functional CRUD multi-channel application based on OData annotations and you can continue with the remaining tutorials in this mission.


Next Steps

Back to top