PowerApps Media Control

In this Microsoft PowerApps tutorial, I will explain how to use PowerApps media control. We will discuss how to add PowerApps video control, how to add PowerApps image control. What are various properties available in various PowerApps media control?

If you are new to Microsoft PowerApps, learn a PowerApps tutorial on Create your First form using Microsoft PowerApps in SharePoint Online.

PowerApps image control

Image control is used to upload an Image to the PowerApps page from the local system and browser.

Check Out Microsoft PowerApps and Flow Training Course Videos (Lifetime Access)

Go to Insert -> Media -> Image.

powerapps sharepoint images
powerapps sharepoint images

To upload the image, go to the Image property from the right panel. Clicked on select an Image.

powerapps sharepoint images
powerapps sharepoint images

It contains some of the Property below:

BorderColor: This property will set the Border color for the Image. Here I have set the color to red, so our image border will come in a red color.

powerapps image from url
powerapps image from url

BorderStyle: This property will set the style of colorImage border. We can set the rule as solid, dotted, Dashed and none.

powerapps sample image
powerapps sample image

We can add the image from the browser, then select the “Image” Property from the property bar and add the image URL in the formula bar.

powerapps video
PowerApps video

PowerApps Camera Control

Using the Camera control in PowerApps we can take a photo from our device. To add the camera control go to the Insert->Media->Camera.

OnSelect: This “Onselect” property is for how the app will respond when the user clicks on the camera control.

Here I have selected the property for camera control is “Onselect”. In the formula bar, I have added the formula “Navigate(Screen2,None)”. That means when a user clicked on the camera control the screen2 is navigating.

powerapps camera control
powerapps camera control

When I have clicked on the camera control then the screen2 page is navigating.

powerapps camera control resolution
powerapps camera control resolution

FocusedBorderColor: This property is for when the camera control is focused than the border color of camera control will change.

powerapps camera button
powerapps camera button

Now when the user clicked on the camera control in the Preview page(For the Preview page click on F5 or from the top bar we will get the Preview page), the border color will appear in the red color.

powerapps camera capture button
powerapps camera capture button

We can set the Thickness of the border for the camera control. For the border thickness select the “FocusedBorderThickness” from the property bar and set the value in the formula bar.

powerapps rotate camera
powerapps rotate camera

You may like to read , PowerApps CountIf Function with Examples.

PowerApps Video Control:

We can upload the video using the Video control. We can add the video control from Insert->Media->Video.

Using the height property we can set the height for the video.

We can add image from the image property.

We can set the border color for the video control using BorderColor property.

upload image to PowerApps
upload image to PowerApps

PowerApps Barcode Scanner:

To add the Barcode Scanner control add from the Insert -> Media -> Barcode scanner.

PowerApps add picture control
barcode scanner powerapps

The barcode scanner is not supported in the web browser, when we have opened on IOS or Android then the control will work.

barcode scanner powerapps
barcode scanner powerapps

PowerApps Add Picture Control:

To add the Add Picture Control go to Insert -> Media -> Add Picture.

powerapps add picture to collection
powerapps add picture to collection

We can change the Text property of “Add Picture” control. To change the text, select the Text property of picture control and in the formula, bar add the message which the user can see.

powerapps add picture control

By clicking on the message user can able to upload the picture from the local system.

We can set the Tooltip message for the picture. So I have selected the property as “Tooltip” and write the message in the rule box.

powerapps tooltip
powerapps tooltip

In the Preview screen when the user move the cursor to the Picture then the tooltip message is displayed.

add picture in powerapps
add picture in powerapps

PowerApps Audio Control:

Audio control is used in PowerApps to upload an Audio control from the local system to the PowerApps designer page.

We can add the PowerApps Audio control from the Insert->Media->Audio.

We can upload the audio from the Media property which we can able to find in the left side panel.

When we disabled the “Show control”, then all the control of audio control will hide.

Autostart property is for automaticaly start the Audio no need to click on play button.

After the Audio completed the audio will stop because of the enabling the “Auto pause”. When we enable the Loop then the Audio will play loopwise. When the Audio is fiished again it will start.

We can change the Display mode also. The Display mode is of 3 type Edit, disabled, view. When the Edit is selected we can do the edit operation. But when it is disabled, the control is disabled. When the View is selected user can able to see the control only.

powerapps media control

PowerApps MicroPhone Control:

We can record the audio using the PowerApps MicroPhone Control. To add the MicroPhone go Insert -> Media -> MicroPhone control.

In the Properties tab of Microphone control which we can see in the left side panel. Here we can able to see the Visible property, when user will be disabled the property then the control will hide.

We can set the color from the Color propert. We can set the image from the local syetem from the Image property local system.

powerapps controls
powerapps controls

You may like following PowerApps tutorials:

Conclusion:

In this PowerApps tutorial, we have discussed different types of PowerApps media control. How we can add the different media control and what are the different functionality of each control in the PowerApps. We were discussed some of the Properties of media control.

We discussed how to use PowerApps image control, video control, camera control, barcode scanner, picture control, audio control, microphone control etc.

>