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

In SAP MDK Demo App configuration, click Mobile Connectivity.

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

Click create icon to create a new destination.

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

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

Click Add Annotation URL to add OData Annotations to the Sample service.

Provide the below information and click Next:

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

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.

Ensure that you have already created a new destination mobileservices_cf as per this tutorial. This is required to connect SAP Web IDE to Mobile Services in Cloud Foundry environment.

This step includes creating the Mobile Development Kit project in the Editor.

Launch the SAP Web IDE and select the MDK perspective by clicking on the icon in the left panel.

Right click on Workspace folder and select New | MDK Base Project.

More details on MDK template is available in help documentation.

Enter the Project Name as MDK_Annotations and click Next.

Leave the default values in Application Creation step as it is, click Next.

In Service Creation step, provide and select the below information:

If you do not find mobileservices_cf destination, please ensure that you have followed this tutorial to setup this destination in SAP Cloud Platform cockpit.

If a pop-up appears then enter your cloud platform User Name and password to authenticate.

For Offline OData capability only OData V2 is supported. OData V2 and V4 are supported for Online OData.

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.

Click Check Service to validate the service properties. If all the details are fine, you will see a success message. Click Next.

More details on Sample Back End is available in help documentation.

In Features step, click Finish.

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.

Right-click on the MDK_Annotations MDK Application in the project explorer pane and click New MDK Annotation Component.

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

In Template Customization step, click Next.

Click Finish to create list detail from OData Annotation.

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

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.

Change its Caption to Products.

Now, you will set onPress to NavToProduct_List.action.

In Events tab, click the link icon for the OnPress property to open the object browser.

Double click on 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 Web IDE editor. Now, we deploy this application definition to Mobile Services.

Right click on the MDK_Annotations MDK Application in the project explorer pane and select MDK Deploy and Activate.

Let the default configuration as it is and click Next.

Filter Files will be filtered and ignored in web packing process.

Externals is the list of NPM modules that are part of the MDK Client application and should not be validated in the bundle.

By default, automatically deploy option is selected, In other words, the application is automatically deployed from Mobile Services to your MDK client.

Click the drop down for Destination Name and select the mobileservices_cf destination , you will find list of existing application IDs , select the one you have chosen while creating the project in step 2.

Click Next to finish the deployment from SAP Web IDE.

You should see Application deployed successfully message in console log.

SAP Web IDE has a feature to generate QR code for app on-boarding.

Right click on the MDK_Annotations MDK Application in the project explorer pane and select MDK Deploy and Activate.

Let the default configuration as it is and click Next.

Click on QR code icon to populate QR code for app on-boarding.

Make sure you are choosing the right device platform tab above.

On Android, camera app does not support scanning the QR code. You can use Barcode Scanner app to scan it.

Open the Barcode scanner app and start scanning the QR code showing in SAP Web IDE.

Tap Open browser. It will open SAP Mobile Services Client app.

Tap GET STARTED to connect MDK client to SAP Cloud Platform.

Enter Email address and password to login to SAP Cloud Platform and tap Log On to authenticate.

Tap AGREE on End User License Agreement.

Choose a passcode with at least 8 characters for unlocking the app and tap NEXT.

Confirm the passcode and tap DONE.

Optionally, you can enable fingerprint to get faster access to the app data.

Tap OK.

The MDK client receives deployed metadata definitions as a bundle.

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

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

On iPhone, open your camera app and start scanning the QR code, as shown below.

Tap the toast message to launch SAP Mobile Services Client. It will open SAP Mobile Services Client app.

Tap Start to connect MDK client to SAP Cloud Platform.

Enter Email address and password to login to SAP Cloud Platform and tap Log On to authenticate.

Tap Agree on End User License Agreement.

Choose a passcode with at least 8 characters for unlocking the app and tap Next.

Confirm the passcode and tap Done.

Optionally, you can enable Touch ID to get faster access to the app data, click Enable.

Tap OK.

The MDK client receives deployed metadata definitions as a bundle.

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

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

Congratulations, you have created a fully functional CRUD native mobile application based on OData annotations.