Exercise - Build an inventory app with SharePoint

Completed

Consider a scenario where you want users within your company, Contoso, to order their own coffee machines. Contoso wants you to build an app that you can share with anyone who handles that process.

In this exercise, you set up a couple of SharePoint lists to store the coffee machine data and the order data. Then, you create a Power Apps canvas app to interact with that data and place orders.

Create the machine list

Your first task is to create the machine list:

1. Download the Machine Order Data Excel file.

2. Go to a SharePoint Online site where you want to store your app data.

3. In the upper-left corner, select New > List.

4. Select the From Excel option.

   

5. Select Upload file and then select the Machine-Order-Data.xlsx file that you previously downloaded.

6. On the Customize page, check that the Machines table is in the Select a table from this file dropdown menu and then select Next in the lower-right corner.

   

7. You can adjust the name of your list, and add a description (optional). Select the Create button to continue. Then wait a few moments for your new list.

Once your new list is done, your browser should automatically navigate to the new list. All the data from your Excel sheet should be loaded and ready for you to use.

Create the orders list

Next, you create the orders list by following these steps:

1. Select the Home option in the upper-left corner, under your SharePoint site name.

2. In the upper-left corner, select New > List.

3. Select Blank list.

4. Name your list Orders-List and then select Create.

   

5. On the Orders-List page, directly under the name of the list, you see a column called "Title". To the right of that is the option to Add column. Select Add column.

6. In the Create a column dialog box, select Date and time and then select Next.

7. Name this column OrderDate and then select Save.

   

8. Select Add column again.

9. Scroll down and select Currency and then select Next.

10. Name this column OrderTotal and then select Save.

Now, you have a SharePoint list that you can use to store order data for the coffee machines.

Create the canvas app

Follow these steps to create the canvas app in Power Apps:

1. Go to make.powerapps.com.

2. Select the Create option on the left.

3. Select Blank app.

   

4. Select the Create option under Blank canvas app.

5. Name your app Contoso Coffee Machine Ordering and then select the Create button.

6. After a brief wait, your screen opens the canvas app editor where you'll design and edit your Power Apps application to interact with your SharePoint data.

   

7. Select the Save icon in the upper-right corner. (By default, Power Apps automatically saves your app every two minutes, but only after the first time that you save manually; therefore, it's always a good idea to save your app after you've created it).

8. Select the Add data dropdown menu.

9. Search for and select SharePoint (the standard SharePoint option, not SharePoint Sites). You might need to scroll down the results to find it. If you don't yet have a connection, select Add a connection. If you already have a connection, then you can select your existing connection and skip the next step to continue.

   

10. For creating a new connection, a panel opens on the right side of the screen. Make sure that the Connect directly (cloud services) option is selected and then select Connect in the lower part of the screen.

11. On the right of your screen, you should now see the Connect to a SharePoint site option which prompts you to enter the URL for the location of your list or you can look under the recent sites to find the SharePoint site.

    The SharePoint site where you created your machine lists should appear from the list of recent sites. You can simply select the site to continue.

    If your site doesn't appear in the list, go back to the site where you created the list and copy the URL (the home screen of the site, not the list page), then paste the URL in the top line of the panel. Once Power Apps identifies the site, you can select Connect to continue.

12. In the Choose a list panel. Select the Machine-Order-Data and Orders-List checkboxes.

13. Select Connect.

    

You've now created and connected your Power Apps application to your data so that you can read and write back to SharePoint directly through the app.

Design the canvas app

Let's design our canvas app by inserting and connecting some controls.

1. Select Insert > Text label.

   

2. Move the label that appears to the upper-left corner of the canvas and then resize it to stretch across the entire canvas.

3. On the right side of the screen, you can edit the control properties in your canvas apps by using a friendly interface and without needing to edit code. With the label still selected, change the text to Contoso Coffee Machine Ordering.

4. Change the Font size to 18.

5. For Text alignment, select center.

6. Next to color, the letter A icon indicates text color and the paint bucket icon indicates the background color of that label. Select the A text color icon and then select white.

