Adding an image web part to modern page using PNP CSOM

%3CLINGO-SUB%20id%3D%22lingo-sub-149640%22%20slang%3D%22en-US%22%3EAdding%20an%20image%20web%20part%20to%20modern%20page%20using%20PNP%20CSOM%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-149640%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20All%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETrying%20to%20programmatically%20add%20an%20image%20web%20part%20to%20a%20modern%20page%20using%20PnP%20CSOM%20as%20per%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fblogs%2Fprogramatically-creating-and-updating-modern-pages-in-sharepoint-online%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fblogs%2Fprogramatically-creating-and-updating-modern-pages-in-sharepoint-online%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETo%20do%20this%20I%20have%20added%20an%20image%20web%20part%20to%20a%20workbench%20page%20and%20configured%20it%20to%20display%20the%20image%20desired%2C%20then%20clicked%20Web%20Part%20Data%2C%20and%20then%20inspected%20that%20popup%20with%20developer%20tools%20to%20be%20able%20to%20copy%20and%20paste%20the%20settings%3A%3C%2FP%3E%0A%3CPRE%3E%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22controlType%22%3A%203%2C%0A%20%20%20%20%20%20%20%20%22displayMode%22%3A%202%2C%0A%20%20%20%20%20%20%20%20%22id%22%3A%20%22dd0b35fd-c04f-4c9c-9254-ca12dc803b19%22%2C%0A%20%20%20%20%20%20%20%20%22position%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22controlIndex%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22sectionIndex%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22zoneIndex%22%3A%201%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22webPartData%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22dataVersion%22%3A%20%221.8%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22description%22%3A%20%22Show%20an%20image%20on%20your%20page.%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%20%22d1d91016-032f-456d-98a4-721247c305e8%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22instanceId%22%3A%20%22dd0b35fd-c04f-4c9c-9254-ca12dc803b19%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22altText%22%3A%20%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22fixAspectRatio%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22imageSourceType%22%3A%202%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22listId%22%3A%20%22%7BA4514897-0699-40F7-8E33-C3A7D2A8FAC4%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22siteId%22%3A%20%22b3e3a3d3-73d0-4cec-b62f-999537700bbb%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22uniqueId%22%3A%20%224674d419-c4dd-4bcf-a8e5-9f9890a3fc95%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22webId%22%3A%20%22bcd0fe30-de28-4a0a-a5cd-0bd7b91e87d8%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22serverProcessedContent%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22htmlStrings%22%3A%20%7B%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22imageSources%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22imageSource%22%3A%20%22%2Fsites%2Fsandpit_dev%2FNews%2FOnPremArticleImages%2Fsharepoint_for_business%2520ARTICLE.jpg%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22links%22%3A%20%7B%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22searchablePlainTexts%22%3A%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22Image%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22webPartId%22%3A%20%22d1d91016-032f-456d-98a4-721247c305e8%22%0A%20%20%20%20%7D%0A%5D%3C%2FPRE%3E%0A%3CP%3EFrom%20this%2C%20I%20made%20the%20following%20code%3A%3C%2FP%3E%0A%3CPRE%3Evar%20imageWebPart%20%3D%20p.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image)%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22imageSourceType%22%5D%20%3D%202%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22imageSource%22%5D%20%3D%20%22%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22captionText%22%5D%20%3D%20%22This%20is%20a%20test%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22fileName%22%5D%20%3D%20%22%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22siteId%22%5D%20%3D%20%22b3e3a3d3-73d0-4cec-b62f-999537700bbb%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22webId%22%5D%20%3D%20%22bcd0fe30-de28-4a0a-a5cd-0bd7b91e87d8%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22listId%22%5D%20%3D%20%22%7BA4514897-0699-40F7-8E33-C3A7D2A8FAC4%7D%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22uniqueId%22%5D%20%3D%20%224674d419-c4dd-4bcf-a8e5-9f9890a3fc95%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22imgWidth%22%5D%20%3D%20%221002%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22imgHeight%22%5D%20%3D%20%22469%22%3B%3CBR%20%2F%3E%20imageWebPart.Properties%5B%22fixAspectRatio%22%5D%20%3D%20false%3B%3CBR%20%2F%3E%20p.AddControl(imageWebPart%2C%20-1)%3B%3C%2FPRE%3E%0A%3CP%3EHowever%20all%20I%20end%20up%20with%20is%20an%20image%20web%20part%20that%20has%20no%20image%20configured%20-%20however%20it%20is%20displaying%20the%26nbsp%3B%22This%20is%20a%20test%22%20caption.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20have%20also%20tried%20by%20removing%20the%20%7B%20%7D%20from%20the%20list%20id%20value%2C%20but%20no%20joy.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAm%20I%20missing%20something%20here%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENigel%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-149640%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-194089%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20an%20image%20web%20part%20to%20modern%20page%20using%20PNP%20CSOM%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-194089%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20guessing%20there%20was%20a%20change%20in%20January.%20My%20code%20which%20simply%20modified%20the%20uniqueId%20property%20worked%20January%203rd%2C%202018%2C%20to%20replace%20the%20image%20in%20an%20existing%20image%20web%20part%20on%20a%20modern%20page.%20When%20I%20finally%20got%20back%20to%20it%20yesterday%2C%20it%20no%20longer%20worked.%20I'm%20still%20not%20able%20to%20modify%20the%20image%20on%20an%20existing%20image%20web%20part%20as%20I%20did%20previously%2C%20but%20at%20least%20now--with%20your%20tip--I%20can%20add%20a%20new%20image%20web%20part%20to%20the%20page%20with%20an%20updated%20image.%20Thanks%20for%20the%20tip!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-149656%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20an%20image%20web%20part%20to%20modern%20page%20using%20PNP%20CSOM%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-149656%22%20slang%3D%22en-US%22%3E%3CP%3EOk%20-%20so%20(rather%20obviously)%20setting%20the%20%22imageSource%22%20property%20to%20the%20URL%20of%20the%20image%20resolved%20the%20issue%2C%20but%20what%20I%20dont%20understand%20was%20that%20the%20PnP%20webcast%20did%20not%20seem%20to%20need%20to%20set%20this%20-%20instead%20just%20setting%20the%20siteId%2C%20webId%20and%20uniqueId%26nbsp%3Bwas%20enough%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20anyone%20interested%2C%20here%20is%20the%20code%3A%3C%2FP%3E%0A%3CPRE%3EClientSidePage%20p%20%3D%20ClientSidePage.Load(cc%2C%20%22Templatepage.aspx%22)%3B%0A%20%20%20%20%20%20%20%20p.LayoutType%20%3D%20ClientSidePageLayoutType.Home%3B%0A%0A%20%20%20%20%20%20%20%20var%20imageWebPart%20%3D%20p.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image)%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22imageSourceType%22%5D%20%3D%202%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22imageSource%22%5D%20%3D%20%22%2Fsites%2Fsandpit_dev%2FNews%2FOnPremArticleImages%2Fsharepoint_for_business%2520ARTICLE.jpg%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22captionText%22%5D%20%3D%20%22This%20is%20a%20test%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22fileName%22%5D%20%3D%20%22%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22siteId%22%5D%20%3D%20%22b3e3a3d3-73d0-4cec-b62f-999537700bbb%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22webId%22%5D%20%3D%20%22bcd0fe30-de28-4a0a-a5cd-0bd7b91e87d8%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22listId%22%5D%20%3D%20%22%7BA4514897-0699-40F7-8E33-C3A7D2A8FAC4%7D%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22uniqueId%22%5D%20%3D%20%224674d419-c4dd-4bcf-a8e5-9f9890a3fc95%22%3B%0A%20%20%20%20%20%20%20%20imageWebPart.Properties%5B%22fixAspectRatio%22%5D%20%3D%20false%3B%0A%0Ap.AddControl(imageWebPart%2C%20-1)%3B%0A%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-778933%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20an%20image%20web%20part%20to%20modern%20page%20using%20PNP%20CSOM%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-778933%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3EimageWebPart.Properties%5B%22imageSource%22%5D%20%3D%20%22Hic%20sunt%20dracones%20of%20Microsoft%22%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eor%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3EimageWebPart.Properties%5B%22imageSource%22%5D%20%3D%20false%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ewould%20also%20work.%3C%2FP%3E%3CP%3EAs%20long%20the%20variable%20is%20set%2C%20the%20webpart%20will%20work.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi All,

 

