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

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