2019-04-16

In this post, we will learn how to develop the Inventory system using SharePoint & PowerApps.

This tutorial consists of 2 parts,

  • Part 1 or I’ll call it as Bahubali Beginning: Create Barcode enabled Inventory list in SharePoint, which tells you step-by-step how to do the data configuration for the Inventory within SharePoint.
  • Part 2 or Bahubali Conclusion (this guide): Utilize SharePoint inventory list in PowerApps for User experience.

Let’s get started…

Create an app in PowerApps

We can create PowerApps directly from a SharePoint List, (as shown below).

Click on the List (in my case “sample inventory”)>PowerApps from list ribbon>Create an App.

SharePoint list

 

Or, go to https://web.powerapps.com/ >Click on Start from data> Create>

 

SharePoint (Phone layout)>

Create Connection if you have not created before else using existing connection and select site in which our list is present.

 

Then select our list ‘Sample Inventory’ (in my case)

 

Hurray, now your PowerApps is successfully configured with SharePoint list data.

Setup PowerApps

Develop the PowerApp

Now let’s develop the PowerApps screens.

Step1: Create the Browse Screen:

Add Barcode Scanner control from ribbon and place it beside the search.

Step 2. Update Browse Gallery’s items

SortByColumns(Filter('Sample Inventory',StartsWith(OData__dlc_BarcodeValue, BarcodeScanner3.Value)),"Title", If(SortDescending1, Descending, Ascending))

OData__dlc_BarcodeValue represents SharePoint fields which hold the Barcode value.

BarcodeScanner3.Value will give value after scanning the barcode.

Change layout of gallery from Properties>Layout

Note: I changed the layout because I don’t have an image to show in the gallery. If your Inventory system stores image for every inventory, then you can use default gallery with the image.

Step 3. Let’s work on Detail Screen.

We display Barcode image we have to change in the property of the control as below.

Select Barcode DataCardValue control>go in Advanced tab> find Image property in Data section and set it to,

Image= "{siteURL}/_layouts/15/barcodeimagefromitem.aspx?ID="&BrowseGallery1.Selected.ID&"&list={listGUID}"

Step 4. In Edit Screen, remove unnecessary fields like attachment etc.

Note: you can have columns according to your requirements in Detail and Edit screen.

Step 5. Save and publish it. (You can give cosmetic touch up as per need)

Let’s test the PowerApp!

To test this, open the “Inventory Management System” (as shown in figure 1), then Scan the barcode from any matching SharePoint items from within the Sample Inventory list.

In the figure below, we’re scanning a bar code for a bookcase (figure 1) and we find it (figure 2).

Hurray 🙂 your application is ready to use. Test the result

(Visited 4,154 times, 1 visits today)

About the author 

Anil Pal

SharePoint | Office365 Developer | PowerApps | MS Flow

Leave a Reply

  1. Hi Anil, I followed your instructions in part 1 and part 2. The only issue that I have is that the barcode scanner value is not correct. I click on the scan button then go to the screen to add the information. In the Sharepoint list the barcode value is not the value of the barcode that I scan.
    I did setup a separate barcode scan app in Powerapps. The barcode scanned value is correct.
    What should I check for??
    Thanks
    Tom

    1. Hi Tom,
      Barcode Scanner is out of box control provided by Microsoft and I believe it should not mismatch scanned value. I would recommend you to remove barcode control and add it again.

      1. Hi Anil,
        I removed and re-added the barcode control.
        The barcode control scans the correct value from the barcode. example the value scanned is 6102675200.
        But when the record gets added to the Sharepoint List by Sharepoint. Sharepoint generates a random 10 digit number instead. example 0352130931.
        I came across this article that talks about what Sharepoint does. (it’s in the middle of the page)
        How to Set Custom value to SharePoint Bar Codes?
        http://www.sharepointdiary.com/2013/09/enable-barcode-on-sharepoint-2013-2010-2007.html?m=1

        I would like to know your thoughts after you read this article and how to get Sharepoint to use the value that was scanned in and not a random generated number.

        Thanks in advance for your help.
        Tom

        1. Hi Tom,
          The overall process in above tutorial is,
          1. Create inventory item/entry which will generate random barcode.
          2. Take print and stick it on material.
          3. Scan this barcode into list to find detail about specific material.

          Your requirement is (Correct me if I am wrong)
          1. You have material with barcode stick to it.
          2. Now you are creating new entry for such inventory and need to store barcode value which is already on material.(not auto generated by SharePoint)
          3. Scan the material barcode to find that items.

          If you are trying develop above mentioned steps, then there is no need of barcode generator in SharePoint. you can directly scan material barcode from powerapps and store scanned value into SharePoint column.
          e.g. Let’s say I created SP column named BarcodeNumber.
          so, BarcodeNumber=BarcodeScanner3.Value
          And is this can be easily searched by barcode control from PowerApps

          About below link, http://www.sharepointdiary.com/2013/09/enable-barcode-on-sharepoint-2013-2010-2007.html?m=1
          1. Unfortunately, this may not possible by out of box functionality in SharePoint Online. There is workaround for this using 3rd party barcode generator.
          2. Yes, we can do for SharePoint onpremise environment by creating event receiver on items.

          1. Thanks Anil for your breakdown explanation. I now understand what the tutorial is doing. And yes, you are correct about my requirement. I’ve learned each day using PowerApps and Sharepoint. Thanks for the tutorials and your help.
            Tom

          2. Anil,
            The barcode image shows when you preview the app in play mode but it does not show on mobile devices after you save and publish the app. All the other info from the SP list is there. What would be preventing the image from not being shown?
            Appreciate your thoughts on what to look for.
            Thanks
            Tom

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

2 Free Ebooks: How to govern Microsoft teams 

Download your 2 free Microsoft Teams governance Ebooks and learn the steps necessary to create a bullet-proof governance strategy.