Microsoft PowerApps provides an option to add multimedia in the mobile applications. In this blog, I would like to briefly describe how we can use the available media controls in our Apps.
Image: This control is used to display an image from local file or a data source. This control mainly uses Imageproperty where the source of the image is specified.
For example, if we have to display a picture from the web, we need to add an image control in our App screen and then set the Imageproperty to the URL of the picture. We can also show a set of images from records in a data source. Both examples are shown below.
Add Picture: This control is used to load images from local device and then update it to a data source.
When we use an Image control alone, there is no option for the end user to update an image on the mobile device. With the Add Picturecontrol, end users will be able to update an Image control and update the data source in turn.
Add Picture control has 2 parts, outer control (Click once) and inner text control (Click twice). (Note: In the following picture, I have resized the inner text control to distinguish the 2 controls easily)
The following example shows how an Add Picturecontrol can be used.
In a blank screen add an Add Picturecontrol (Note: Make sure the name of inner text control is AddMediaButton1). Below that, add a button and set the Textproperty to Updateand set the OnSelectproperty to Clear(UploadedPicture);Collect(UploadedPicture, AddMediaButton1.Media). uploaded picture will be locally stored in the App under Collections(Content tab > Collections) and this is achieved using collectfunction. The previously uploaded picture will be removed first using Clearfunction. Below the button, add an Image gallery (Insert tab > Gallery > vertical image only) and set the Itemsproperty of the gallery to UpdatedPicture.
Below is the screenshot of the application before and after using an Add Picture control.
Microphone and Audio: Microphone control is used to record sounds and an Audio control is used to play an audio clip from a file or an audio track from a video file or the recording from Microphone control.
Microphone control can record the sound from wherever the app is running and update the data source with this sound. The recorded sound can be locally stored under Collections(Content tab > Collections) and this can be achieved using collectfunction.
Add a Microphonecontrol in a screen and name it Mic1. Select the control and set the OnStop property to Collect(RecordedSounds, Mic1.Audio). The OnStop property determines how the app responds when the user stops recording with a microphone control. By using Collect function in this property, we are telling the application to save the recorded sound in RecordedSounds collection (If RecordedSounds collection is not available, it will be created automatically).
Place a vertical custom gallery(Under Insert tab > Gallery > Vertical (under Custom Gallery)) below the Microphonecontrol, and set the Items property of this custom gallery to the collection: RecordedSounds. In the template of the custom gallery, insert an Audio control and set the Items property of this audio control to ThisItem.Url
Use the preview button to record a sound using Microphoneand play it using Audiocontrol.
Barcode : This control is used to scan barcodes of type code39,Code128, Ean etc., on your mobile device. To test this control, add a Barcodecontrol in a screen and name it Scanner, set ShowLiveBarcodeDetectionproperty to true and BarcodeType property to BarcodeType.Code39(or any other type of barcode that you’d like to scan). Below the barcode control, add a text box which reads the barcode and prints the value. Set the Textproperty to Scanner.Text.
Save and publish the application. On your mobile device (which has camera support), open the app and try to scan a barcode (matching the type you’ve selected in BarcodeType property). The barcode control should be able to scan the barcode and display the barcode text below:
Below picture sows the design and the use of barcode control side by side:
Camera: A control with which the user can click pictures by using the camera on the device. Insert a Camera control to an empty screen and set the OnSelectproperty to Clear(Mypix);Collect(Mypix,Camera1.Photo). Tapping on the camera control will click a picture and the picture will be locally stored in the App underCollections (Content tab > Collections) and this is achieved using collect function. The previously uploaded picture will be removed first usingClear function. Below the camera control, add an Image gallery (Insert tab > Gallery > vertical image only) and set the Itemsproperty to Mypix.
Save and publish the application. On your mobile device (which has camera support), open the app and click a picture (tap once on the camera control). A picture should be captured and shown:
Below picture shows the design and the use of camera control side by side: