How to Build Mendix Apps on SAP Cloud Platform in Just 5 Minutes


on September 29, 2017

The SAP Cloud Platform now uses the Mendix App Platform to offer rapid application development, the quickest way to build enterprise-scale applications. Through this new partnership, enterprises can build custom applications on their SAP systems much faster than traditional development approaches allow, without a single line of code. It’s now possible for SAP customers to connect to SAP systems and deploy into production in minutes. Let me take you on a tour of the platform to show you how you can build an app on SAP Cloud Platform in just 5 minutes.

Getting Started

All you need to get started is an SAP Cloud Platform account and a Mendix account. Once you have that, go to home.mendix.com. This is the Mendix Platform Portal, the place where you create and manage your apps. Simply click Create App to get started.

Starting with the SAP Purchase Order Approval App

The SAP tab provides several starting points that make getting started easier. Select your preferred starting point and click “Use this app”. For this example, I’m using the “SAP Purchase Order Approval App.”

When we create the app, we’ll need to sign in to SAP Cloud Platform. When we’re signed in, we’ll need to select the region, domain, organization and space we want to use. Click “Create” to create the app and prepare it for development. We can see that the environment has been created and is now ready for development. Just click “Edit App to open the Desktop Modeler and start building our app!

Running the Purchase Orders App

For this application, we’ll add a simple approval step that is invoked from the Mendix app and will trigger a request to the SAP Gateway Demo System (ES4). The first thing we’ll do is run the app and view it so we can see what it looks like. First, select “Run Locally, and when the app is done loading, click “View”. Running the app locally means we’re running it just on our machine, so we can see what our changes look like before running it in the cloud, where all our users can see our updates.

When we view the app in the browser, we first need to log in with our ES4 credentials. Once logged in, we can see that it already contains a lot of purchase orders.

Adding a Purchase Order Approval Button

Let’s go back to the Modeler and add the purchase order approval functionality. We’ll do so by adding a button. First, open the Homepage, the landing page of the app shown in the screenshot above. Let’s scroll down to the bottom of the page. There’s a list view here that contains a snippet. A snippet is a reusable component that can contain a collection of other widgets, like buttons and images.

Right-click the snippet to open it. Right now, it is empty, so let’s add a button that will approve a purchase order when it’s clicked in the app. Right-click in the snippet area and select Add widget > Button > Call microflow button.

The button will trigger some logic that is captured in what is called a microflow. Microflows consist of microflow actions, which trigger basic operations such as creating, changing, and deleting objects as well as aggregating object lists and showing messages.

In the dialog box that opens, search for “approve,” select the ACT_OpenApproveDialog microflow, and click “Select”. With the button selected, change the caption by typing Approve and hitting “Enter.

Double-click the button to open its properties. Open the drop-downfor the button style and select “Success, this will make the button green. Click “OK to save the properties.

Right now, the button opens a dialog box but doesn’t actually approve the purchase order behind the scenes yet. So, let’s create that functionality.

Creating the Approval Dialog Page

Let’s open the ACT_OpenApproveDialog microflow. Right-click the second activity and select “Go to page.

Right-click in the editor and open the page properties. Change the title to Are you sure you want to approve the purchase order? And save the properties. Select the “OK button and change the caption to “Approve.

Click “Run Locally to see the new button in action. Log in with your ES4 credentials. You can see the button in the bottom right corner. When you click it, the active purchase order will be approved.

In less than 5 minutes we created an app and added some new functionality to it. Imagine what you can do in an hour, a day, or more!