How to use Barcode Scanner in custom development in C4C

[VishnAndr]

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.

1		Create EC (Embedded Component) in your solution. In this example, I named it ZTicketBarCodeScanner.
2		Open EC in UI Designer. Select BOModel as ServiceRequest from "http://sap.com/xi/AP/CRM/Global" namespace. Bind Root of data model to ServiceRequest. Drag and drop ID from ServiceRequest under Root. Add Data Structure InPort and Data Field ID in it. Also, add Data Field modResult where our modified result of the scanned value will be stored. Now add the most important one. The field where the scanned value from barcode scanner will be written to. Add it as Data Field under Root and name it GTIN. The name is also important. To recap, you must have /Root/GTIN to make standard barcode work. I will bind neither GTIN nor modResult for the sake of simplicity. However, you're free to bind them to any Object field to store the value later in DB. Just remember, you need /Root/GTIN be presented in your Data Model.
3		Add OnValueChanged event handler onGTINchanged to /Root/GTIN data field
4		This event handler will parse the scanned value and after modification will put the result into modResult field. It has only one operation of Script type which source is: $data.modResult = $controller.StringUtils.LeftSubString( $data.GTIN, 2);
5		Being in Controller of this EC and add inport InPort. It should have one Parameter with the name ID and bound to /Root/InPort/ID. Set RequestFireOnInitilization property to true. And create OnFire event handler with the name onInPort.
6		Go to event handler onInPort and add logic to read ServiceRequest entity. It's required if you need to store the scanned value later on to ServiceRequest. Select Type of one operation as BOOperation. Make it Read. Provide parameter with name ID, type as alternativeKey. In Bind column bind it to /Root/InPort/ID (which is inport value) and in Path to /Root/ID (which is ID of bound ServiceRequest).
7		Switch to Designer of this EC and bring fields and custom pane. Add section where bring /Root/ID, /Root/GTIN and /Root/modResult from data model. You're free to relable any of those fields according to your requirements. Or they even can be hidden from the screen. I left them to show how it works.Add custom pane to your EC.
8		Select custom pane in Designer and maintain its properties: JS Library Name = sap.client.cod.newui.shared JS Library URL = /BYD_COD/Runtime/HTML/resources/sap/client/cod/newui/shared JS Type Name = sap.client.cod.newui.shared.control.ItemProductBarcodeScannerSave and active EC.
9		Add EC to ServiceRequest TI as a new tab. It's important to add it to a proper TI. There are 2 TIs for Tickets. For HTML5 it is /BYD_COD/ServiceOnDemand/AgentWorkspace/ COD_SEOD_Agent_Workspace_TI.TI.uicomponent However, Fiori ticket TI is /BYD_COD/ServiceOnDemand/ Collaboration/COD_SR_TI.TI.uicomponent We need the latter since the same TI is used in C4C extended app. If you're doing it via "Enhance Screen" menu in SDK, then select COD_SR_TI from the list. Select "Undefined" anchor in Extensibility Explorer for this TI. And press "Add View with embedded Component".
10		Provide Tab Title according to your needs and select embedded component we just created. Press Bind and bind TicketID from Ticket_Info_Out outport with ID in InPort. Save and activate TI to activate change transaction.

 

 

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.