Create a WebAR experience with ABAP and Ar.js
TL;DR: A fun and small proof-of-concept development in ABAP BSP with AR.js to display the PO’s overall status in real-time on a browser through WebAR.
Imagine if you have either a physical printout or a PDF of a Purchase Order (or any document) and you’d like to get some real-time information on it but doesn’t want to pick up the phone to call and talk to someone or run a report. So, how about just simply pointing your phone camera at it and get it’s real-time status?
This setup is made possible with AR.js – by using less than 20 lines of HTML code on a BSP application and a QR code on the printout, I can display the status of a PO in WebAR. I’ve recorded a short video of this POC and you can watch it on YouTube (Duration: 3 mins 25 secs).
ABAP Server and the BSP Application
I’ve used the ABAP Developer Edition server to host a small BSP application and expose it to the Internet on a secure tunnel through ngrok (Website: “ngrok – secure introspectable tunnels to localhost“).
First, a new BSP application called “ZARJS” with a single Index.html page is created. In the layout editor, enter the HTML code that will call the AR.js library and also detect the barcode marker which will then display the “PO Status text” value.
The “index.html” page has two page attributes:
- poNumber – also used as a URL query parameter so that the BSP page knows what PO number it has to go retrieve the status for.
- poStatus – a variable that will get the PO Status Text and display it in the HTML page (see HTML id: text-display on line 13)
And finally, in the “Event Handler” tab – add a few lines of ABAP code that will first, get the query URL parameter ‘poNumber’ and then retrieve the Status Text by doing a join on table SNWD_PO and DD07T.
That’s it for the BSP application and then for the demo, I started the ngrok tunnel so that I can get the URL that’s generated (it changes every time with the FREE plan).
For the QR Code – just like in Nicolò‘s blogpost, I used QRCode Monkey to manually generate a QR code with the following URL and also generated an image of the barcode marker with the value “18” and upload it to QRCode Monkey as a logo.
QRCode URL: https://cc77b5ac0f60.ngrok.io/sap/bc/bsp/sap/zarjs/index.html?poNumber=300000039
For the purpose of the POC, a PDF of the PO is manually created and the QRCode that was generated is embedded into it as an image. You can watch how it all works in the YouTube video above.
There are other capabilities within the AR.js framework that’s really interesting such as location tracking, image tracking, events trigger and support of multiple markers.
Hope you’ve enjoyed this small little POC and the source code for the BSP application can be found on Github and you can get it using ABAPGit.
Github repo: https://github.com/albanleong/arjspoc
You can create a free QR Code online with different styles https://4qrcode.com/ also you can scan it online at https://4qrcode.com/scan-qr-code.php