Personal Insights
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:
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 😀
Hi Aocheng Yang,
you're using Basic Authentication in your Destination configuration. Is Principal Propagation also supported from SAP Build Apps?
Best Regards
Gregor
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
The configuration is needed in Cloud Connector and your S/4HANA backend. Check out:Â Configure Principal Propagation for HTTPS.
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.
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.
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?
Do you use BAS? If not you have to install maven for the Java part.
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.
Hi Aocheng,
Nice blog with detailed explanation.
When performing CUD operations. how the CSRF token handled in Build ?
Thank you,
Syam
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.
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
Hi, it's hard to pinpoint the exact cause but it's good idea to check the followings:
Regarding the roles, I've assigned all of them in BTP cockpit. Not sure which special authorizations you're referring to.
strange... all looks good... don't know, why it should be unavailable and AppGyver don't give more information...
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.
Unfortunately I can't see anything in cloud connector... I assume, AppGyver didn't even reach the destination service...Need time to investigate...
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
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.