spo page clientsidewebpart add - Can't pass values to WebPart Properties in PowerShell

[WayneJSawyer]

Description

Am working on a script (in PowerShell 5.1) that will add our custom SPFx web part to a page, and populate the web part with environment specific properties. Following the documentation on pnp.github.io, I've been unable to set web part properties (of any sort) successfully.

I've included below some of the attempts I've been trying, and the result of each. Note: There are back ticks used when setting the web part props, but GitHub is rendering as code snippets

Steps to reproduce

o365 login
$SiteUrl = "https://tenant.sharepoint.com/sites/DEV2"
$PageName = "AppPage.aspx"
$AppWebPartID = "3ef02615-f00f-4d8e-864b-b35e026da490"
$ApiUrl = "https://myapi.azurefunctions.net"

First attempt

o365 spo page clientsidewebpart add --webUrl $($SiteUrl) --pageName $($PageName) --webPartId $($AppWebPartID) --debug --section 1 --column 1

Works fine, web part is added but without web part properties

Second attempt

o365 spo page clientsidewebpart add --webUrl $($SiteUrl) --pageName $($PageName) --webPartId $($AppWebPartID) --debug --section 1 --column 1 --webPartProperties "{""apiUrl"":""https://www.google.com""}"

Doesn't work, powershell thinks the command is incomplete

Third attempt

o365 spo page clientsidewebpart add --webUrl $($SiteUrl) --pageName $($PageName) --webPartId $($AppWebPartID) --debug --section 1 --column 1 --webPartProperties --% "{""apiUrl"":""https://www.google.com""}"

Doesn't work, o365cli reports 'invalid option %'. Note: not sure how the 3rd graph schemaextension example in the docs would work if this is the case

Fourth attempt

o365 --% spo page clientsidewebpart add --webUrl $($SiteUrl) --pageName $($PageName) --webPartId $($AppWebPartID) --debug --section 1 --column 1 --webPartProperties "{""apiUrl"":""https://www.google.com""}"

Executes, but nothing happens, there is no output from the command (even with --verbose), and the Web Part is not added.

Expected result

Should be able to format a JSON string in PowerShell and pass it to the --webPartProperties option and have the web part properties assigned.

Actual result

Can't add the web part to the page with properties assigned.

Environment

Windows 10 Pro, 10.0.18363
PowerShell 5.1.18362.145
Office 365 CLI 2.5.0 (and 2.3.0)

[WayneJSawyer]

@ypcode - Follow up here from the Twitter conversation. Thanks in advance!

[WayneJSawyer]

Note: In Attempt 4, if you remove the $(SiteUrl) etc parameters, and just hard code the string values for webUrl, pageName, and webPartId still nothing happens, even with --verbose

[garrytrinder]

Thanks for reporting the issue @WayneJSawyer and sorry for the trouble. We'll investigate it asap

[ypcode]

Hi Wayne,

Regarding your attempts, there is a tiny thing but quite important that is missing: The back ticks ( ` ) surrounding your JSON string
e.g.

o365 spo page clientsidewebpart add --webUrl $SiteUrl --pageName $PageName --webPartId $AppWebPartID --debug --section 1 --column 1 --webPartProperties --% `"{""apiUrl"":""https://www.google.com""}"`

Notice that, to avoid the need of using $(), you can put the --% just before the string to escape (like in your third attempt, but remind the back ticks :) )

I've been trying a few things regarding your scenario and here is what I come up with which works just fine on my machine with properties resolved from PowerShell variables so you can really script it

# This is ProvisionWebPart.ps1 script
$web = "https://<yourtenant>.sharepoint.com/sites/<yoursite>"
$pageName = "MyPage.aspx"
$webPartId = "8c1ebe8b-xxxx....."

$webPartProps = @{
    myChoices              = @("Choice 1", "Choice 2");
    description            = "My WebPart";
};

# Make JSON string from PS Hash object
$webPartPropsJson = $webPartProps | ConvertTo-Json -Compress
# Make sure we add the backticks and double the double-quotes in the JSON payload
$webPartPropsJson = '`"{0}"`' -f $webPartPropsJson.Replace('"', '""')

o365 spo page clientsidewebpart add -u $web -n $pageName --webPartId $webPartId --webPartProperties $webPartPropsJson

Note that here we don't need the --% since we are not escaping the " on the command line itself.

I hope that will help you ;)

[WayneJSawyer]

Thanks, I'll try it out, the hash object was actually my first approach because it made for a good solution, but was having issues with the double-double quotes and back tick on top of the ConvertTo-Json.

Note: I was using the back ticks in my examples as I'd seen that in the docs and in a gitter conversation, but I had trouble getting GitHub formatting the markdown to ignore them and not show as a code block. If you view my examples as raw text you should see them.

Thanks again, I'll get back to you if the solution works.

[ypcode]

Oh, indeed I did not realize you had them.. But then, it means that your third and fourth attempts sample should work... :$

BTW on my side, when I don't escape the JSON string properly, I get an output like

Specified webPartProperties is not a valid JSON string. Input: {test:foobar}. Error: SyntaxError: Unexpected token t in JSON at position 1

Don't you see it as well ?

[WayneJSawyer]

Hi Yannick (@ypcode),

Thanks for the solution, elegant one and most importantly one that works. It was the solution I was trying to put together before reaching out for help (creating a hash object and converting to json), but you provided the solution with all the back ticks and double double-quotes, so thank you very much.

Personally I never could get the --% in any form to work, even after trying again with the back ticks and all the quotes, but am not too worried because I wanted to create the JSON from an object anyway.

It might be worth provide the example with the hash object convert to json in the documentation, as it's most likely going to be how users of the CLI would create their web part properties anyway, they are unlikely to just be simple, pre-defined values in a string, without coming from some sort of parameters.

Thanks for the assistance!

[VelinGeorgiev]

Thanks Yannick, Wayne for the great collaboration on this!

Let's keep this open until we update the documents so we have for sure an example of it.

[waldekmastykarz]

As Velin said, thank you so much for constructive discussion and getting to a solution guys. My compliments! 👏 Now that we've identified the right approach to do it, @ypcode could you please submit a PR with an example that illustrates the right approach? Once again, thank you all 👍

[garrytrinder]

@ypcode I have raised an issue for the creation of the sample, #1438, and assigned it to you as you were working on it.

If you can't spare the time, that's fine, just let us know and we will see if other community members would like to pick it up.

[ypcode]

Hi @garrytrinder sorry for the late reply, I will spend some time working on a polished doc for this in the upcoming days ! As I saw the samples have usually both PowerShell and Bash flavors, I wanted to make sure I have enough time before actually starting it :) I'll probably issue a PR soon :)

[garrytrinder]

Thanks for the update @ypcode 👍🏻

If you can create a Bash version to go with the PS version that would be great, however if time is against you, just submit the PS version and we can look to add the Bash version at a later date.