Skip navigation

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 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 with SAP Cloud Platform Rapid Application Development bvy Mendix (Mendix for short) 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 Apps” 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 Tutorial.”

When you create the app, you’ll need to sign in to SAP Cloud Platform.When you’re signed in, you’ll need to select the region, domain, organization and space you want to use. If you don’t have an account yet, you can create one here: https://account.hanatrial.ondemand.com. Click “Create” to create the app and prepare it for development. You can see that the environment has been created and is now ready for development. Simply click “Edit App” to open the Mendix Desktop Modeler and start building our app!

Running the Purchase Orders App

For this application you’ll add a simple approval step that is invoked from the Mendix app and will trigger a request to the SAP Gateway Demo System (ES5). The first thing you’ll do is run the app and view it so you can see what it looks like. In the Desktop Modeler click “Run Locally”, and when the app is done loading, click “View”. Running the app locally means you’re running it just on your machine, so you can see what your changes look like before running it in the cloud, where all your users can see your updates. Click “Yes” when asked if you want to create a default database.

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

Adding a Purchase Order Approval Button

Let’s go back to the Mendix Modeler and add the purchase order approval functionality. You’ll do so by adding a button. First, open the Homepage (located under MyFirstModule), the landing page of the app shown in the screenshot above. Scroll down to the bottom of the page to see a list view 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 and select Show 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. Start typing the word “microflow,” select Call microflow button, and click Select.

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 window that opens, search for “approve,” select the Con_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-down for 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

Open the Con_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!