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 Client, 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 Client is an important delivery of the SAP Cloud Platform Extension Suite and offers new Low-Code features which helps business developers to contribute in building extensions.
MDK Web Client:
- is Intended for desktop consumption (major browsers supported)
- is an HTML based application running in a browser using UI5 Web Components that consumes SAP Cloud Platform 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).
- For design time,
- we have enhanced the MDK editor capability (in SAP Business Application Studio/ SAP Web IDE) 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 Cloud Platform 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 Client runtime is centrally managed by SAP.
- 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
How does MDK Web Client 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 Cloud Platform 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 Cloud Platform 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 Cloud Platform. 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
- Online only
- Supports most MDK 4.1 controls, newer controls will be added in future releases
- No extension controls support
- No push support
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 cloud platform destination pointing to same data source as your Mobile app is pointing to. You can maintain the same destination name on both Cloud Foundry 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: 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.
You can learn more in documentation :
- Create Web Client application in SAP Business Application Studio (Cloud Foundry)
- Create Web Client application in SAP Web IDE Full-Stack
- Web Client Limitations
- UI5 Web Components
I am looking forward to your feedback and comments.