Trying to programmatically add an image web part to a modern page using PnP CSOM as per: https://dev.office.com/blogs/programatically-creating-and-updating-modern-pages-in-sharepoint-online.

 

To do this I have added an image web part to a workbench page and configured it to display the image desired, then clicked Web Part Data, and then inspected that popup with developer tools to be able to copy and paste the settings:

[
    {
        "controlType": 3,
        "displayMode": 2,
        "id": "dd0b35fd-c04f-4c9c-9254-ca12dc803b19",
        "position": {
            "controlIndex": 1,
            "sectionIndex": 1,
            "zoneIndex": 1
        },
        "webPartData": {
            "dataVersion": "1.8",
            "description": "Show an image on your page.",
            "id": "d1d91016-032f-456d-98a4-721247c305e8",
            "instanceId": "dd0b35fd-c04f-4c9c-9254-ca12dc803b19",
            "properties": {
                "altText": "",
                "fixAspectRatio": false,
                "imageSourceType": 2,
                "listId": "{A4514897-0699-40F7-8E33-C3A7D2A8FAC4}",
                "siteId": "b3e3a3d3-73d0-4cec-b62f-999537700bbb",
                "uniqueId": "4674d419-c4dd-4bcf-a8e5-9f9890a3fc95",
                "webId": "bcd0fe30-de28-4a0a-a5cd-0bd7b91e87d8"
            },
            "serverProcessedContent": {
                "htmlStrings": {},
                "imageSources": {
                    "imageSource": "/sites/sandpit_dev/News/OnPremArticleImages/sharepoint_for_business%20ARTICLE.jpg"
                },
                "links": {},
                "searchablePlainTexts": {}
            },
            "title": "Image"
        },
        "webPartId": "d1d91016-032f-456d-98a4-721247c305e8"
    }
]

