Introduction

This blog is a personal insight and technical guide to new way of extending ERP core with Side-by-Side approach. SAP Build apps is a powerful platform to build full-stack application with little to no coding effort required. What’s more, it can consume data from ERP(S4 on-prem/Cloud) and now it can directly update database in ERP with one of its feature AppGyver Classic, without having to workaround CORS issue.

In this blog, AppGyver classic is used for demonstrating the capability and implementation.

Side-By-Side Extensibility with Business Technology Platform

Building transactional report

Ever since the clean core approach has been introduced, many companies are realizing its significance and shifting towards to Side-by-Side extension approach, rather than building extensions on ERP side.

When it comes to building transactional report, the most favored framework has been SAPUI5 freestyle or Fiori Element on the cloud platform. Business UI/logic are decoupled from ERP side to the UI5 application and UI5 freestyle application has the most flexibility in creating UI and controlling business logic on the screen.

However, since the No-Code/Low-Code platform is introduced last year in Business Technology Platform, things have changed for SAP UI app development. SAP AppGyver(Now SAP Build App) allows user to create fantastic UI and flexible UI control with little to no coding required, and yet can be deployed to Cloud Foundry and Launchpad service, just like SAPUI5 app.

Now with the bigger feature update recently, the BTP authentication in the No-Code/Low-Code platform supports complete support for transactional behavior. This means no more CORS issue and have to workaround with API management, and no need to configure HTTP call flow component, and directly communicate with backend database table. This includes Create, Read, Update, Delete and it’s especially powerful for performing these operations on your S4 ERP side.

Managing your S4 data(transaction/master) are once done by SAPUI5 app that requires coding. Now the same job can be done without coding, with much faster delivery time and less IT resources.

The setup

Rough architecture

To test this new CRUD feature, I’m using S4 on-premise system and BTP. They are connected by cloud connector so that OData/REST API are consumable in BTP subaccount. AppGyver classic uses the OData, which is API_SALES_ORDER_SRV in this blog, to Create, Read, Update, Delete sales orders in S4 side.

1. Cloud connector between BTP and S4

The connection must be established between your S4 and BTP subaccount. In my system, HTTPS connection with X.509 certificate & Principal Propagation are used for connecting to S4. Make sure that both connection to S4 and BTP are reachable.

2. Destination in BTP subaccount

Use the cloud connector destination pointing to S4. Make sure to use on-premise connection and have these two properties set ‘true’.

• HTML5.DynamicDestination = true
• WebIDEEnabled = true

3. Create AppGyver Classic App in SAP Build Lobby

Go to SAP Build Lobby and go to Create. Choose ‘Build Application’ and choose ‘AppGyver Classic’. Enter the name and description and create.

4. Load S4 data

Enable BTP authentication from the AUTH tab on the top. You can choose not to use authentication on the initial page.

Go to DATA tab and Add Integration. Choose BTP authentication and list of all available destinations configured in BTP subaccount are displayed. Choose the S4 Sales OData destination created in the previous step.

If the destination and cloud connector are correctly configured, you will get all the entity sets from OData API_SALES_ORDER_SRV. Install this integration.

We are going to use entity set ‘A_SalesOrder’ to create, update, delete sales order. Enable the entity set and save your change.

5. UI, variables, and flow logic

Variables

Switch to variable view and create Data variable. ‘Add Data Variable’ will suggest A_Sales_Order, which we enabled in previous step. Once it’s added, save the change.

*If your S4 has massive amount of sales order data, it’s recommended to restrict the data amount by adding the below query.

Create app variables like below. These will be used to create new sales order. All of them are in text type.

UI

Add Card component, three buttons, and ten input fields that each correspond to app variables that created in previous step.

Card component will display all the existing sales orders. Name the three buttons to Create, Update, and Delete. All the input fields are used to create new sales orders.

Make sure to bind each app variables to respective input fields value parameter.

Flow logic

Add flow logic for the buttons. For Create button, use ‘Create record’ and add success/error message is optional.

*Hint: It is a good idea to use the return message of the ‘Create record’ function, so that we know the Sales order number created in the backend. You can use below formula in the message toast function flow to do so.

For Update button, use ‘Update record’ and add success/error message is optional. Make sure to set Sales Order Number variable in the parameter. In this tutorial, we will just change ‘PurchaseOrderByCustomer’ in sales order header.

For Delete button, use ‘Delete record’ and add success/error message is optional.

Save the progress.

6. Testing

Open the app preview from Launch tab. Choose ‘Open App Preview Portal’ on your web browser.

Read

List of sales order from S4 should be visible.

Create

Fill in all the input fields except sales order number. The value should match the master data in your S4 side. After that, click on the Create button. A new sales order should be created in the S4 backend.

Update

Let’s choose one sales order and change its ‘Customer reference PO’. Enter the sales order number and the new value in ‘PurchaseOrderByCustomer’. Click on Update button.

The change is reflected now in the S4 side, if the update process was successful.

Delete

Let’s delete the sales order 20823 created in the previous step. Enter the sales order number and click delete. If it’s successful, it’s deleted in the S4 backend.

Some thoughts…

As tested above, CRUD operations are undoubtfully working and technically it will work not only for the SAP standard API but also for the custom OData API built in your S4 side. This means that we got a really good alternative for building transactional report, and it’s NoCode/LowCode. In fact, this new development framework has benefits over classic UI5/Fiori element in:

• Faster build/delivery time
• Only requires a citizen developer(from business side) and a pro developer(connection setup, assist citizen developer).
• Less IT resources required.

Full-stack application

I tested this capability with AppGyver classic, not SAP Build App full-stack app development. I’m not sure that the same CRUD operations can be performed with SAP Build App full-stack app, but at least I hope it’s on the roadmap. If CRUD is possible on SAP Build App full-stack app, that means it will be a good(or even better) alternative for replacing Full-stack CAPM application, or ABAP RAP application. This is definitely worth keeping an eye on, and it’s exciting to see that future of application is more and more replaced by No-Code/Low-Code 😀