【PowerApps】How to set up a camera feature in a PowerApps app (Add Picture Control)
This article demonstrates how to set up the Add Picture Control, how users would use it in their mobile device. It’ll also explain ‘Collection’ where you can temporarily store your image in your app.
(Duration: 6:17)
Setting up a camera in your app.
Hi, this is Mike Negami, Lean Sigma, Black Belt.
We are now working on a video series for an Approval Workflow System building with PowerApps and Microsoft Flow. ⇒”【PowerApps】Microsoft Flow Basics & Approval Workflow Improvement Project”
Since you can deliver much more information with images than texts, you can achieve innovative process improvement with the camera function.
Let’s arrange parts of the app screen first. If you would like to know how to use PowerApps basics, click the next link and watch the video. ⇒”【PowerApps】PowerApps Studio Screen Basics”
I added a Drop-down control to select an application type, and added a Text Input Control to input an application budget. There are other articles about these controls:
⇒”【PowerApps】How to use a Drop down Control and the difference from a Combo box (Short Video)”
⇒”【PowerApps】How to use a Text input Control and its properties (Short Video)”
How to use the Add Picture Control
Now for today’s main topic: the installation of the camera feature. From the menu bar, select ‘Insert’, ‘Media’, and ‘Add Picture Control’, and place it at the desired location and size.
However, you can’t reach to the camera from a PC. You can only select existing pictures. When you do it on your phone, you have options for whether to take a picture or to select an existing picture from the library. Here, I’ll select ‘Take Photo’ to take a photo.
If you tap on ‘Retake’, you can take it again. When I tap ‘Use Photo’, that photo appears on my app. If you tap ‘Change Picture’, you can do so.
These handy features are already built into the Add Picture Control. Because there are many features in PowerApps like this, you can create apps easily and in a short time. We’ve completed arranging all the parts now.
Save the image to the Collection temporarily.
Looking at the list of controls on the left pane, the Add Picture Control consists of two parts. The 2nd one is ‘Image Control’, which outputs the image taken earlier in its ‘Image’ property.
Look at the formula, you can see that that image is stored in the ‘Media’ Property of the Add Picture Control.
If you need only one photo, you can do other work using the Media Property, but if you want to use more than one, you have to save the picture somewhere else. Otherwise, when you take the next picture, the previous one would be deleted.
PowerApps allows you to temporarily keep your data in the app’s memory called ‘Collection’. I also made a short video about this. Long story short, you can use the Collect Function to save data in Collection.
I made a button called ‘Next Picture’ here and I’ll put a command formula in its OnSelect Property. Then, when you tap the button, the command will be executed. So, we’ll use the Collect Function here.
As you type a function name like Excel, available function names and data names will appear, so it’s better to select one from them.
After choosing a function, you can see its necessary argument structure above. This is my formula with the Collect Function. This formula means ‘Save the photo you took in the collection named MyPix and it will be saved in the column of ‘Photo’.
You can put names of MyPix or Photo freely as you like. I put a semicolon after the Collect Function so that you can put other commands. The next Reset Function initializes the Add Picture Control.
Besides clicking the triangle icon above, you can easily preview your app by pressing the ‘Alt Key’ on your keyboard.
Review saved pictures using the Image Control.
Pressing the ‘Next Picture’ button, you can see that the camera has been initialized.
Then, was my picture actually saved?
On the menu bar, select ‘View’ and ‘Collection’, then you’ll see a list of collections made in this app. Select ‘MyPix’. We see that something is stored in the ‘Photo’ column, but I’m not sure if it’s my picture. There is a way to check it.
Select ‘Insert’, ‘Media’ and ‘Image’ control. Use its Image Property to select a picture to output. Just putting the MyPix collection [ Image Property =MyPix ] doesn’t show any picture.
This time the collection has only one data item, but the collection is a table, which means a collection of data, so we need to specify which data.
There are a few ways to do it. I’ll use the First Function. This specifies the top data in the table. Close the parentheses and put a dot and the column name, ‘Photo’. My picture appeared, so I confirmed that my picture is saved in the collection.
With this camera function in your app, you will be able to use it for checking things remotely or recording information in pictures and referring to them later, which we couldn’t do until now. Indeed, you can achieve process improvement innovation with this.
“See these other popular articles.”
