PowerApps Tip: Capture Multiple Camera Clicks and Show Them As Picture Tiles

One of the most common use case for PowerApps is building inspection apps or audit apps. Users of these apps typically need to capture and see multiple pictures of a site location. Something like following:

Accomplishing this is very easy in PowerApps. Here is your step by step direction:

Step 1: Create a new PowerApps app

Go to web.powerapps.com, sign in with your work or school account, click on Apps menu in the left navigation bar, and then click on “create new app”- an option at the top right:

You’ll get many options to start your app (app from data and start from blank). For this learning exercise, start your app from blank:

You can choose Phone or Tablet layout. I chose Phone layout.

Step 2: Insert a Gallery Control

You’ll now get a blank screen. Insert a Gallery control on the page: (Choose the vertical gallery layout as shown below)

You’ll get something like below on the screen:

Step 3: Change the layout to just show the pictures

Click on Layout -> “Image, title, and subtitle” dropdown:

Scroll down the options of the layout and choose the one that shows just the pictures ( I am choosing the one with 3 columns layout):

Your gallery will now look something like this:

Step 4: Add a Camera control and collect clicked images in a collection

Add a Camera control and put this below the gallery:

In the OnSelect Action of the Camera control, collect the selected picture in the camera in a collection:

Collect(MyPictures, Camera1.Photo)

This assumes that the name of the camera control is Camera1 (essentially as the user clicks on camera, you want this clicked picture to be added to a collection. In the next step you’ll use this as the data source for the gallery.

Step 5: Show the pictures captured in the gallery

Go to Data property of the Gallery from the right pane (or Item property from the top dropdown of properties and actions) and change it to MyPictures (the collection that you created in the previous step)

Ensure that the Image property of the image controls in the gallery is set to ThisItem.Url :

Step 6: Test it now

You are all set now to preview it and test. Click multiple times on the camera control to take different pictures and you’ll start seeing them in the gallery:

Please note that you have to be in preview mode to see it working.

Conclusion and Next Steps

So, hopefully you saw how easy it is to implement this kind of rich media capability using PowerApps. Note that just capturing picture in the gallery or collection doesn’t automatically allow you to save it in the backend storage like Database or SharePoint. You have to do some additional work to make that happen (like store it in Azure Blob Store- Azure’s equivalent of AWS S3). If there is interest, we’ll cover how to do that in future post.