From this, I made the following code:

var imageWebPart = p.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);
imageWebPart.Properties["imageSourceType"] = 2;
imageWebPart.Properties["imageSource"] = "";
imageWebPart.Properties["captionText"] = "This is a test";
imageWebPart.Properties["fileName"] = "";
imageWebPart.Properties["siteId"] = "b3e3a3d3-73d0-4cec-b62f-999537700bbb";
imageWebPart.Properties["webId"] = "bcd0fe30-de28-4a0a-a5cd-0bd7b91e87d8";
imageWebPart.Properties["listId"] = "{A4514897-0699-40F7-8E33-C3A7D2A8FAC4}";
imageWebPart.Properties["uniqueId"] = "4674d419-c4dd-4bcf-a8e5-9f9890a3fc95";
imageWebPart.Properties["imgWidth"] = "1002";
imageWebPart.Properties["imgHeight"] = "469";
imageWebPart.Properties["fixAspectRatio"] = false;
p.AddControl(imageWebPart, -1);

However all I end up with is an image web part that has no image configured - however it is displaying the "This is a test" caption.

 

I have also tried by removing the { } from the list id value, but no joy.

 

Am I missing something here?

 

Thanks,

 

Nigel

 

3 Replies
Highlighted

Ok - so (rather obviously) setting the "imageSource" property to the URL of the image resolved the issue, but what I dont understand was that the PnP webcast did not seem to need to set this - instead just setting the siteId, webId and uniqueId was enough?

 

For anyone interested, here is the code:

ClientSidePage p = ClientSidePage.Load(cc, "Templatepage.aspx");
        p.LayoutType = ClientSidePageLayoutType.Home;

        var imageWebPart = p.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);
        imageWebPart.Properties["imageSourceType"] = 2;
        imageWebPart.Properties["imageSource"] = "/sites/sandpit_dev/News/OnPremArticleImages/sharepoint_for_business%20ARTICLE.jpg";
        imageWebPart.Properties["captionText"] = "This is a test";
        imageWebPart.Properties["fileName"] = "";
        imageWebPart.Properties["siteId"] = "b3e3a3d3-73d0-4cec-b62f-999537700bbb";
        imageWebPart.Properties["webId"] = "bcd0fe30-de28-4a0a-a5cd-0bd7b91e87d8";
        imageWebPart.Properties["listId"] = "{A4514897-0699-40F7-8E33-C3A7D2A8FAC4}";
        imageWebPart.Properties["uniqueId"] = "4674d419-c4dd-4bcf-a8e5-9f9890a3fc95";
        imageWebPart.Properties["fixAspectRatio"] = false;

p.AddControl(imageWebPart, -1);
Highlighted

I'm guessing there was a change in January. My code which simply modified the uniqueId property worked January 3rd, 2018, to replace the image in an existing image web part on a modern page. When I finally got back to it yesterday, it no longer worked. I'm still not able to modify the image on an existing image web part as I did previously, but at least now--with your tip--I can add a new image web part to the page with an updated image. Thanks for the tip!

Highlighted

 

imageWebPart.Properties["imageSource"] = "Hic sunt dracones of Microsoft"

 

or 

 

imageWebPart.Properties["imageSource"] = false

 

would also work.

As long the variable is set, the webpart will work.