Skip to Content
Product Information
Author's profile photo Jitendra Kansal

Moving to Multi-Channel with Mobile Development Kit

Updated 28 November 2021: Latest changes

In today’s digital world, user experience is a multi-experience journey spanning across multi-channels, multi-touchpoints and multi-modal interactions. Our customers have been asking for a solution to maintain a single code base that provides both a mobile experience for their field colleagues, as they are most of time in fields with limited or no connectivity and a web experience for their back office colleagues as they work most of the time on desktops. I am happy to announce the MDK Web Runtime, which expands MDK capabilities to desktop complementing existing MDK Mobile Clients (Android & iOS). You can now build and maintain a single app that runs natively on Mobile (Android & iOS) and web app (online) in browser. MDK Web Runtime is an important delivery of the SAP Extension Suite and offers new Low-Code features which helps business developers to contribute in building extensions.

MDK Web Runtime:

  • is Intended for desktop consumption (major browsers supported)
  • is an HTML based application running in a browser using UI5 Web Components that consumes SAP Business Technology Platform (BTP) destinations to access the backend sources
  • supports Online OData connections (v2 & v4)
  • uses same metadata as the Mobile (Android & iOS)
  • can now use Platform function $(PLT,<ios>,<android>,<web>)
  • is available in trial (CF) and as well as productive accounts (CF & Neo).

Architecture:

  • For design time,
    • we have enhanced the MDK editor capability in SAP Business Application Studio to create the metadata project connecting to data sources from Mobile Services (for mobile apps) or Cloud Platform destinations (for web apps).
    • To deploy the metadata on Mobile & Web, you need to select target runtime as Mobile Services & Cloud Foundry respectively. (You also have capability to deploy it to both targets in a single click). For web, MDK metadata project will be deployed as HTML app into SAP BTP HTML5 Repository .
  • At run time,
    • for Mobile: it is same as we have it today. To access the app, end user will use the MDK Mobile client.
    • for Web: end user will login to the deployed web application and after successful login, will see first page of the application. The MDK Web app connects to backend sources via Cloud platform destinations. MDK Web runtime is centrally managed by SAP.

Use Cases:

  • Multi-channel: maintain a single app that runs natively on Mobile (Android & iOS) and web app (online) in browser
  • Launch the application from SAP Fiori Launchpad or SAP Work Zone

Launch%20a%20MDK%20web%20application%20from%20SAP%20Fiori%20Launchpad

Launch a MDK web application from SAP Fiori Launchpad

Launch%20a%20MDK%20web%20application%20from%20SAP%20Work%20Zone

Launch a MDK web application from SAP Work Zone

How does MDK Web application work?

As mentioned in the architecture section, MDK web app connects to backend sources via Cloud platform destination. You need to:

  • Create a destination in SAP BTP cockpit > subaccount > Connectivity > Destinations
  • In Editor: while creating a new project you need to select OData Source > Cloud Foundry to select the destination created in SAP BTP cockpit

  • The generated project will have an additional folder Web which contains
    • App_Resources folder: You can put in web specific app resource files, which will be consumed by your web application using the res:// protocol in the metadata definition, e.g. images, documents and more.
    • config.json: file where you can configure web specific settings for your web application e.g., default application language code, Application display name etc.

  • To deploy the project, right-click Application.app > MDK: Deploy and choose the Cloud Foundry target.

MDK metadata will get deployed into the HTML application repository on SAP BTP.  Once app is deployed, developer is informed to open the app in a new tab. You can also find the published web app URL in .project.json file.

Note: Similar functionality is available in SAP Web IDE

Current Limitations:

How will I reuse my existing Mobile project and run it in both Mobile & Web?

  • Keeping the above limitations in mind, you can run your existing metadata project in both Mobile & Web.
    • You need to first create a BTP destination pointing to same data source as your Mobile app is pointing to. You can maintain the same destination name on both BTP and Mobile Services.
    • If current app is
      • only for online use case : you can directly deploy it to both the targets Mobile (to run it as mobile app) & Cloud (to run it as a web app).
      • for offline use case: this is applicable only if you have the OData initialization action of type OfflineOData.Initialize in your current metadata project.
        you need to create a new OData Initialize action, add defining queries (similar to what you already have it in ODataOffline Initialize action). Then update OnLaunch, onDidUpdate events in app file binding to new action and you can then deploy to both the targets.

OfflineEnabled set to true in service file and DefiningRequests in ODataService.Initialize action will be ignored in case of Web as web is always online only.

Further Information:

You can learn more in documentation :

I am looking forward to your feedback and comments.

Jitendra

