In this article, we will learn how we can create bar code with the help of Power Automate and have bar code in SharePoint list as attachment and scan barcodes with the help of Power Apps.
Create Barcode using Power Automate
Step 1
First, we have to go to https://sharepoint.com/, and then we must create a team site as preferable.
Now, create a SharePoint list with the following columns.
Step 2
Now go to https://make.powerautomate.com/ and click on My Flows on the left navigation. You will be able to see new flow on top ribbon from there select automated cloud flow, as shown in the below screen.
Next, give the flow name as preferable and choose flow trigger as when an item is created in SharePoint. Refer below screen.
Step 3
In the "When an item is created" box, provide the site URL and select the list name as "Employeelist".
Step 4
Next, click on "Add an action" then search for "Encodian" and select it.
After that, search for "Create BarCode" and select it.
Next, select "BarCode Type" like code128 or as preferable.
Add "Employee ID" then a separator like "|" and "Full Name" SharePoint Dynamic Values in BarCode Data box as shown in the below screen.
Step 5
Next, click on "Add an action".
Search for "SharePoint". Then search for "Add attachment" and select it.
Step 6
Then add "Site Address", "List Name" and "ID" SharePoint dynamic value.
In "File Name" section, set the file name as preferable as here "Bar-EmployeeID-Name.jpg" With dynamic value.
Step 7
Click on Save Flow.
To test the flow, click on the Test button from the right side of the top menu and click the Run flow button.
Step 8
Now go to "Employeelist" in SharePoint.
Added a name here, The Barcode has been generated as below.
Scan Barcode using Power App
Now go to https://make.powerapps.com/
Next, click on "Create" and select start from Blank canvas app. Give the name of your app and click on create.
Add a Barcode Reader control to the Power Apps screen and give a text to this control (i.e., Click Here to Scan)
Add a Barcode Reader control to the Power Apps screen and give a text to this control (i.e., Click Here to Scan)
Next, add a Power Apps Display Form to the Power Apps screen.
Connect that Display form to the SharePoint data source (i.e., Employee List). Go to the right-side Properties Panel > Fileds > Add fields.
Add all the fields to the Display Form. As a result, the form will appear as shown below:
By default, we don't want to display the above data fields when the app is visible.
The data fields will be visible only when the user scans a valid barcode. To implement this, I have created a variable in the Barcode reader’s OnScan property.
OnScan = Set(VarOnScan, true)
Use the variable “ VarOnScan” on the display form’s Visible property.
Again, insert the below expression on the Screen’s OnVisible control as shown in the below screen.
OnVisible = FormViewer1.Visible = VarOnScan
Next, add a Power Apps text label control and place it on the display form and add texts to the label control, i.e., "Click on The Scanner and Scan the Barcode To Get The Employee Information"
Insert the below expression on the label’s Visible property.
Visible = !VarOnScan
Next, add a Power Apps text label control and place it on the display form and add texts to the label control, i.e., "Click on The Scanner and Scan the Barcode To Get The Employee Information"
Insert the below expression on the label’s Visible property.
Visible = !VarOnScan
To display the scanned item’s information, insert the below expression on the Display Form’s Item property.
LookUp(
EmployeeList,'Employee ID' = First(BarcodeReader2_1.Barcodes).Value
)
Save and publish the app.
Navigate to SharePoint list and create a new item in the list.
Now Open the "Employee list". Click on one of the attachments you can able to find bar code.
Now download the “Power Apps” Mobile Application to test the app you have created.
Now, Open the canvas app you have created via mobile application.
Scan the Barcode.
After scanning the barcode, the Employee information is visible in the display form in your app, as shown in the below screen.