Vue lecture

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
✇Ganesh Sanap Blogs

Add, update, or delete images in SharePoint/Microsoft Lists using Power Apps

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.

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:

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

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

✇Ganesh Sanap Blogs

Add/Update image columns in SharePoint lists using CLI for Microsoft 365

In my previous blog about image columns in SharePoint, I explained how to add or update image columns in SharePoint online lists or Microsoft Lists using PnP PowerShell and Power Automate.

In this blog, I will explain how to create a new list item with image column and update existing list item to update the image column using CLI for Microsoft 365.

Create new list item with Image column

You can use below CLI for Microsoft 365 script to create a new item in SharePoint online list with Image column:

# SharePoint online site URL
$siteUrl = Read-Host -Prompt "Enter your site URL (e.g https://<tenant>.sharepoint.com/sites/contoso)"

# Server Relative URL of image file from same SharePoint site
$serverRelativeUrl = Read-Host -Prompt "Enter Server Relative URL of image file (e.g /sites/contoso/SiteAssets/Lists/dbc6f551-252b-462f-8002-c8f88d0d12d5/CLI-For-Microsoft-365-Blue.png)"

# Get Credentials to connect
$m365Status = m365 status
if ($m365Status -match "Logged Out") {
    m365 login
}

# Get UniqueId of file you're referencing (without this part your image won't appear in Power Apps (browser or mobile app) or Microsoft Lists (iOS app))
$imageFileUniqueId = (m365 spo file get --webUrl $siteUrl --url $serverRelativeUrl | ConvertFrom-Json).UniqueId

# Create new list item with image column
m365 spo listitem add --listTitle "Logo Universe" --webUrl $siteUrl --Title "CLI for Microsoft 365" --Image "{'type':'thumbnail','fileName':'CLI-For-Microsoft-365-Blue.png','fieldName':'Image','serverUrl':'https://contoso.sharepoint.com','serverRelativeUrl':'$($serverRelativeUrl)', 'id':'$($imageFileUniqueId)'}"

# Disconnect SharePoint online connection
m365 logout
Create a new SharePoint list item with Image column in SharePoint online using CLI for Microsoft 365
Create new list item with Image column

Update SharePoint list item with Image column

You can use below CLI for Microsoft 365 script to update existing SharePoint list item with Image column:

# SharePoint online site URL
$siteUrl = Read-Host -Prompt "Enter your site URL (e.g https://<tenant>.sharepoint.com/sites/contoso)"

# Server Relative URL of image file from same SharePoint site
$serverRelativeUrl = Read-Host -Prompt "Enter Server Relative URL of image file (e.g /sites/contoso/SiteAssets/Lists/dbc6f551-252b-462f-8002-c8f88d0d12d5/CLI-For-Microsoft-365-Blue.png)"

# Get Credentials to connect
$m365Status = m365 status
if ($m365Status -match "Logged Out") {
    m365 login
}

# Get UniqueId of file you're referencing (without this part your image won't appear in Power Apps (browser or mobile app) or Microsoft Lists (iOS app))
$imageFileUniqueId = (m365 spo file get --webUrl $siteUrl --url $serverRelativeUrl | ConvertFrom-Json).UniqueId

# Update list item with image column
m365 spo listitem set --listTitle "Logo Universe" --id 15 --webUrl $siteUrl --Image "{'type':'thumbnail','fileName':'CLI-For-Microsoft-365-Blue.png','fieldName':'Image','serverUrl':'https://contoso.sharepoint.com','serverRelativeUrl':'$($serverRelativeUrl)', 'id':'$($imageFileUniqueId)'}"

# Disconnect SharePoint online connection
m365 logout
Update SharePoint list item with Image column in SharePoint online using CLI for Microsoft 365
Update SharePoint list item with Image column

Learn more

✇Ganesh Sanap Blogs

Add/Update image columns in SharePoint/Microsoft Lists using PnP PowerShell

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.

In this blog, I will explain how to create a new list item with image column and update existing list item to update the image column using PnP PowerShell.

Create new list item with Image column

You can use Add-PnPListItem command in PnP PowerShell to create a new item in SharePoint list with Image column:

# Connect to SharePoint online site
Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/spconnect -Interactive

# Get UniqueId of file you're referencing (without this part your image won't appear in Power Apps (browser or mobile app) or Microsoft Lists (iOS app))
$imageFileUniqueId = (Get-PnPFile -Url "SiteAssets/Lists/dbc6f551-252b-462f-8002-c8f88d0d12d5/PnP-PowerShell-Blue.png" -AsListItem)["UniqueId"]

# Create new list item with image column
Add-PnPListItem -List "Logo Universe" -Values @{"Title" = "PnP PowerShell"; "Image" = "{'type':'thumbnail','fileName':'PnP-PowerShell-Blue.png','fieldName':'Image','serverUrl':'https://contoso.sharepoint.com','serverRelativeUrl':'/sites/SPConnect/SiteAssets/Lists/dbc6f551-252b-462f-8002-c8f88d0d12d5/PnP-PowerShell-Blue.png', 'id':'$($imageFileUniqueId)'}"}
Create a new SharePoint list item with Image column in SharePoint online using PnP PowerShell
Create new list item with Image column

Update SharePoint list item with Image column

You can use Set-PnPListItem cmdlet in PnP PowerShell to update existing SharePoint list item with Image column:

# Connect to SharePoint online site
Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/spconnect -Interactive

# Get UniqueId of file you're referencing (without this part your image won't appear in Power Apps (browser or mobile app) or Microsoft Lists (iOS app))
$imageFileUniqueId = (Get-PnPFile -Url "SiteAssets/Lists/dbc6f551-252b-462f-8002-c8f88d0d12d5/PnP-PowerShell-Green.png" -AsListItem)["UniqueId"]

# Update SharePoint list item with image column
Set-PnPListItem -List "Logo Universe" -Identity 12 -Values @{"Image" = "{'type':'thumbnail','fileName':'PnP-PowerShell-Blue.png','fieldName':'Image','serverUrl':'https://contoso.sharepoint.com','serverRelativeUrl':'/sites/SPConnect/SiteAssets/Lists/dbc6f551-252b-462f-8002-c8f88d0d12d5/PnP-PowerShell-Green.png', 'id':'$($imageFileUniqueId)'}"}
Update SharePoint list item with Image column in SharePoint online using PnP PowerShell
Update SharePoint list item with Image column

Note: This blog post is updated based on the updates to PnP script sample at Add/Update Image in SharePoint Image column so that added/updated images will work in Power Apps or Microsoft Lists mobile app.

Learn more

❌