Use OData Annotations to Add CRUD Functionality to an MDK App

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

Sample backend in SAP Cloud Platform 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.

As admin changes to the default sample service destinations (com.sap.edm.sampleservice.v2 and com.sap.edm.sampleservice.v4) are not allowed, you need to copy the destination URL from the sample service destination com.sap.edm.sampleservice.v2 and create a new destination with the new name e.g., com.sap.mdk.annotation and add the required annotations.

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

   

2. Copy the destination URL from the sample service destination com.sap.edm.sampleservice.v2.

   

3. Click create icon to create a new destination.

   

4. Enter a new destination name com.sap.mdk.annotation and paste the URL. Click Next.

   

5. For this tutorial, there is no Custom Headers required, click Next.

   

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

   

7. In Create Destination screen, select SSO Mechanism as Forward Authentication and click Next.

   

8. In the following screen, let the default settings as it is. Click Finish.

   

   You should see a Toast Message Destination Created at bottom of the page.

   Here you can see that OData Annotation information is available in the new destination.

   

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

1. Launch the Dev space in SAP Business Application Studio.

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

   

3. Select MDK Project and click Next.

   

4. In Basic Information 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>

   

   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. In Service Configuration 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
   Application Id	Select com.sap.mdk.demo from the dropdown
   Destination	Select com.sap.mdk.annotation 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

   

   Regardless of whether you are creating an online or offline application, this step is needed 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 setup in Mobile Services and SAP Cloud 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. 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.

   

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

   

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

   

3. In Template Customization step, click Next.

   

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.

   

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.

   

6. Change its Caption to Products.

   

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

   In Events tab, click the link 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.

   

   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.

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.

   

2. Select deploy target as Mobile Services.

   

   You should see Deploy succeeded message.

   

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.

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.

Congratulations! You have successfully created a fully functional CRUD native mobile application based on OData annotations and you are now all set to Enable Push Notifications in the MDK Public Store Client.