7. Select the paint bucket icon and then choose a dark blue (or any other color that you want).

   

   Note

   With most controls, you can adjust settings like fonts, colors, and background colors via multiple means. The Properties panel is one way, but you may also notice these same options appear in the command bar ribbon.

8. In the upper ribbon, select Insert > Vertical gallery.

9. A pop-up window appears, prompting you to connect the gallery to a data source. Select Machine-Order-Data.

10. To adjust the fields, let's try using the command bar ribbon interface. Select Edit fields from the command bar.

11. Make sure that the Subtitle1 dropdown menu shows Price and the Title1 option shows Machine Name. Select outside of the Edit fields dialog to continue.

12. The text that's displaying in your gallery should reflect the machine name and the price along with a "sample image," which we'll fix momentarily. Now, resize the gallery to fit under the header label so that it takes up the left-half of the canvas below your label.

13. Let's replace that sample image so we can show the actual product image. Select the first image icon in the gallery. Just under the command bar ribbon is the fx formula input field where you can write code to change the properties of a control in Power Apps, delete the SampleImage text and then enter ThisItem.Photo.

    

14. Next let's modify the text format of our subtitle field to show currency. Select the Subtitle1 label in the first item of your gallery that shows the price of the item. Notice that you have a grey highlight in the Tree view for this control, and the formula field shows ThisItem.Price.

    

15. In the formula field, modify the Text property to: Text(ThisItem.Price,"$##,###.00"). Immediately you see your Price show dollar signs, thousands separators, and cents.

16. Next, let's add a form to enable us to modify our data. Select the blank half of your editing canvas (to exit the gallery), then select Insert > Edit form.

17. Select the Orders-List as the data source, and Power Apps will populate the form with fields, according to our SharePoint list columns.

18. Reposition and resize the form to fit the right half of your canvas.

    

19. Select the Title card on the form. Notice a padlock icon appears to the left of the card name just above the selected card. We'll unlock the card to customize it. Right select on the selected card, and select Unlock.

    

20. Unlock the OrderDate and OrderTotal cards on the form using the same technique.

21. Select the text input box under Title in your form (unlock it if necessary).

22. Change the Default formula from Parent.Default to Gallery1.Selected.'Machine Name'. You should now see the title for the selected item from the gallery on the left side of the screen.

    Tip

    As you enter your formulas, Power Apps will auto-suggest options as you type. You can select Tab or Enter to select the highlighted suggestion, or scroll through the list to select one. This is completely optional, but it can speed formula creation and accuracy as you get used to it.

23. Select the date picker control under OrderDate and then change the formula for DefaultDate to Today().

24. Select the text input box under OrderTotal and then change the formula to Gallery1.Selected.Price.

25. Select the entire form. In the upper-left corner, the DataSource property shows in a dropdown with the formula input field displaying 'Orders-List'. By selecting this Properties dropdown menu, you can choose any property that's available for a control and change the formula for that control property. In this case, you change the Item property of the form, so select that dropdown menu and then select Item.

    

26. In the formula for Item, enter Defaults('Orders-List'). The Defaults() function tells Power Apps that we're creating a new item for the Orders-List SharePoint list, each time we submit this form.

27. Go to the command bar and select Insert > Button.

28. Drag the button to the right side of your screen under the form inputs.

29. Change the Text property of your button to Submit Order.

30. Change the OnSelect property of your button to SubmitForm(Form1).

Now, you have an app where users can select a coffee machine, preview their order, and submit the order. Your finished app should resemble the following image.

Put your app in preview mode by selecting the Play (triangle) button from the upper-right corner of the command bar (or select your F5 function key on your keyboard). Select a coffee machine and then select the Submit Order button. Return to the Orders-List on your SharePoint list, and you should see the order you created.

Hopefully, this whets your appetite to the possibilities of using Power Apps to interact with SharePoint data. Though this is a basic application, you can add customizations to change the UI/UX to support your business needs.