Barcode Scanner usage in SAP Build Apps to Get Data via an oData Integration

Estimated read time 6 min read

Hi folks, in this blog post I will show you how to use Barcode Scanner in SAP Build Apps and how to fetch a single data record of scanned barcode number.

I have an oData Integration on my BTP account and a data entity named Product which I will use to fetch data from. For this project I will only fetch the Product field of my data entity.

First go to canvas page and add a barcode scanner image for better UI. Then add a button under the image.

Click on the button and open logic canvas. From the left panel find the barcode scanner and import to the button logic canvas. In the properties of Scan Barcode node select ā€œqrā€ as Code type to recognize.

Then go to variable page and add an app variable named ā€œappVarBarcodeā€. The reason why we add an app variable is because we want to use the value in other pages too.

Add a ā€œSet app variableā€ node to the logic canvas and set value of Barcode to our ā€œappVarBarcodeā€ variable.

The assigned value formula for our app variable will be:

Ā 

Ā 

SUBSTRING(outputs[“Scan QR/barcode”].codeContent, 0,13)

Ā 

Ā 

So here we got codeContent of barcode scannerā€™s output. The reason why I selected substring only from 0 to 13 is sometimes barcode scanner gets blanc spaces too.

Then we direct our app to next page by adding Open Page node. You can create a new page by clicking on page name on upper left corner. And then you can give your next pageā€™s name to Open Page nodeā€™s ā€œPageā€ field.

My next pageā€™s name is also Product. Now start creating new UI by adding two input fields. First one is for the barcode number and second one is for the product code of the barcode which we will fetch from our data entity.

In order to store fetched “Product” data we need to create a page variable. I created a text based page variable named “Product”.

First give our ā€œappVarBarcodeā€ app variable as a value of first input field.

Second give your page variable “Product” as value of second input field.

Next, we need to fetch our data entity and assign value for our ā€œProductā€ page variable. To do this click an empty space on the canvas and open the logic canvas. Add ā€œGet record collectionā€ node to the canvas and bind it with Page mounted event. Select your resource name. For me it is Product (the data entity name in my oData integration).

Now give filter condition to get the single data entity which has our scanned barcode number. In my case my barcode number is stored in ProductStandardID field so that I filtered this field. You can think of it as a select statement.

Next, we assign the fetched Product field to our page variable Product.

To do this you can write a formula to reach out output values of record collection:

Ā 

Ā 

outputs[“Get record collection”].records[0].Product

Ā 

Ā 

Now our application is ready to run.

Please comment on this blog post if you have any questions or recommendations.

Ā 

ā€‹Ā Hi folks, in this blog post I will show you how to use Barcode Scanner in SAP Build Apps and how to fetch a single data record of scanned barcode number.I have an oData Integration on my BTP account and a data entity named Product which I will use to fetch data from. For this project I will only fetch the Product field of my data entity.First go to canvas page and add a barcode scanner image for better UI. Then add a button under the image.Click on the button and open logic canvas. From the left panel find the barcode scanner and import to the button logic canvas. In the properties of Scan Barcode node select ā€œqrā€ as Code type to recognize.Then go to variable page and add an app variable named ā€œappVarBarcodeā€. The reason why we add an app variable is because we want to use the value in other pages too.Add a ā€œSet app variableā€ node to the logic canvas and set value of Barcode to our ā€œappVarBarcodeā€ variable.The assigned value formula for our app variable will be:Ā Ā SUBSTRING(outputs[“Scan QR/barcode”].codeContent, 0,13)Ā Ā So here we got codeContent of barcode scannerā€™s output. The reason why I selected substring only from 0 to 13 is sometimes barcode scanner gets blanc spaces too.Then we direct our app to next page by adding Open Page node. You can create a new page by clicking on page name on upper left corner. And then you can give your next pageā€™s name to “Open Page” nodeā€™s ā€œPageā€ field.My next pageā€™s name is also Product. Now start creating new UI by adding two input fields. First one is for the barcode number and second one is for the product code of the barcode which we will fetch from our data entity.In order to store fetched “Product” data we need to create a page variable. I created a text based page variable named “Product”.First give our ā€œappVarBarcodeā€ app variable as a value of first input field.Second give your page variable “Product” as value of second input field.Next, we need to fetch our data entity and assign value for our ā€œProductā€ page variable. To do this click an empty space on the canvas and open the logic canvas. Add ā€œGet record collectionā€ node to the canvas and bind it with Page mounted event. Select your resource name. For me it is Product (the data entity name in my oData integration).Now give filter condition to get the single data entity which has our scanned barcode number. In my case my barcode number is stored in ProductStandardID field so that I filtered this field. You can think of it as a select statement.Next, we assign the fetched Product field to our page variable Product.To do this you can write a formula to reach out output values of record collection:Ā Ā outputs[“Get record collection”].records[0].ProductĀ Ā Now our application is ready to run.Please comment on this blog post if you have any questions or recommendations.Ā Ā Ā Read MoreĀ Technology Blogs by Members articlesĀ 

#SAP

#SAPTechnologyblog

You May Also Like

More From Author

+ There are no comments

Add yours