In this blog post I’ll share with you how to generate and deploy an OData service to Cloud Foundry and consume this service in an MDK Web application.

As you might have noticed in the blog post by Jitendra Kansal, earlier this week we have announced the release of MDK 5.0 which includes the support for another target environment: web client. For more details on this and the multi-channel capabilities, please check out the excellent blog post at Moving to Multi-Channel with MDK.

For this blog post we will be making use of SAP Business Application Studio and SAP Cloud Platform on Cloud Foundry. With the MDK Web client, we are targeting desktop users. The same app metadata can be used on the MDK Mobile clients for iOS and Android. However, I will skip this part here as this is functionality we’ve already covered in previous blog posts.

Creating the Dev Space

Let’s get started by logging into your trial or productive SAP Cloud Platform account and opening SAP Business Application Studio. For those who are new to this, you can follow the configuration steps in my previous blog post.

As you can see in the screenshot below, I already have an existing Dev Space. I’ll create another one to showcase the creation by clicking the button “Create Dev Space”.

Provide a name for this new Dev Space and select the SAP Cloud Platform Mobile Services extension pack. This collection of predefined extensions includes the Mobile Services App Development Tools extension. Mobile Back-end Tools as well as the MDK Editor are part of this extension.

You could add additional extensions as you like, but at this point, please do NOT add the CDS Graphical Modeler. The latter will conflict with the graphical modeler included in Mobile Back-end Tools. We are planning a release by the end of November that will fix this. After selecting the button “Create Dev Space”, a new Dev Space is created and started. Once the container is running, you can open it by clicking on the name.

Preparing the sample service

For this blog post we will make use of a sample OData service that was created as part of sample code published by Kevin Muessig. You can find a large collection of samples and other useful material to extend your SAP solution at https://github.com/SAP-samples.

In this case, we will be using the GitHub repository at https://github.com/SAP-samples/Fiori-for-iOS-Roadshow-2019.git . If you want learn more about deploying a Java (OData) service and consuming that with the SAP Cloud Platform SDK for iOS, this repository is a great way to get started.

To clone the repository, simply click on the “Clone from Git” link on the Welcome page and provide the above url when prompted.

Select Open Workspace, navigate to the folder Fiori-for-iOS-Roadshow-2019/Backend/TravelExpense and open it.

We will now create a collection of tasks that can be run by VSCode and in this case, SAP Business Application Studio. The tasks allow us to build and deploy the Java service.

Open the Command Palette (keyboard shortcut ‘F1’ or via the menu, select View > Find Command ) and type MBT.

Select the option Create tasks.json and provide the following information:

1. Enter the application name. Type slowly, as this tends to lag. Make sure to define a unique name, to avoid running into issues deploying the application.
2. Select the style of the OData service. In this case we will use the Java EE style.
3. Select database type. For this blog post I’ll use In-Memory, mainly because the free trial account doesn’t offer you much else to choose from. On the paid accounts you will be able to use PostgreSQL or SAP HANA, or SAP ASE (Neo only).
4. Choose the target folder and select Keep default.
5. Select Add MTA support.
6. Next, choose the service metadata file you are planning to use. This will be the com.example.backend.travelexpense.csdl.xml file.
7. 
8. Next, you need to provide the local Java server path (local as in your Dev Space). Select the default tomcat location.

Based on your input, a new file is created: .vscode/tasks.json. You can tailor this file to your needs, depending on your landscape, database, authentication method to be used, etc.

Running the OData service locally in your Dev Space

Let’s see whether we can build our service, run it, and test it within our Dev Space. Open the Command Palette again. Type Task and select Task: Run Task.

Select csdl-to-war-local for local Tomcat deployment within the Dev Space. After generating and building the service, the resulting WAR file is deployed to local tomcat and the service is automatically detected. To keep the service running, please do not close the terminal tab.

You’ll see a notification in the bottom right, indicating “A service is listening to port <port number>”. Click Open in New Tab.

After this, a new browser tab will show the output of the generated service. You can now test your service and modify the url to execute specific queries.

Using the Graphical Modeler

Opening the file com.example.backend.travelexpense.csdl.xml in the Graphical Modeler provides you a quick visual overview of the entities, properties and relations in the data model. It is also very easy to modify the data model in this editor.

Deploying the service to Cloud Foundry

