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.
SharePoint Online tutorial contents:
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.
To upload the image, go to the Image property from the right panel. Clicked on select an Image.
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.
BorderStyle: This property will set the style of colorImage border. We can set the rule as solid, dotted, Dashed and none.
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 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.
When I have clicked on the camera control then the screen2 page is navigating.
FocusedBorderColor: This property is for when the camera control is focused than the border color of camera control will change.
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.
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.
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.
PowerApps Barcode Scanner:
To add the Barcode Scanner control add from the Insert -> Media -> Barcode scanner.
The barcode scanner is not supported in the web browser, when we have opened on IOS or Android then the control will work.
PowerApps Add Picture Control:
To add the Add Picture Control go to Insert -> Media -> Add Picture.
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.
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.
In the Preview screen when the user move the cursor to the Picture then the tooltip message is displayed.
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 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 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
We can set the color from the Color propert. We can set the image from the local syetem from the Image property local system.
You may like following PowerApps tutorials:
- PowerApps Send an Email on Submit Button
- Create a PowerApps App from PowerApps template
- How to Customize SharePoint Online List form using PowerApps
- Microsoft PowerApps: Create Login Screen
- Embed PowerApps in Modern SharePoint Online Site Page
- Display SharePoint Online List Columns in multiple screens in Microsoft PowerApps
- PowerApps submit form to SharePoint Online list
- Microsoft PowerApps Radio Button Example
- PowerApps CheckBox
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.
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com