How to use Barcode Scanner in custom development in C4C
UPD 25/09/2018:
SAP recently introduced the easy way to enable barcode scanner capability for input field in custom development. Here the description: Nice (yet another) way to enable barcode scanner in C4C custom development
However, the current blog is still relevant if you’d like to get into some depths.
This blog is a continuation of my (un)expected journey in some way. However, here I’m going to provide a practical step by step guide on how to enable barcode scanner via custom pane. I’ll try to make it shorter, I promise. And hopefully more enjoyable to read.
The topic I chose is something important nowadays in my opinion. Chatting about IoT, ML, C/4HANA, UX and all those CX things we’re still typing in some digits and characters which make no sense. Especially, it makes no sense when you’re on the go and using mobile apps.
There is already speech-to-text available for anyone in any field. But it’s a native feature of a device.
Barcodes are there to simplify and encode information. And there should be an “easy to build” way to utilize those capabilities and scan and decode barcodes in your customer needs. In other words, in your custom development.
SAP did inbuild barcode scanner for some scenarios in C4C extended app. For example, “Add product” dialog or ticket search based on ticket id scanned from a barcode.
Obviously, it’s impossible to cover all customers’ needs with out-of-the-box features. And there will be always some extraordinary scenarios where partners or customers need to go and build the same, but different.
The barcode scanner in C4C as a topic has been raised many times across SAP Community and Influence SAP areas.
Ideas
Scan barcode for spare parts
Make barcode scanner more flexible
Automated barcode/number/text reading for an input field from camera of a device
Bar code / QR code scan BADI
Scan into any field / Define own scan logic
Discussions on SAP Community
C4C barcode / qr scanner for products in tickets
Using the scanner in the C4C extended APP for IPAD
How to import barcode scanning functionality in C4C ABSL
C4C: Barcode Scanner for Custom Screens
To name a few.
To answer those questions and address some ideas in full or partially, I will take quite a simple scenario and show step by step how to achieve it.
The scenario is:
We need barcode scanner embedded in Service Ticket TI.
Scanned barcode value should be parsed in a way to extract first two characters.
That’s all and we’re ready to test our barcode scanner embedded via custom development.
PS: usually, you might need to calculate visibility of the control with some calculation rule for Visible property. Something like this:
if($data.$System.DeviceType != "desktop" )
result = true
else
result = false
end
However, it’s not the case with the Barcode scanner control we used here. It will be rendered only if the device has Cordova plugin available and this check is handled within the javascript library itself.
Hi Andrei,
Nice blog!
I am not able to add custom pane on UI designer, please let me know where I can find it in UI designer.
Regards,
Deepak Singhal
Hi Deepak,
Thank you! It's my pleasure.
This is a very good question. I would say the question I was waiting for. To answer it I refer to one of my previous blogs SAPUI5 and C4C. My (un)expected journey. Part 2. There I mentioned that I have had a concern that SAP would remove this from customers and partners. Unfortunately, it happened at some time in June 2018. They simply removed it from Toolbox in UI designer. It's always easier to remove something rather than add or at least fix it.
To answer your question I would suggest addressing the question to SAP raising an incident in C4C asking where Custom Pane and Custom Control have gone.
And I'm also kindly asking to support and vote for at least this idea: Make exception during CustomPane processing less aggressive
I feel this is the most important of three I referenced in that other blog of mine. I strongly believe if more people are interested in the topic and more times the question is asked, more chances we have to get Custom Pane and Custom Control back.
Hi Andrei,
Got it, Sure I will vote for this idea.
Thanks for the quick reply.
Regards,
Deepak Singhal
Hi Deepak,
could you solve the problem to add an CustomPane to UI Designer? Did you raise an Incident?
Thanks & regards,
Fabian
You are Clever! Thank you to share it!
Best regard!
D.