Skip to Content
Author's profile photo Andrei Vishnevsky
Andrei Vishnevsky
July 2, 2018 5 minute read

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.

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.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Deepak Singhal
      Deepak Singhal

      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

       

      Author's profile photo Andrei Vishnevsky
      Andrei Vishnevsky
      Blog Post Author

      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.

       

      Author's profile photo Deepak Singhal
      Deepak Singhal

      Hi Andrei,

      Got it, Sure I will vote for this idea.

      Thanks for the quick reply.

      Regards,

      Deepak Singhal

       

       

       

      Author's profile photo Fabian Egner
      Fabian Egner

      Hi Deepak,

      could you solve the problem to add an CustomPane to UI Designer? Did you raise an Incident?

       

      Thanks & regards,

      Fabian

      Author's profile photo Diamila Rosa de la Teja
      Diamila Rosa de la Teja

      You are Clever! Thank you to share it!

       

      Best regard!

      D.