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.
http header key |
value |
Content-Type |
image/jpeg |
Slug |
my attached image.jpeg |
BusinessObjectTypeName |
EBAN |
LinkedSAPObjectKey |
001003068800010 |
X-CSRF-Token |
<token from the get call> |
Accept |
application/json |
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!