Skip to Content
Personal Insights
Author's profile photo Aocheng Yang

New alternative for building transactional report is NoCode – CRUD now supported for SAP AppGyver Classic

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.

Prerequisites:

  • S4 on-premise(or S4 cloud)
  • OData API_SALES_ORDER_SRV available in S4(or API of your choice)
  • Established Cloud connector between S4 and BTP subaccount
  • SAP Build app(with AppGyver Classic) subscription

Disclaimer:

The contents and the view expressed in this blog are the blog author’s own and do not necessarily reflect those of SAP.

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.

*Note that this comparison is only for the effort for front-end report development. Therefore full-stack app with CAP model and app with ABAP RAP model are excluded from the topic. Full-stack application development will be touched in the end of the blog.

 

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 😀

 

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Aocheng Yang,

      you're using Basic Authentication in your Destination configuration. Is Principal Propagation also supported from SAP Build Apps?

      Best Regards
      Gregor

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      Hi Gregor,

      I tried with Principle Propagation, and the connection seems to be reachable. But the BTP authentication fails on the SAP Build App side. So I think it's not yet supported, or might require special destination property.

      Best regards,

      Aocheng

      Author's profile photo Gregor Wolf
      Gregor Wolf

      The configuration is needed in Cloud Connector and your S/4HANA backend. Check out: Configure Principal Propagation for HTTPS.

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      The config in cloud connector and S4 backend are already done(system cert, CA cert, STRUST, adding icm/trusted_reverse_proxy_2 in ICM, etc, etc…) . I assume that’s why the connection test in destination service is succeful with principle propagation.

       

      Author's profile photo Gregor Wolf
      Gregor Wolf

      The connection test can't be trusted unfortunately. You could deploy my sample app HTML5UserAPIforCF which provides you links to check standard endpoints that require authentication.

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      Cloned HTML5UserAPIforCF but build 'npm run build:cf' fails with below error. I tried by manually build MTA project from mta.yaml but same error occurs.

      "command: exec: "mvn": executable file not found in $PATH"

      Anything I'm missing?

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Do you use BAS? If not you have to install maven for the Java part.

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      I was using wrong dev space... Now it's working in my CF. If you want to test your S4 backend connection, which one do I use? Backend without authentication / Backend with authentication? I did name the S4 backend destination 'SAP_ABAP_BACKEND' as specified.

       

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Hi Aocheng,

      Nice blog with detailed explanation.

      When performing CUD operations. how the CSRF token handled in Build ?

      Thank you,

      Syam

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      Hi, only checked with Update but it seems that HEAD request is triggered before POST. In HEAD, "X-CSRF-Token' is set to 'Fetch'. Fetched CSRF-Token is then used in POST.

      Author's profile photo Daniel Emmenegger
      Daniel Emmenegger

      Hello Aocheng

      I always got Destination unavailable in SAP Build Apps. But the destination works, the odata is active, the connection check works...

      Do my user on BTP-Cockpit needs any special authorizations or roles?

      What is wrong?

      thanks

      Daniel

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      Hi, it's hard to pinpoint the exact cause but it's good idea to check the followings:

      • Set 'HTML5.DynamicDestination = true' and 'WebIDEEnabled = true' in the destination.
      • Specify service root URL, which is 'http://<hots>:<port>/sap/opu/odata/sap/API_SALES_ORDER_SRV' in my blog
      • Odata service has resource path/entity sets
      • Cloud connector is reaching on-prem and BTP

      Regarding the roles, I've assigned all of them in BTP cockpit. Not sure which special authorizations you're referring to.

      Author's profile photo Daniel Emmenegger
      Daniel Emmenegger

      strange... all looks good... don't know, why it should be unavailable and AppGyver don't give more information...

      Author's profile photo Aocheng Yang
      Aocheng Yang
      Blog Post Author

      I also had the same issue and I did a trace in cloud connector. It turned out cloud connector was not able to fetch the OData, even thought connection test shows success. It's worth running a trace in CC.

      Author's profile photo Daniel Emmenegger
      Daniel Emmenegger

      Unfortunately I can't see anything in cloud connector... I assume, AppGyver didn't even reach the destination service...Need time to investigate...

      Author's profile photo Daniel Emmenegger
      Daniel Emmenegger

      Hello

      SAP Build Apps doesn't work with onPrem destinations at the moment. This is only available with SAP AppGyver Classic.

      SAP is working on it.

      https://answers.sap.com/questions/13770686/sap-build-apps-btp-destination-not-working.html

      Regards,

      Daniel

      Author's profile photo Thomas Madsen Nielsen
      Thomas Madsen Nielsen

      Very good blog and I'm glad you wrote that a pro developer should assist citizen developer.

      Just reading the comments on this blog shows that the tool is not yet mature for citizens. Its Even complicated for pro developers.

      With that said I will also say that Build App has improved very much and very fast and we will hopefully soon see stable setups for citizen developers - and for ancient ABAPers like me.