In my previous blog about image columns in SharePoint, I explained all you need to know about New Image column type in SharePoint online including how to create an image column, how to add image to a list item, where the Images will be stored, etc.

Last year Microsoft added support for displaying images from SharePoint Online/Microsoft Lists to Power Apps canvas apps. Now, Microsoft is adding support for adding, updating, and deleting images from image columns in SharePoint online/Microsoft Lists using Power Apps canvas apps.

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:

1. Create a SharePoint online list and then create an image column in the SharePoint list.

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.

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.

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:

Patch(
    'Logo Universe',
    Defaults('Logo Universe'),
    {
        Title: TextInputControl.Text,
        Image: ImageControl.Image
    }
)

Delete an image from SharePoint image column using Power Apps

You can delete an image from SharePoint image column using Blank() value for image column in Power Apps Patch function:

Patch(
    'Logo Universe',
    Defaults('Logo Universe'),
    {
        Title: TextInputControl.Text,
        Image: Blank()
    }
)

Limitations

1. Images up to 30MB in size are supported while adding/updating images.
2. Below image formats are supported currently while using this feature.

Supported Image formats

Below image formats are supported currently while using this feature:

• JPG and JPEG
• PNG
• GIF
• TIF and TIFF
• HEIC and HEIF
• JPE, MEF, MRW, NEF, NRW, ORF, PANO, PEF, RW2, SPM, XBM, XCF

Release Timeline

• 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).

Learn more

• Power Apps can now display images from SharePoint Online/Microsoft Lists
• Add an image to SharePoint Image columns using Power Automate
• Add/Update image columns in SharePoint/Microsoft Lists using PnP PowerShell

I hope you liked this blog. Please give your valuable feedback & suggestions in the comments section below and share this blog with others.

In my previous blog all you need to know about Image column type in SharePoint online, I explained how to create an image column, adding images to SharePoint list items and where the Images will be stored in SharePoint online site.

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:

• Small
• Medium
• Large
• Full

This feature is associated with Microsoft 365 Roadmap ID 81986.

How this will affect your organization

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.

Learn more

• SharePoint Online: All you need to know about New Image column type
• Add, update, or delete images in SharePoint/Microsoft Lists using Power Apps
• Add an image to SharePoint Image columns using Power Automate
• Add/Update image columns in SharePoint/Microsoft Lists using PnP PowerShell

How to simply add a Separator like below to your custom gallery control?

1. Go to your Gallery (myGallery) and add a rectangle (mySeparator)

2. set the below properties on the rectangle

X= 2
Y= myGallery.TemplateHeight - mySeparator.Height
Width =  myGallery.TemplateWidth - 2 * mySeparator.X
Height= 2

So today I got a question on the PowerApps community on how to display a Pie chart based on DataVerse tables.

So the Scenario is as below, Locations Table and Visits where location is a lookup and on the pie chart we need to display the number of Visits per Location, I thought initially this should be easy the same as it should be on model driven app, so added the pie chart on on the Items I thought it would be as easy as linking it to visits and use the location column in the series but this did not work as expected as the Lookup (Location) was not showing up so I ended up by doing the solution described below, so this is the steps to create the data and do the pie chart!

Let’s Go!

1. I have created a Table called Location Primary column Name is Location Name

2. Visits Table where location is a lookup

 To be able to get the pie chart working I had to do a Join using Add Columns , then Group BY , Then Add Columns again to get the row counts, this is the final expression:

AddColumns(GroupBy(ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName"),"LocationName","myGroup"),"count",CountRows(myGroup))

Let me explain part by part the above Expression:

No. 1 the Join: So We join the table visits with the table Locations and show the new Column in the Location Name

ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName")

 No. 2 Add Grouping by Location and the location group name is myGrouping

GroupBy(ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName"),"LocationName","myGroup")

No. 3 Then add another column to count the grouping

AddColumns(GroupBy(ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName"),"LocationName","myGroup"),"count",CountRows(myGroup))

This yield the below collection as below:

The Pie Chart looks like below:

Hope this is useful!

Reference to Expressions Used to learn more about them:

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-table-shaping?WT.mc_id=DX-MVP-5004221

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-table-counts?WT.mc_id=DX-MVP-5004221

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-groupby?WT.mc_id=DX-MVP-5004221