Skip to Content

Create sales order app with SAP Cloud Platform Rapid Application Development by Mendix

test
0 %
Create sales order app with SAP Cloud Platform Rapid Application Development by Mendix
Details
// Explore More Tutorials

Create sales order app with SAP Cloud Platform Rapid Application Development by Mendix

10/07/2018

Create a sales order app that consumes a service from the SAP Gateway Demo System (ES5).

You will learn

  • How to create an SAP Blank application in SAP Cloud Platform Rapid Application Development.
  • How to create the application data model using the SAP OData Model Creator.
  • How to consume an OData service using the SAP OData Connector.
  • How to deploy the application to SAP Cloud Platform.

Details

You can build business applications for the SAP Cloud Platform Cloud Foundry environment using SAP Cloud Platform Rapid Application Development by Mendix, without needing to write code.

This tutorial takes you through the basics of development in the Mendix Desktop Modeler and teaches you how to build a simple sales order application consuming the GWSAMPLE_BASIC service from the SAP Gateway Demo System (ES5).

This tutorial also showcases the SAP OData Model Creator and SAP OData Connector, available in the Mendix App Store.

Before starting this tutorial, make sure you have followed the prerequisites.

This tutorial is applicable whether you have a productive or trial Neo environment, but assumes that you are using a trial Cloud Foundry environment.
 
The Mendix Desktop Modeler, for building your application, is available for Windows platforms only.


Step 1: Get SAP OData Connector

The SAP OData Connector is available for download from the Mendix App Store.

The Fiori Blank template you are using already contains this connector, locate it in your project’s App Store modules.
For more information, see How to Use App Store Content in the Modeler.

Mendix App Store
Step 2: Create GWSAMPLE_BASIC service module

The SAP OData Model Creator is a web site where your OData service metadata is transformed into a Mendix domain model that can be imported into your project.

You can generate this domain model by providing your service metadata as a file, URL, or select a service from SAP API Business Hub.

OData Model Creator

We will do it by providing a file.
This file can be downloaded from the OData service URL directly using the $metadata suffix or retrieved from SAP Gateway. Since we’re using the SAP Demo Gateway System (ES5) for this tutorial, the metadata file can be found at:

https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/$metadata

To generate the service module, follow these steps:

  1. Save the metadata file to your hard drive.

  2. Open the SAP OData Model Creator.

  3. Select the Manual option.

  4. Upload the OData metadata XML file and click Continue:

    Domain Model Creator
  5. Select the Schema and click Continue.

    Domain Model Creator Schema
  6. Press Generate .mpk. A progress bar will be shown during the parsing and generation of the module.

  7. Once the generation is done, the Download button appears. Notice that the file name of your module is extracted from the metadata file itself.

    Press Download and save the .mpk file locally.

    Domain Model Creator
Step 3: Import module in Mendix app

Now you have a Mendix module ready to be imported into your project.

  1. Open the project that you created, right-click the project root folder, select Import module package… and select the .mpk file.

    Import module package


    You now have your GWSAMPLE_BASIC module available in your project ready to use in combination with the SAP OData Connector.

    Import module package
  2. Open the generated domain model and explore the entities and associations. Imagine that you had to create that manually – a lot of work!

    Generated Domain Model
  3. In addition to the domain model, the OData Model Creator also created two other items:

    • A constant with the name of the service, containing the service root URL
    • An enumeration (EntitySetNames) containing a list of all the entity sets in the model
    Generated Domain Model
Step 4: Create constants for ES5 credentials

Now that we have our domain model in place, it’s time to implement the connectivity to the SAP Gateway Demo System (ES5).

Our tutorial uses basic authentication to connect to the ES5 system, so let’s store the username and password in constants.

  1. Right-click MyFirstModule and add a new folder called Constants.

  2. Right-click the Constants folder and add a new constant called ES5Username.

    Add Constant
  3. Enter your ES5 username as Default value.

    Add Constant
  4. Following the same steps, add a new constant and name it ES5Password.

  5. Enter your ES5 password as Default value.

    Add Constant
Step 5: Add logic to get sales orders – authentication

Follow these steps to create the logic to get the sales orders.

  1. Right-click MyFirstModule and add a new microflow, name it ACT_GetSalesOrders.

  2. Right-click the line between the green and red dots in the microflow editor and select Insert | Activity (or drag and drop an activity from the upper toolbar).

  3. Double-click the new activity and scroll down to locate the SAP OData Connector actions.

  4. Select Create Request Params, and then click Select.

  5. Name the variable RequestParams. This variable (as its name suggests) will hold the request parameters, and it’s required for the Add basic authentication activity.

    Create Request Params
  6. Following the same steps, add an Add basic authentication activity.

  7. Select the $RequestParams variable in the Request parameters dropdown.

  8. Click Edit… for the Username and select the ES5Username constant by entering the following argument: @MyFirstModule.ES5Username

    Add Basic Authentication
  9. Follow the same steps for the Password.

  10. Change the output Variable name to Authentication.

  11. Click OK to close the dialog.

