Power Apps Add Picture Control And Save To SharePoint Library -

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-add-picture-control-and-save-to-sharepoint-library/. Author: Matthew Devaney.

Power Apps Add Picture Control And Save To SharePoint Library Posted by - Matthew Devaney on - December 6, 2020 97 Comments

A commonly requested feature of many Power Apps is to allow the user to add a photo. Mobile users want to take a picture using their device’s camera and desktop users want to select an image from a folder to upload it. The Power Apps add picture control can do both. It also provides a better user experience than the Power Apps camera control so I always use it instead.

In this article I will show you how to use the Power Apps add picture control and save the image to a SharePoint Library. Table of Contents Introduction: The Photo Gallery App SharePoint Document Library Setup

Capturing A Photo With The Add Picture Control Reviewing And Captioning A Photo

Uploading A Photo To SharePoint With Power Automate Deleting A Photo Focusing On A Photo In The Gallery Introduction: The Photo Gallery App

The Photo Gallery App is used to store images of cats at a Pet Rescue Shelter. Volunteers at the shelter take a picture of each cat with a mobile device, fill-in the cat’s name and upload the image file to SharePoint. SharePoint Document Library Setup

Start by making a new SharePoint Document Library called Blog Images . Add a text column to the library called Caption . Then place several cat photos with captions inside the library as shown below. Creating The Thumbnail Photo Gallery

Open Power Apps and create a new app from blank. Rename the first screen ‘Thumbnail Gallery Screen’. Then place a label at the top of the screen with the words Photo Gallery to create a header.

Next, insert a new blank vertical gallery into the app…

…with the Items property pointing to the SharePoint Document Library. 'Blog Images' Code language: JavaScript ( javascript )

The photos will be displayed in a grid just like a photo album.

The WrapCount property of a gallery defines how many items are displayed horizontally. Change the code in this property to match below and also edit the TemplateFill property to show a solid grey background. TemplateFill : RGBA(237, 237, 237, 1) WrapCount : 4 Code language: HTTP ( http )

Now we are ready to display our cat images in the gallery as shown below.

Place an image control inside the gallery with the following properties. The image will automatically scale itself to fit the tile. Notice how the grey background gives the app a sense symmetry even though the pictures are different shapes. Height : Parent .TemplateHeight Image : ThisItem .Thumbnail .Large Width : Parent .TemplateWidth Code language: CSS ( css )

Capturing A Photo With The Add Picture Control

Volunteers at the shelter take a picture of each new cat with their mobile device. To do this we will need to access the device’s camera. The Add Picture control is the best way to do this because you can use the device’s native photo app to take high-quality pictures.

Insert a Photo icon and place it in the top right corner of the app.

Then insert an add picture control to the app and position it directly on top of the camera. Make the add picture control invisible by changing the following properties to transparent. Color : Transparent HoverColor : Transparent PressedColor : Transparent Fill : Transparent HoverFill : Transparent PressedFill : Transparent Code language: HTTP ( http )

Ungroup the add picture control and the Image Control underneath it. Move the image control to the bottom of the tree view. We don’t want to see any image when we click the invisible add picture control.

Add this code to the OnChange property of the add picture control to store the photo taken in a variable called varCurrentImage and go to the next screen which we will create in the following section.

Set (varCurrentImage, img_Thumbnail_AddMediaButton.Image);

Set (varCurrentRecord, Blank()); Navigate( 'Single Image Screen' , Fade) Code language: JavaScript ( javascript ) Reviewing And Captioning A Photo

Once a photo is taken the volunteer reviews it and adds the cat’s name. Create a new screen called Single Image Screen with a light grey background and a dark grey footer (by using a label and changing the fill property).

Insert an image control onto the screen called img_SingleImage_Image .

Make it display photo by updating the Image property to varCurrentImage and give it some styling by padding it. Image : varCurrentImage PaddingBottom : 20 PaddingLeft : 20 PaddingRight : 20 PaddingTop : 20 Code language: HTTP ( http )

Place a text input called txt_SingleImage_Caption below the photo.

We want to tell the volunteer to write the cat’s name in the text box. Use this code in the HintText property of the text input. At the same time, update the DisplayMode property so the caption can only be edited for new photos and the Default property to show the caption for a successfully submitted photo. Default : varCurrentRecord .Caption

DisplayMode : If ( IsBlank ( varCurrentRecord ), DisplayMode .Edit , DisplayMode .View )

HintText : If ( IsBlank ( varCurrentRecord ), " Write A Caption ", " [No Caption] ") Code language: CSS ( css )

Complete the menu by adding two icons to the footer: a Check and a Trash icon. Pressing the check icon will upload the photo to SharePoint while the trash icon will remove it. We will code this behavior soon but first we do some work in Power Automate .

Uploading A Photo To SharePoint With Power Automate

There is not any way to directly upload an image from Power Apps to a SharePoint Document Library so we must build a flow to do it instead. Open Power

Automate and create a new flow from instant. Select the Power Apps (V2) trigger and click Create.

Setup the flow trigger with two inputs: Picture (file type) and Caption (text type). Make both fields required .

Then add these flow actions to create an image file is created in the SharePoint document library and apply a caption to the file properties.

Save the flow and return to Power Apps. Click the action tab on the top menu. Then select the flow we made from the list.

Place this code in the OnSelect property of the Check icon. It converts the image to binary so it can read by the flow and returns the volunteer to the gallery once done. // run flow

'BlogImages:UploadPhotoToSharePoint' .Run( {

contentBytes : img_SingleImage_Image.Image,

name : Text(Now(), "yyMMddhhmmss" ) }, txt_SingleImage_Caption.Text ) // next screen

Navigate( 'Thumbnail Gallery Screen' , Fade); Code language: JavaScript ( javascript ) Deleting A Photo

We’re almost done. There are only a few more steps needed to finish the app.

When the volunteer clicks on the Trash icon they should be taken back to the Thumbnail Gallery Screen .

Use this code in the OnSelect property of the icon.

OnSelect : Navigate('Thumbnail Gallery Screen', ScreenTransition.Fade) Visible : IsBlank(varCurrentRecord) Code language: HTTP ( http )

Insert a Cancel icon in the top right corner of the screen. This will give the volunteer a way to close the screen when viewing a previously saved photo.

Put this code in the OnSelect property of the icon.

OnSelect : Navigate('Thumbnail Gallery Screen', ScreenTransition.Fade) Visible : !IsBlank(varCurrentRecord) Code language: HTTP ( http ) Focusing On A Photo In The Gallery

Finally, return to the Thumbnail Gallery Screen .

We must add one more line of code to allow the volunteer to view a photo stored in the SharePoint library.

Select the thumbnail gallery then write this code in the OnSelect property.

Set (varCurrentImage, ThisItem.Thumbnail.Large);

Set (varCurrentRecord, ThisItem); Navigate( 'Single Image Screen' , Fade); Code language: JavaScript ( javascript ) The Photo Gallery app in now completed. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Add Picture Control And Save To SharePoint Library please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Add Picture Control Camera Flow Gallery Control Image Control Matthew Devaney Power Automate

Save Docusign Document To SharePoint With Power Automate