Assigned Tags

      25 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo aurelien albert
      aurelien albert

      Nice, i'm looking forward to try out this! Is the offline support in the roadmap?

       

      Thanks

      Aurélien

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      aurelien albert

      It's under consideration in future.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Nice. Looks like this will slowly phase out the Hybrid Apps approach we are used to earlier.

      Author's profile photo Rajesh Ragupathy
      Rajesh Ragupathy

      Hi Jitendra,

      MDK Web Client, can this be used to replace the custom Fiori Client build capability in Neo?

      For customers invested om Custom Fiori Client in Neo when they migrate to CF there is a gap, can MDK Web Client cover this gap to possibly build a Web Client for Fiori Launchpad?

      Rajesh

      SAP Australia

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author
      MDK Web Client is not a mobile app, it's a browser based app to run MDK content.
      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      The blog post mentions:

      Use Cases:

      • Launch the application from SAP Fiori Launchpad

      Does it mean, the generated web app can be opened within the FLP just like a UI5 app? Or will it open in a new tab / separate window? What are the current known limitations regarding integration with the FLP? Does it, for example, support SAP Enable Now?

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Boghyon Hoffmann

      Does it mean, the generated web app can be opened within the FLP just like a UI5 app?>> Yes, for this, you need to go to FLP cockpit to create a new tile and provide your MDK web application URL.

      Or will it open in a new tab / separate window?>>Depends how you have configured it, supports both way. I have added a gif above on how to open MDK Web application from FLP.

      If you have any further queries, please post a new thread.

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Thank you for the update. Is it also possible to review my changes in an MDK project ...

      • by launching the web app in an FLP sandbox and
      • without having to deploy the change every time?

      I haven't found any other solutions so far. I could see my changes only after deploying the app to the target environments. Or is it possible to only build the app (without deploying) and running it in an FLP sandbox to see the changes?

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Boghyon Hoffmann

      We recently introduced local deployment where you can deploy your MDK app to your dev space and test it locally without deploying to the BTP.

      https://blogs.sap.com/2021/04/27/whats-new-in-mobile-development-kit-client-5.2/#LocalDevSpace

      However, to launch the MDK app from the FLP, you first need to deploy it to BTP.

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Since v6.0, MDK web apps can be previewed without having to deploy every time: https://blogs.sap.com/2021/09/04/whats-new-in-mobile-development-kit-client-6.0/#Preview

      Author's profile photo Robert Hunger
      Robert Hunger

      Hi Jitendra,

      thanks for this nice feature. I getting problems with mobil destinations  on Neo.

      Failed to initialize application data service - Error: 404 (); GET
      /*/sap/opu/odata/sap/...SRV/

       

      and have to change the user but logout function is not working

      thx. and greeting

      robert

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Robert Hunger

      To understand your issue,  are you getting that error in MDK web client app? Could you post a new question with some additional details:

      • your cloud platform destination details
      • destination info .project.json file
      Author's profile photo Mamatha Majji
      Mamatha Majji

      Hello Jitendra,

      This blog is very Informative and helpful for those who starts working on the Mobile Services Application.

      I am not getting the web Folder after creating the project in BAS while selecting the OData Source>Cloud Foundry.

      Can you please let me know how to get it.

       

      Thanks

      Mamatha

       

       

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Mamatha Majji

      Currently, the Web folder is generated once you deploy project to Cloud.

      We'll improve our template to generate this folder on project creation, this is planned in our future release.

      Regards,

      Jitendra

      Author's profile photo Puneet Mahali
      Puneet Mahali

      Hi Jitendra,

      I am working on Unity as a library approach. Does MDK works with Unity as well or have some limitations / drawbacks.

      Kind Regards,
      Puneet

      Author's profile photo Jitendra Kumar Kansal
      Jitendra Kumar Kansal

      Could you post a new question with some additional details on the requirements to understand what exactly you are doing?

      Author's profile photo Nadya Brown
      Nadya Brown

      Dear Jitendra, I'm glad to come across this blog, because I did not know the way to thank you for your absolutely brilliant tutorial series "Create Your First MDK Application" (https://developers.sap.com/tutorials/cp-mobile-dev-kit-list-page.html). I'm totally hooked on it now and want to learn more about SAP Mobile Services! Is there any chance/what is the best way to ask you a question on one of the steps in this tutorial? Regards Nadya

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author
      Thanks for your kinds 🙂
      If you have any question related to MDK tutorials, you can click "Provide Feedback" option and open an issue on GitHub.

      For any other MDK related topic, you can ask questions here in SAP community (Ask a question)
      Author's profile photo Nadya Brown
      Nadya Brown

      Many thanks! I will try and open a question in SAP Community:) Wish you a nice week-end! Regards Nadya

      Author's profile photo Nadya Brown
      Nadya Brown

      Dear Jitendra, I just wanted to let you know that I've managed to compete the tutorial. No questions at the moment:) The problem was that my app did not sync with my iOS, did not get updates etc. I found an error in my JS validation rule code, corrected it and now everything works perfectly. I love it and thank you again!

      Author's profile photo Scott Schuetz
      Scott Schuetz

      Interested to know if anyone has deployed SAP Asset Manager (SAM) as an MDK Web application?  Is that possible with the offline sync process?

      Author's profile photo Thomas Schilling
      Thomas Schilling

      Hello Jitendra,

      it is possible to use an OData Service "ABC" for offline capabilities (ABC#1.service) and the same OData Service for only online capabilities (ABC#2.service) in the same application? I had configure the scenario, but only the offline store is created based on the defining requests (ABC#1.service). But there are no online requests when opening for example a page with a list binded to an entity of the OData Service (ABC#2.service).

       

      Thank you.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Thomas Schilling

      Technically yes.

      You need to first create an OData Initialize action (enable offline store - false) for ABC#2.service and have to call this action in the app.

      One option is - you can call this 2nd OData Init action on onSuccess event of the Initialize action (for ABC#1.service).

      Please note that you need to handle the local changes done with ABC#1.service when you expect changes to be reflected in the pages bound to an entity of the OData service (ABC#2.service)

      Author's profile photo Thomas Schilling
      Thomas Schilling

      Hello Jitendra,

      thank your for your hint. Now it works!

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Hi Jitendra,

      The intro uses the following terms:

      […] journey spanning across multi-channels, multi-touchpoints and multi-modal interactions.

      Could you elaborate a bit on how those “multi-*” terms are defined in the context of MDK? Or where can I find the definition of them? Only "multi-channel" is briefly touched briefly in the blog post:

      Multi-channel: maintain a single app that runs natively on Mobile (Android & iOS) and web app (online) in browser

      Does "channel" here refer to the same "channel" that Gartner describes? How does "multi-channel" differ from "cross-platform"?