Newly created canvas apps that have a SharePoint data connection and are connected to a list can use controls that can add, update, or delete images from the SharePoint list. To use the same functionality in existing canvas apps, you have to delete the existing SharePoint data connection and then re-add it to refresh the data schema.
Configure SharePoint Form control to add pictures/images
Follow below steps to configure SharePoint Form control in canvas app to add pictures/images to SharePoint lists:
2. Go to make.powerapps.com, create a blank canvas app and add SharePoint list data source.
3. Add Form control in app from Insert > Forms > Edit form
4. Set Data Source property of form control to SharePoint list data source and DefaultMode property to FormMode.New
5. Select form control from tree view, click on Edit fields option from Properties panel at the right side of screen.
6. Add your image column to form using + Add field option on Fields panel and select Add picture as a Control type as shown in below image. Power Apps will add Add picture control inside the data card for image column.
Add image column to form and select “Add picture” as control type
7. Add a button control in canvas app and set it’s OnSelect property to:
SubmitForm(Form1)
8. Now when you run the canvas application, you can select an image from your computer using Add picture control and save it to SharePoint list using SubmitForm() function used in button control.
Add, update, or delete images in SharePoint/Microsoft Lists using Power Apps
Using Patch() function to add/update image column using Power Apps
You can also use the Patch() function to add or update an image in image columns in SharePoint/Microsoft Lists using Power apps canvas apps. You can use similar code as given below on OnSelect property of button control:
Targeted Release: Rollout started in late September 2022 (previously early September 2022) and expected to complete by mid-October 2022 (previously mid-September 2022).
Standard Release: Microsoft will begin rolling out this feature in mid-October 2022 (previously mid-September 2022) and expects to complete it by late October 2022 (previously late September 2022).
At the time I wrote that blog, it was not possible to display the images from SharePoint online/Microsoft lists in Power Apps. But, Power Apps image controls can now display images that are stored in image columns in SharePoint online/Microsoft Lists. The Images in Power Apps can be displayed in four different sizes:
New Power apps that use the SharePoint connector to add a list as a data source may display images from the list if they are present in the list. Existing apps can also be updated to show images.
Release Timeline
Targeted release will begin rolling out in late February (previously early February) and will be complete by early March (previously end of February).
Standard release to all other cloud environments will begin early March (previously early February) and be complete by mid-March (previously mid-February).
What you need to do to prepare
You might want to notify your users about this new functionality and update your training and documentation as appropriate.
This Power Apps tutorial will go over how to use the Power Apps Image control based on various scenarios.
We recently received a request to use the Power Apps image control while working with the Power Apps Canvas app.
It will also show you how to use the Power Apps Image control, which includes the following items:
Power Apps Image control
Power Apps add an Image control
Power Apps Image control properties
Power Apps Image display
Power Apps Image control zoom
Power Apps Image control base 64
Power Apps Image control URL
Power Apps image popup on hover
How to clear a Power Apps Image control?
How to reduce the Power Apps Image size?
How to check whether the Power Apps Image control is blank or not?
How to make rounded corners on a Power Apps Image?
How to hide and show the Power Apps image control?
Power Apps Image control missing
Power Apps Image control rotation
Power Apps Image OnSelect
Power Apps Image control position
Power Apps Image control with dropdown
Power Apps Image control using HTML
How to build an image collection in Power Apps?
How to send image while sending email via Power Apps?
How to set images in Power Apps?
Before working with the Power Apps image control, we should first understand what image control is.
Power Apps Image control
In Power Apps, there are different types of inbuilt controls are available. One is Image control which allows displaying of an image from a local file or a data source.
When we add one or more Image controls to the app, we can display individual images that aren’t part of a data set, or we can integrate images from records in data sources.
We can use HTTPS for all external images to ensure compatibility with modern browsers. External images must be available without the need for authentication.
Power Apps add an Image control
Now, we will see where to find this control and how to add this to the Power Apps canvas app. The required steps are:
Open your desired Power Apps canvas app or build a new blank canvas app.
Navigate to the Insert tab.
Expand Media and there we can find the Image control.
To add the control to the screen, click on it.
Power Apps add an Image control
We can see it will appear with the Sample image as shown above. This is how to find and add an image control to the Power Apps screen.
We can find the different types of properties under the Image control. These are:
Image: The image’s name or URL, as displayed in an image, audio, or microphone control.
ApplyEXIFOrientation: Whether to apply the orientation specified in the EXIF data integrated with the image automatically.
AutoDisableOnSelect: While the OnSelect behavior is running, the control is automatically disabled.
CalculateOriginalDimensions: Allows the OriginalHeight and OriginalWidth properties to be used.
FlipHorizontal: Whether the image should be flipped horizontally before being displayed.
FlipVertical: Whether the image should be flipped vertically before being displayed.
HoverBorderColor: When the user keeps the mouse pointer on a control, the color of its border changes.
FocusedBorderThickness: When control is focused, the thickness of its border is.
HoverFill: When the user keeps the mouse pointer on a control, the background color changes.
ImagePosition: The position of an image in a screen or control (Fill, Fit, Stretch, Tile, or Center) if it is not the same size as the image.
ImageRotation: How to rotate an image before it is displayed. None, clockwise (CW) 90 degrees, counter-clockwise (CCW) 90 degrees, and clockwise 180 degrees are possible values.
OnSelect: When a user taps or clicks a control, actions are taken.
PaddingRight: The distance between the text in a control and its right edge.
RadiusTopLeft: The distance between text in a control and the control’s left edge.
Transparency: The extent to which the controls behind an image are visible. The decimal value range is 0 to 1. Where 0 means opaque, 0.5 means semi-transparent, and 1 means completely transparent.
OriginalHeight: The original height of an image when the CalculateOriginalDimensions property is enabled.
Power Apps Image display
Now we’ll look at how to upload images to the Power Apps screen and display them using the Power Apps Image control. That means we will see how to use the Power Apps Image control to display an image within the Power Apps screen.
We are going to display a local image file using the Power Apps Image control. To achieve this, the following steps are:
On the Power Apps screen, navigate to Media.
Click on Upload and upload an image from the local system.
Power Apps Image display
Add an image control to the Power Apps screen.
Insert the image’s name (i.e., Moon) on the Image’s Image property.
Image = Moon
Once we insert the image’s name, the image will display on the Power Apps screen.
PowerApps image display from local storage
This is how to display an image from the local storage via PowerApps image control.
Power Apps Image control zoom
In this section, we’ll look at how to use the zoom property in the Power Apps Image control. This means we’ll look at how to zoom in and out of a Power Apps Image control. For this, we are going to use the above moon image and the following steps are:
Solution1: Using slider with expression
By using a slider control with some specific expressions on the Power Apps screen, we can able to perform the zoom operation on the image control.
On the above Power Apps screen, add a slide control and place the control under the image control.
Power Apps Image control zoom
Select the image control and insert the below expression on the image’s Height property.
Height = 2 * Slider1.Value
where Slider1 is the name of the Power Apps slider control name.
How to add a zoom function to a Power Apps image control
Also, insert the above same expression on the image’s Width property.
Width = 2 * Slider1.Value
How to zoom in and zoom out on Power Apps Image Control
That’s it. We can see the picture will zoom in and zoom out according to the Power Apps slider control. Let’s slide the slider control and modify the value to 55, and the image will represent as below:
PowerApps Image control zoom
Similarly, increasing or decreasing the slider value causes the image on the Power Apps screen to zoom in and out. This is how to work with the zoom operation on the Power Apps Image control.
There is another way to work with the zoom property on the Power Apps image control. For this, we will set a variable value and use that variable to zoom the image control on the Power Apps screen.
For this, we are going to use the above example of the Power Apps image control and slider. The following steps are:
On the above Power Apps screen, insert the below expression on the slider’s OnChange property.
OnChange = Set(VarZoom, Image_Slider.Value)
Where VarZoom is the name of the global variable and Image_Slider is the name of the Power Apps slider control.
Power Apps Zoom an Image Control
Insert the below expression on the Image control’s Height and Width properties as shown below:
Let’s preview the app and slide the slider control (Ex: 35). We can see it will zoom out the image as shown below:
How to zoom a PowerApps image
This is how to zoom a PowerApps image control.
Power Apps Image control base 64
In this section, we will see how to get the base64 code from a Power Apps image control. For this, we are going to use the above example of the image that is displaying on the Power Apps screen, and the following steps are:
On the Power Apps screen, add a button control.
Insert the below expression on the button’s OnSelect property. As a result, when the user clicks on the button the Base64 code will generate.
We can see the respective image will display within the Power Apps screen as shown below:
Power Apps display Images from URL
This is how to display an image from the URL within the Power Apps Image control.
Power Apps image popup on hover
In this section, we will see how to pop an image control on hover within the Power Apps screen.
Currently, there is no such “OnHover” property available in the Power Apps Image property to pop up the image on mouse hover. But we can achieve our requirements by following another method.
The following steps are:
On the Power Apps screen, add a Horizontal gallery.
Set the Layout as Title and subtitle.
On the gallery’s Items property insert the uploaded image names.
Items= [Moon, Sun]
Now the image will display on the Power Apps horizontal gallery.
Power Apps image popup
Resize the height and width of the image control inside the gallery to fit the images.
Select the gallery and set the Transition as Pop.
Tansition = Transition.Pop
Power Apps image popup on hover
That’s all. Preview the app now. We can see, when we hover the mouse over the image, the respective image will pop out.
This is how to pop up an image control on mouse hover within the Power Apps.
In this section, we will discuss how to reset the Image control within the Power Apps. Assume there is an image in a certain app and we want to reset or clear it before uploading a new one. In this case, we can use the PowerApps Reset property.
But unfortunately, there is no such Reset property available in the Power Apps Image control. To achieve this requirement, we are going to use the Power Apps Add Picture control (under Insert > Media) instead of the Power Apps Image control.
By default, it will appear with a sample image as shown below:
Power Apps reset Image control
By clicking on the above control while holding down the Alt key, we can now add a picture from the local drive. Suppose, we will add a picture from the local system.
Power Apps clear Image control
We’ll add a button control to reset or clear the above image. As a result, when the user clicks the button, the above control is reset and the user is able to insert a new image.
Insert the below expression on the button’s OnSelect property.
OnSelect = Reset(AddMediaButton1)
Where AddMediaButton1 is the name of the button control under the “Add Picture” control.
PowerApps clear Image control
Preview the app. Once the button is clicked, we can see the control will reset the image and display the sample image.
PowerApps Reset Image control
This is how to reset an Image within the Power Apps.
Power Apps reduce Image size
Here, we will see how to reduce the image size within the Power Apps image control. To reduce the image size, we can resize the height and width of the image control.
Also, we can use a slider control to increase and decrease the image size respectively. Recently, we have discussed how to reduce the image size via a Power Apps slider. You can get its answer by referring to the above topic (Power Apps Image Control Zoom).
Power Apps Image rounded corner
By default, while displaying the image via Power Apps Image control, it comes with a rectangular corner. As per the requirement, we want to convert the image to a rounded corner. The following steps are:
Assumes, we are going to display the logged-in user’s image in a Power Apps image control. For this, insert the below expression on the image control’s Image property.
Image = User().Image
Power Apps Image rounded corner
To convert this image into a rounded corner, the following steps are:
Set the image’s height and width values to the same. (Ex: 220 as per our screen)
PowerApps Image rounded corner
There are 4 radius properties available within the Power Apps Image control. Such as RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, and RadiusTopRight.
Insert the below expression on the RadiusBottomLeft property.
RadiusBottomLeft = Image8.Height
Creating Rounded Images in PowerApps
Similarly, insert the above expression on the rest radius properties.
Here’s how to show whether the Power Apps image control is blank or not. Consider the following scenario: if the Power Apps image control is blank, the specific button control and text will be disabled; otherwise, the user will be able to click and the text of the button will change.
To work with this scenario, the following steps are:
On the Power Apps screen, add an image control. Add an image to display on the image control.
Add a button control to the screen and place it under the image control.
Power Apps Image control blank
Insert the below expression on the button’s DisplayMode property to enable and disable the button based on image availability.
Similarly, insert the below expression on the button’s Text property to change the button’s name accordingly.
Text = If(IsBlank(Image1.Image), "Its a Blank Image", "Yes Image is there")
Power Apps check Image control is blank
That’s all! We can see as an image is already there so it enables the button as well as the button’s text.
Remove the image from the Power Apps image control or change the image’s Image to None. As we can see, it will disable the button and change its name.
How to determine if a Power Apps Image Control is empty
This is how to determine if a Power Apps Image Control is empty or not.
Power Apps hide image control
Would you like to hide the Power Apps image control with a button tap? If yes, then here is the solution. In this section, we will discuss how to hide and show a specific image with a single click. The following steps are:
On the Power Apps screen, add an image control and display an image.
Also, add a button control to the screen and place it under the image as shown below:
Power Apps hide image control
Insert the below expression on the button’s OnSelect property.
Where VarHideImage is the name of the variable and ‘!VarHideImage‘ is the value of the variable.
PowerApps hide image control
Update the variable name on the visible property of the Power Apps Image control.
Visible = VarHideImage
Use a button to Show and Hide Power Apps image control
Again, insert the below expression on the button’s Text property.
Text = If(VarHideImage=true,"Hide","Show")
Power Apps show and hide image control
Let’s take a look at the app. We can see the image will be visible while clicking on the button and the name will be changed to “Hide“. Similarly, when we press the button again, the image is hidden and the name is changed to “Show,” as shown below:
Power Apps image control hide and show
This is how to show and hide the Power Apps image control with a button tap.
The most common problem is that the SharePoint Picture field does not appear in the PowerApps.
That means we have a SharePoint list that includes a picture field. We added a hyperlink in the picture field for each item in the list that points to a picture stored in SharePoint’s “pictures” library.
However, when we added this field to the Power Apps in Gallery and Form using an Image Control, they no longer appear. Furthermore, the images never appeared on mobile devices.
Resolution:
While working on this, keep the following points in mind:
Please ensure that the image files are not deleted from the specified SharePoint Document Library and that the file name is not changed.
You must ensure that the URL Link you entered in the Picture field points to the correct image file in the respective SharePoint Library.
The most important thing to remember is that the images will not appear on any mobile device. Actually, this is a known issue with image files stored in SharePoint Site images that require SharePoint authentication are not yet supported on mobile devices. This problem has not been resolved.
You can also remove the SharePoint List connection from the app, then re-add a new connection to the respective SharePoint List from the canvas app to see if the problem has been resolved.
Also, consider an alternative solution as the data source, and add a connection to the specified Document Library (Ex- Pictures) within the canvas app.
PowerApps Image control missing
While connecting this library to the Power Apps, sometimes it may not display the images within the gallery as shown below:
Missing Power Apps Image control
To get rid of this situation, set the Image control’s Image property to the following expression within the Gallery:
Image = LookUp(Pictures, 'File name with extension' = ThisItem.'File name with extension').Thumbnail.Medium
After you enter the above code, the image will appear in the Gallery on your PC and mobile device.
Power Apps Image control is not showing in Gallery
This is how we can handle the situation if the Power Apps image control is missing.
Power Apps Image control rotation
In this section, we will see how to rotate an image control within the Power Apps. That means, we can rotate an image as per the requirement with a single tap such as:
ImageRotation.None: If you choose this option, the image will appear in its normal position or will not rotate. It will be None by default.
ImageRotation.Rotate180: When we select this option, the image will be rotated 180 degrees.
ImageRotation.Rotate270: When we select this option, the image will be rotated 270 degrees.
ImageRotation.Rotate90: When we select this option, the image will be rotated 90 degrees.
Now, we will create a Power Apps radio control with rotating options for this purpose. When the user selects a radio control option, the image rotates accordingly. To work with this requirement, the following steps are:
On the Power Apps screen, add an image control that displays an image.
Add a radio control. Insert the below expression on the radio control’s Items property.
Where VarRotation is the name of the UpdateContext variable and Radio1 is the name of the Power Apps radio control.
How to rotate a Power Apps image on the screen
Update the context variable name on the image control’s ImageRotation property.
ImageRotation = VarRotation
Power Apps Image rotation
That’s all! We can see that when we select any option from the radio control, the image rotates accordingly.
PowerApps Image control rotation
This is how to rotate a Power Apps Image control.
Power Apps Image control OnSelect
In this section, we will see how to work with the Power Apps Image control OnSelect.
That means when a user selects an image from the Power Apps gallery, the background of the selected image changes, and the user is notified of the value of the selected image via Power Apps notification. To implement this, the following steps are:
Assumes we have prepared a Power Apps gallery that displays some images shown below:
Power Apps Image control OnSelect
To determine the selected image from the gallery’s item by its background, insert the below expression on the gallery’s TemplateFill property.
Similarly, to notify the selected image’s value on the notification bar insert the below expression on the Image control’s OnSelect property in the gallery.
That’s it! Let’s preview the app and select an image from the Power Apps gallery. We can see that the selected image will look like this:
Change the background of Power Apps Image OnSelect
This is how to work with the Power Apps image control using the OnSelect property.
Power Apps Image control position
Under the Power Apps Image control, there is a property named “ImagePosition” that allows the position of an image in a screen or control (Fill, Fit, Stretch, Tile, or Center) if it is not the same size as the image.
We’ll go over all of those parameters and see how the image is displayed within the Power Apps Image control.
Fill: The image fills the entire selected size. The image is proportionally scaled. Crops the image as necessary.
ImagePosition = ImagePosition.Fill
Power Apps Image control position fill
Fit: Fits the entire image into the given dimensions. The image is proportionally scaled. The image is not cropped.
PowerApps Image control position Fit
Stretch: The image fills the entire specified size. As needed, it stretches the image disproportionately. The image is not cropped.
PowerApps Image position
Tile: The image is repeated across the control until it reaches the specified size. The image is not scaled. Crops the image as necessary.
Power Apps Image position
Center: The image is centered in the control. The image is not scaled. Crops the image as necessary.
Power Apps Image position center
This is how to customize the Power Apps Image control position.
Power Apps Image control with dropdown
In this section, we will see how to work with the Power Apps Image control based on the drop-down control. That means when the user selects any item from the dropdown control, the respective image will display on the Power Apps Image control.
For this the following steps are:
On the Power Apps screen, add an Image control.
Again, add a dropdown control to let the user select the items from the dropdown control.
Insert the below expression on the dropdown’s Items property:
Items = ["Blackhole", "Moon", "Sun", "Galaxy"]
Power Apps Image control with dropdown
Insert the below expression on the image control’s Image property.
Image_DD is the name of the Power Apps dropdown control.
“Blackhole”,“Moon”, “Sun”, and “Galaxy” are the choices of the drop-down control.
Blackhole, Moon, Sun, and Galaxy are the names of the image that are uploaded via the media gallery.
PowerApps Image control with drop-down
Let’s save the app and preview it. Select any item from the dropdown control (Ex: Galaxy). We can see the respective image will display within the Power Apps image control.
PowerApps Image control with dropdown
This is how to work with the Power Apps Image Control using the dropdown.
Power Apps Image control using HTML
Have you ever looked into using HTML tags to display images within Power Apps? If not, we’ll show you how to use HTML tags within the Power Apps image control here.
We can display an image in the Power Apps HTML Text control because it supports the tag as well as the image URL.
To display an image using the HTML Text control, the following steps are:
On the Power Apps screen, add an HTML Text control.
Insert the below expression on the HtmlText property of the control.
HtmlText = "<Center>Show your <b><font color=blue>HTML</font></b> text here.<p>
<img src=""https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTf8peeAQ8Jbw4lowjdYM9OYVJFJr8EwgGNTsJ6BtbqPdNHWz2m""
alt=""Testing"" width=""300"" height=""100""></p></center>"
We can see that once we inserted the above HTML formula, the image will display within the HTML text control as shown below:
Power Apps Image control using HTML
This is how to display an image using HTML tags within Power Apps.
PowerApps image collection
In this section, we will see how to build an image collection within the Power Apps. Suppose, we are going to build an image collection on the screen’s OnVisible property. As a result, when that particular PowerApps screen will visible, an image collection will be created immediately. Additionaly, we will display that image collection on a gallery.
To work with this scenario, the following steps are:
On the Power Apps screen, insert the below expression on the screen’s OnSelect property.
ImageCollection is the name of the collection to collect the images.
Img, and Title are the name of the collection headers.
Sun, Moon, Galaxy, Flower, and Blackhole are the name of the images that are uploaded to the Power Apps.
“Sun”, “Moon”, “Galaxy”, “Flower”, and “Blackhole” are the title of the images.
Power Apps Image collection
Let’s save and publish the app. Reopen that Power Apps screen (or you can close the app and reopen it). We can see the image collection has been created in the Power Apps.
PowerApps Image collection
Let’s display this image collection on the Power Apps screen via a gallery.
Return to the Power Apps screen and add a vertical gallery to the Power Apps screen.
Connect the vertical gallery to the Power Apps collection (ImageCollection) and the result will appear as below:
Create Image collection in Power Apps
This is how to build an image collection within the Power Apps.
In this section, we’ll look at how to use Power Apps to send an email with an image. That means, while sending an email to a user via Power Apps, we can attach an image with that email.
For this the following steps are:
On the Power Apps canvas app, add a Email Screen. Go to New Screen > Templates > Email. An email screen will appear on the Power Apps screen.
Power Apps email Image
To add the image while sending an email, add a Add Picture control to the screen and place the control besides the Message control.
Adding images to email body from PowerApps
Inside the Add Picture control, select the AddMediaButton control and insert the below expression on the OnSelect property.
ColImages is teh name of the collection to collect the images.
Name, and ContentBytes are the names of the collection’s headers.
‘New-Year-Eve’ is the name of the image.
UploadedImage2 is the name of the image control.
How to send image via Power Apps email
Next, select the send icon on the top of the Email Screen. We can find some default expression on the OnSelect property of the send icon there. Let’s modify that expression by adding the collection’s name (ColImage).
OnSelect = /*Create semicolon separated list of people to email, send the email, reset subject & message fields*/
Set(
_emailRecipientString,
Concat(
MyPeople,
Mail & ";"
)
);
Office365Outlook.SendEmail(
_emailRecipientString,
TextEmailSubject1.Text,
TextEmailMessage1.Text,
{
Attachments: ColImages, //Added the collection name
Importance: "Normal"
}
);
Reset(TextEmailSubject1);
Reset(TextEmailMessage1);
Clear(MyPeople)
Power Apps send image in an email
That’s it. Let’s preview the app and send an email to a user with an image. Click on the send icon to send the email to the specified user.
PowerApps email Image
It will send an email to the user on the Outlook as below:
Image with email in Power Apps
This is how to send an email with attaching an image in Power Apps.
Power Apps set Image
In this section, we’ll look at how to use the Power Apps set image. That is, we will set different types of images that will be displayed when a button is pressed. As a result, when the user clicks the button, the Power Apps will display a different type of image each time.
For this, the following steps are:
Let’s create a collection to store the images when the app will start. On the Power Apps canvas app, insert the below expression on the Apps’ OnStart property.
Where, ImageIndex, and SelectedImage are the names of the variables.
Power Apps image set
Next, add an image control and set the variable name on the image control’s Image property.
Image = SelectedImage
Where SelectedImage is the name of the variable that we have created.
Set images in Power Apps
Let’s publish and then exit the app. We can see the image on the image control after reopening it. We can also change the images by clicking the button.
PowerApps set images
This is how to set the images within the Power Apps.
Conclusion
From this Power Apps Tutorial, we got fundamental ideas about Power Apps image control such as:
Power Apps Image control
Power Apps add an Image control
Power Apps Image control properties
Power Apps Image display
Power Apps Image control zoom
Power Apps Image control base 64
Power Apps Image control URL
Power Apps image popup on hover
Power Apps clear Image control
Power Apps reduce Image size
Power Apps Image control blank
Power Apps Image rounded corner
Power Apps hide image control
Power Apps Image control missing
Power Apps Image control rotation
Power Apps Image control position
Power Apps Image control with dropdown
Power Apps change Images based on the value
Power Apps Image attachment
Power Apps add media with Image control
Power Apps Image control default
Power Apps Image control using HTML
How to build an image collection in Power Apps?
How to send image while sending email via Power Apps?
Connexion