Add Basic Authentication
Step 6: Add logic to get sales orders – request
  1. Add another activity to the microflow and select the Get List action from the SAP OData Connector.
    The Get List action retrieves a list of entities described in the domain model. In our case we will retrieve a list of sales orders.

  2. Fill in the required fields of the Get List action. For this tutorial, use the following settings:

    Field Value
    Query The URL to which you want to execute your request. In our case:

    https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/SalesOrderSet

    And it’s constructed by entering the following code:

    @GWSAMPLE_BASIC.GWSAMPLE_BASIC + '/' + toString(GWSAMPLE_BASIC.EntitySetNames.SalesOrderSet)
    Response type The type you want to query from the OData service. Select the SalesOrder entity.
    Request parameters $RequestParams variable
    Parent empty
    Result info empty
    Use Cloud Connector false
    Output Variable SalesOrders

    In our case, the Use cloud connector is set to false because ES5 is a publicly accessible system.

    If you would like to consume a service from your on-premise back-end system, you need to setup and configure the SAP Cloud Connector and then mark this field as true.

    When running the Mendix application on SAP Cloud Platform, the SAP Cloud Connector will automatically be utilized to gain access to your on-premise system.

    For more information, see the SAP Cloud Connector documentation.

  3. Verify the Get List dialog matches the following:

    Get List
  4. Click OK to close the dialog.

Step 7: Add logic to get sales orders – return value

In the microflow, make the return value of the microflow a List of SalesOrders so you can call the microflow as a data source in a page.

  1. Double-click the End-Event (red dot).

  2. Select List for the Type.

  3. Select SalesOrder for the Entity.

  4. Click on Generate… and select the SalesOrders variable.

    Expression value

  5. Verify the End Event dialog matches the following:

    End Event

  6. Click OK to close the dialog.

Your microflow should look like the following:
Microflow

Step 8: Create a new master detail page
  1. Right-click MyFirstModule, and choose to add a Page.

  2. Enter a name for the page (e.g. MyFirstPage).

  3. Select the SAP_MasterDetail (SAP_UI_Resources) Navigation layout.

  4. Select the Fiori Master Lists category on the left-side menu and select the Master List template.

    Add New Page
  5. Click OK.

  6. Notice the Errors tab located at the bottom pane is showing an error No entity configured for the data source of this list view.

    Add New Page
Step 9: Show sales orders in page – master

Now we will bind the Master section to the Sales Orders.

  1. Double-click the error from the Errors tab to get the List View of the Master section selected.

    Edit List View
  2. Double-click the List View, and change its Data Source to your ACT_GetSalesOrders microflow.

    Edit List View
  3. When prompted to automatically fill the contents of the list view, choose No.

  4. Select the content of the List View, right-click it and choose Delete.

    List View Content
  5. Open the Connector tab on the right-side pane to view the properties of the Sales Order entity.

    Open Connector Tab
  6. Double-click (or drag and drop) the CustomerID property from the Connector tab.

  7. In the page, select the content below the Customer ID you just added and add the CustomerName property.

  8. Select the content below it and add the CreatedAt property.

  9. Verify it looks like the following:

    List View Content Final
Step 10: Show sales orders in page – details

Now we’re going to make some modifications in the Detail section of the page.

  1. Notice the Errors tab is showing several errors regarding fields that aren’t bound to any property in the Detail section. Scroll down, select the Tab Container, and delete it. This should resolve the errors.

    Tab Container
  2. Scroll down, select the footer container, and delete it as well.

    Footer
  3. Scroll back up, double-click the Title text and change it to Sales Order.

  4. Double-click the Subtitle text and change it to Details.

  5. Select the container with the New and Delete buttons and delete it.

    Delete Container

Now let’s bind the Detail section and present some more Sales Order properties:

  1. You can see 3 containers with Category and Value texts.

    3 Containers
  2. Select the first container and delete both Category and Value texts.

  3. Double-click the SalesOrderID property from the Connector tab.

    Container for SalesOrderID
  4. Select the second container and delete both texts again.

  5. Double-click the CurrencyCode and the GrossAmount properties.

    Container for CurrencyCode
  6. Select the third container and delete both texts again.

  7. Double-click the Note, LifecycleStatusDescripion and BillingStatusDescription properties.

  8. Verify the UI looks like the following:

    Container for Note
  9. Scroll up in the page, double-click the Page Title text and change it to Sales Orders Application.

Step 11: Configure Home Page

Mendix apps work by showing pages to the user. You can define which page should be the Home page, i.e. the first page the user sees.

  1. Right-click Project | Navigation and click Open.

    Open Navigation
  2. Click Select… next to Default home page.

  3. Select the new page you created in the previous step as the new home page.

  4. Click Select.

Step 12: Run app

Now that you’ve created the UI and business logic, you can run the app and have it connect with the SAP Gateway Demo System (ES5).

To run the app for the first time, follow these steps.

  1. Click Run | Run Locally.

    Run Locally


    If you see the pop-up window asking if you want to create a database, select Yes.

    If you see the pop-up window asking if you want to save your changed, select Save and continue.

  2. Wait until the startup of the app has finished and the app is running.

  3. Click View to view the app in your browser.

    View App

You will now see your Sales Orders Application in the browser, with live data coming from ES5.

View App

Step 13: Run app in SAP Cloud Platform

The final step is to deploy the application to SAP Cloud Platform, Cloud Foundry environment, and run it from your space!
The application will automatically bind to the Connectivity, XSUAA and PostgreSQL service instances.

  1. Click Run.

    Run


    The deployment process will start and you will be notified when completed.

    Deploy
  2. Once the application is deployed successfully, click on View to run it from SAP Cloud Platform.

Next Steps

Back to top