Whether you are building your first Power App or looking to get your own child or class started with Power Apps, this is hopefully a great place to start learning by doing. I was challenged by my 9-year-old daughter, Emily, to build a Power App with her and create a YouTube video(s). This marks the first of a few articles demonstrating how to get started with a basic application that will teach you the basics of Power Apps. It is based on a simple data source, an Excel Spreadsheet. It will enable those with basic access to Power Apps, the ability to create the solution. In an ideal world, you would use a Microsoft List or, if licensed, a DataVerse Table(s). As my daughter will be building her solution on her Glow Scotland Education Tenant where she is licensed for Power Apps, she cannot create Teams (for Teams DataVerse or a Microsoft List) and I didn’t want to run the risk of building Custom Tables in the Glow Default Environment. If none of this makes sense, don’t worry as I will try to drop the technical lingo going forward – any questions please ask.

Emily’s idea is an app that enables her and her classmates to view a list of objects, with a title, description, and image. Then by selecting the object, they will be able to go on a treasure hunt, take a picture via the device camera, record some notes, create and then view a history of items found. I am hoping that the article and videos that follow will enable other individuals and schools to build the same and use and demonstrate their app on a tablet or similar device.

Getting Started

In this article, Getting Started, we will cover how to:

1. Settting up Excel as a data source
2. Saving object Images to OneDrive to view in the App
3. Setting up the Power App
4. Build our first App Window and therefore view our Object Data

Setting Up Excel as our data source

Apart from the photos displayed in our app, we are going to store the text associated with our app in an Excel File. This will include the object title, description, date/time when an object is found, name of the person hunting for the objects, and some notes on the found object. Below I explain how to set this up.

1. Log on to Office.com and then from the top left, select the “waffle” and click on OneDrive. If you don’t see OneDrive, try clicking on All apps ->.

2. Once you are in OneDrive, click on New, followed by Excel workbook, this will create a new workbook for us to store our data.

3. Before we go any further, we want to name our Excel File to something recognizable. I would recommend something like “TreasureHuntApp-MyData”.

4. We now need two sheets, the default one is called Sheet1, double click and rename to FindMe. This will be the sheet used to store the objects we need to find. Then create another sheet called Found. This will be used to save a table of all the objects we have found!

5. In our FindMe Sheet, create three columns in row 1, Title, Description, and Image.

6. In our Found Sheet, create 5 columns, Date, Name, Title, Photo and Notes.

7. The next step is to turn these two sheets into “Tables”, which will allow our App to talk to the data. We can do this by highlighting all of the words in row 1, navigating to Insert, selecting Table, ticking My table has Headers, clicking OK, selecting Table Design, and giving your table a meaningful name. I suggest the same as your sheet names, FindMe and Found.

8. To complete this setup, I would also recommend that you add a few rows of data to your FindMe table. Your Image column must have the name of the image file that you have uploaded to your OneDrive, so you might need to re-visit this once you have completed the next step. Your finished table might look like follows:

Remember these are objects you want to find or photograph. Maybe you might want to add things like flowers, jotters, footballs, or toys. You do not need to add anything to your Found sheet/Table as that will be used from within the App when storing the success of each treasure object found.

We have now set up our excel data source and can close down the excel file.

Saving object Images to OneDrive to view in the App

Back in OneDrive, we are going to set up a folder to store our object images AND the images that we capture via the app.

1. From within OneDrive, select New, followed by Folder. When prompted, give your folder a meaningful name, like “GamePhotos“

2. Based on the objects you wish to hunt for, use something like google or bing images to search for appropriate images. You must then rename them and save them to your new OneDrive folder. It is really important that your file names match your image column in the Excel Table (step 8 – Setting Up Excel as our data source)

Your One Drive Folder should look something like the following:

Setting up the Power App

By clicking on the “waffle” from Office.com, you will hopefully have access to PowerApps, failing that try clicking on All App ->. Still no Power Apps? Try navigating to https://make.powerapps.com.

1. Assuming you have safely made it onto the Power Apps site, you can get started by clicking on Apps (on the left-hand navigation bar), followed by New App and then Canvas.

2. Next we must give our App a meaningful name, let’s go for TreasureHuntApp-YourName. The reason that we must add YourName to the end is that we are building these apps in the same space. We cannot all create an app called TreasureHuntApp. Adding our name to the app name will make it easier to identify and allow everyone to potentially build their own version if you are running this in a class.

3. Next we must connect our app to our Excel Worksheet as it doesn’t know where to get the data from. Click on the cylinder icon (which represents our data), click on add data and type “excel” into the select a data source field. You should hopefully be able to select Excel Online (**NOT** Import from Excel). If you click the wrong one, just cancel and try again. You might need to add a connection at this point or select an existing, make a choice and follow the prompts and next we will choose a location.

4. Choosing a location – simply choose “OneDrive for Business“, followed by “OneDrive“. This should then list the Excel files on your OneDrive. GO ahead and select the file that you created earlier. It will be called TreasureHuntApp-MyData.xlsx if you followed me exactly per step 3 of Setting Up Excel as our data source

5. You will now be prompted to select the tables you wish to connect with, select both, and press Connect

6. Finally, you will be asked about inserting unique identifiers, simply select Connect and accept the default selection of inserting auto-generated Ids.

7. Your two tables should now be visible in Power Apps via the Data Icon.

Build our first App Window and therefore view our Object Data

This is it, if you have made it this far, we will be viewing our object images, the titles, and descriptions of our objects very shortly.

1. First, we must navigate off of our Data icon and select the Tree Viewer icon (from the left hand side). We can then rename our default screen, Screen1 to “Find My Treasure Screen”. To rename your screen, double click OR right click on the screen1 name and select rename.

2. We are now going to insert our first Control into the app. From the Insert menu, select Gallery and then Vertical

3. Next we must select our data source, in this case we want to display the data from the table named FindMe.

You will hopefully now see the following on-screen:

4. Editing a Gallery (which is the name of the Control we have inserted – I am trying not to get technical), means that we must edit the TOP version of the control. Based on my example above, we edit the control values on the cat object. We want to select the heading “Usually a pet, but can also be a” and from the function bar, change the default value of ThisItem.Description to ThisItem.Title. Similarly, select the value cat.jpg and change the default value from ThisItem.Image to ThisItem.Description. You have now edited some basic code. I demonstrate how to do this below.

5. The final step of this article is how to get the Photo Image to appear and you will notice above that I selected the Image Control and highlighted the expression SampleImage. We want to replace that with a combination of your own personal OneDrive URL and ThisItem.Image.

When you are working on your OneDrive, you can see your URL by looking at the browser address bar. It will look something like follows:

You want to add /Documents/GamePhotos to the end of this URL to get the path for your images (Step1 of Saving object Images to OneDrive to view in the App).

https://glowscotland-my.sharepoint.com/personal/gw28childsname_glow_sch_uk/Documents/GamePhotos

If you pay attention to the image below, you must surround/encapsulate your URL in double-quotes, insert an AND in the form of an &, and then include the piece of code for ThisItem.Image. This will allow the Power App to add the image name that you added to the table in Step8 of Setting Up Excel as our data source and display your image like below.

Trouble Shooting

If you have a question, please leave a comment and I will add it to the troubleshooting guide here. I guess the most common one will be that images are not displayed. A few things to check:

1. Have you saved your images with exactly the same name as you have supplied in your table in excel?
2. Have you include .jpg extension with the file name?
3. Have you got your OneDrive Link correct and does it include the folder path you created?
4. Drop me a message with the error and I will see how I can help.

Good Luck and please bookmark this page for the next stage – extending the app to allow you to search for and capture your treasure finds!