Before we can deploy our application (OData service) to Cloud Foundry, we will need to log into the space we are targeting. In the bottom left on the status bar of SAP Business Application Studio you’ll notice the message “The organisation and space in CF have not been set”. Click on this. Provide your credentials and select the organisation and space your are targeting.

Open the file .vscode/tasks.json in the code editor and find the task with the label “csdl-to-war-cf”. To be able to publish our application to Cloud Foundry, we need to uncomment the argument “-cf:push”.

Now let’s deploy the application to Cloud Foundry. We’ll use the csdl-to-war-cf task for this.

Once deployment is finished, you can access your service by opening the url of the application router in a browser. You can find the url in the console output when you search for “routes:”.

Take note that this service is not protected. Anyone can access the service. If you want create a protected service, you can follow the steps detailed in my previous blog post.

Creating the MDK Application

Now that we have deployed our data service, we will create a simple MDK application to consume it.

First, go ahead and open the workspace at /home/user/projects.

On the Welcome page, click the link Create project from template and select MDK Project.

We will create an application based on the MDK template type CRUD and provide a project name and application name.

Next comes the service configuration. The service configuration will be stored in the service file with the name you specify here. We’ll use the OData Source from a Service Url and provide the Url of the service we’ve deployed earlier. Within the application, a destination with specified name is created that refers to this data source.

After creating the service configuration, the template will automatically collect the OData service’s metadata from our deployed service and identify the available OData collections. You can now select which collections you want to use in your app. At a minimum, you should select the ExpenseSet here. I’ve actually selected all, just to be able to browse all of them in the app.

Once the project is generated in your workspace, you will see a notification in the bottom right. Click the button Open in New Workspace.

You can modify the MDK app to your needs by using the various editors integrated into SAP Business Application Studio. To keep this blog post short (really?), we’ll skip that and go straight for deployment of the app. Right-click on the Application.app file in the project explorer and select MDK: Deploy.

1. We can now select from 2 deployment targets; either as mobile app via SAP Cloud Platform Mobile Services, or as web app by deploying to an HTML repository on SAP Cloud Platform. The third option is to deploy to both in one click. We’ll select Cloud Foundry here, to deploy as web app.
2. 
3. Next, provide the application identification for the app. This consists of a namespace and an application name.
4. Provide a version number for the app.
5. Select the version of the WebClient runtime to be used. This runtime is hosted by SAP and the deployed application will make use of a server near, or in the same data centre as where the web application is going to be deployed.

Once these options are selected, a build and deployment task is started.

The build process will combine the necessary metadata and configuration files into a bundle that is deployed to an HTML repository on SAP Cloud Platform. Once this process is complete, you can click the button to open the app in a new browser tab.

The main page shows the entity collections we’ve selected in the CRUD template wizard.

You can drill down further into ExpenseSet and click on an item to open up the detail page.

Take note that the layout of this application template is still targeting mobile consumption, so in a large browser window this will look a bit odd.

On the detail page we can see in more detail what is stored as initial data in our service. If you are interested to know where this data is coming from, please take a look in the folder srv/src/main/resources/initial-data of the TravelExpense backend sources. You will find json files with initial data for each of the entities. You can change this to your needs.

When clicking the Edit button, a modal will pop up that allows you to change the data. Upon clicking the Save button, these changes will be stored in your data service.

Using UI5 Controls and Native Controls

For this cross platform framework we are making use of a client (you could call it a metadata player). Until now, we have provided an iOS client application that is based on the SAP Cloud Platform SDK for iOS. The controls used in the app are native controls. The same holds for the Android Client application that is based on the SAP Cloud Platform SDK for Android.

The MDK Web Client application makes use of UI5 Web Components. You can learn more about UI5 Web Components in this blog post by Peter Muessig. You will notice the time to load the app is low and navigating through the app is pretty responsive.

Deploy the same app to mobile

I will skip the required steps here, as these are the same as I’ve explained in my previous blog post. After deploying the application to SAP Cloud Platform Mobile Services, you can load the app in the mobile svcs client available in the public app stores.

Below are the screenshots from my iPhone where the same app as above is using native controls.

Conclusion

With MDK 5.0 we have introduced a third target with web client, that allows us to go beyond mobile. The “M” in MDK now stands for Multi-experience. It is now possible to launch these web applications from SAP Fiori Launchpad or SAP Work Zone and consume the same apps on mobile as well.

I hope this blog post is useful to you and has provided more insights into developing applications and extensions with low code tooling.

As always, feedback is welcome.

Cheers,
Ludo Noens