Abstract

Using SAP Build Apps, Google-Images-Search, SAP BTP Kyma and S/4HANA Cloud to create a mobile application for users to request indirect goods or services procurement by attaching pictures. Thus eliminating the need for purchasers to reach out for more details to the requestor and cutting the overall lead time to delivery.

A video shows the application and technical details teach how to replicate the approach for you.

Introduction

Wouldn’t it be great to request your purchase by just pointing at a picture on your phone and make that an S/4HANA purchase requisition? In today’s fast-paced business environment, time is of the essence and one area that can often slow down the process is the purchasing department. In many companies, purchase requisitions are submitted through an indirect purchasing department, and the problem is that the purchasers often don’t understand exactly what product or service is being requested. This can lead to delays and increased effort as they must communicate with the requester through calls or emails to gather more information.

For example, let’s say that Ravi, an employee in the marketing department based in India, needs to request a whiteboard for an upcoming event he will be moderating. He submits the purchase requisition through the indirect purchasing department, but without specifying the size of the whiteboard and the preferred brand, the purchaser, Sumiko, based in Japan, needs to reach out to Ravi to gather more information before moving forward with the purchase. This can lead to delays in the purchasing process and added effort for both Ravi and Sumiko.

Another example is when Wei, an employee in the IT department based in Asia, needs to request new computer equipment, but the purchase requisition only states “laptop” without any specification such as screen size, memory, brand and model. Sumiko, the purchaser, needs to reach out to Wei to gather more information before moving forward with the purchase.

Solution approach

To revolutionize this problem, a solution is to implement a mobile application that can completely streamline the purchasing process and make it more efficient and exciting. The mobile application, built using SAP’s No-Code technology and integrating Google search, allows requestors like Ravi and Wei to easily search for and select images of the products or services they need, such as a whiteboard or a laptop.

The application guides them through a step-by-step process to complete the purchase requisition in SAP S/4HANA Cloud and attach the image of the product or service requisition, making it easier for the purchasers like Sumiko to understand the details of the request and move forward with the purchase seamlessly and quickly.

This eliminates the need for the purchasers to reach out to the requester for more information, saving time and effort for all parties involved and streamlining the entire process. With this solution in place, requesting purchases will be as simple as pointing to a picture on your phone.

Architecture and frameworks used

I’ve used SAP Build Apps for the mobile app so that it can run as native Android or iOS or as web-app depending on preference. The backend is build on Python using Google Images Search library. You need a GCP account to configure a custom search.

It is hosted on SAP BTP Kyma using Docker to build the image.

Image 2: Solution architecture

Solution demonstration

In below images you can see the flow of the application on the mobile phone – it would work very nicely also on a tablet! We will also check how this purchase requisition will look in S/4HANA Cloud and view the image attachment.

Image 3: Entry of search results.

Image 4: Search results as thumbnails.

Image 5: Entry of requisition data after image selection.

Image 6: Purchase requisition created in S/4HANA Cloud and image uploaded.

Image 7: Purchase requisition in S/4HANA Cloud with image attached.

Selected technical hints

There are a few features of this app which I’d like to explain with technical details.

a) One page app concept in SAP Build Apps

The application is just one page. It uses the Conditional Renderer element to display alternating content. This element switches containers based on the state of its render ID.

Image 3: Conditional renderer settings for the app.

Therefore, by changing the value of sActiveContainer, the container is switched. The outcome is an app that is very responsive and where the content is persistent. You see that in the video, when we go back and forth between search results and the image preview.

b) Dynamic image thumbnail columns

With different horizontal screen resolution of a device (or by turning a device 90°) one or many image thumbnails should be displayed. This can be realized by nesting 2 container elements and placing the image element into the lowest container element. The top level container layout setting must be Horizontal and the wrap overflowing components onto a new row check box must be selected.

Image 4: Nesting image containers to create dynamic columns

That way you will either see one or more images beside each other depending on the device’s resolution.

c) OData services used for this app

We use the API for purchase requisitions for S/4HANA Cloud. For creation of PurReq use the entity /A_PurchaseRequisitionHeader.It is documented but I’d like to share a minimalistic JSON that would create a document in S/4HANA Cloud.

{
"PurchaseRequisitionType": "NBS",
"PurReqnDescription": "Purchase req. for test",
"SourceDetermination": false,
"PurReqnDoOnlyValidation": false,
"to_PurchaseReqnItem": {
"results": [
   {
    "PurchaseRequisitionItemText" : "Party catering service",
    "AccountAssignmentCategory" : "K",
    "CreatedByUser" : "MyUserID",
    "PurchasingGroup": "001",
    "MaterialGroup" : "L001",
    "PurchaseRequisitionPrice" : "12.35",
    "RequestedQuantity": "1.0",
    "BaseUnit": "PC",
    "Plant": "1710",
        "to_PurchaseReqnAcctAssgmt": {
                "results": [
                  {
                    "PurchaseReqnAcctAssgmtNumber" : "1",
                    "CostCenter": "US10_CORP3",
                    "GLAccount": "63007000"
                  }
             ]
        }
    }
] }
}

I also used the attachment API for the image upload to the purchase requisition. You would use the /AttachmentContentSet entity to refer to the business document. This is a universal API for attachments in S/4HANA (Cloud). So you need to know the business object, which can be tricky. Also, attachements for purchase requisitions are made on item level, so a working example of a call looks like that for the header settings. The body is the binary itself.

The object key is the purchase requisition number (10) with leading zeroes and the item number (5). Run a GET beforehand with X-CSRF-Token = fetch to obtain the token for the POST.

d) Custom search service with library

That one is well documented, however I’d like to outline the flexibility of the image search. You can go down on this filter level that you see below.

_search_params = {
    'fileType': 'jpg|gif|png',
    'rights': 'cc_publicdomain|cc_attribute|cc_sharealike|cc_noncommercial|cc_nonderived',
    'safe': 'active|high|medium|off|safeUndefined', 
    'imgType': 'clipart|face|lineart|stock|photo|animated|imgTypeUndefined', 
    'imgSize': 'huge|icon|large|medium|small|xlarge|xxlarge|imgSizeUndefined', 
    'imgDominantColor': 'black|blue|brown|gray|green|orange|pink|purple|red|teal|white|yellow|imgDominantColorUndefined', 
    'imgColorType': 'color|gray|mono|trans|imgColorTypeUndefined' 
}

Closing

In conclusion, building mobile applications using SAP’s Build Suite and BTP Kyma runtime is a simple and effective way to improve business processes and create value for all parties involved. With the ability to easily integrate Google search and streamline the purchasing process, this solution can save time and effort for both requestors and purchasers, ultimately revolutionizing the way your company handles purchases. Make your business processes easy, efficient and exciting!