Set properties for/from SPFx Application Customizer

When developing SPFx solutions, you may want to provide additional properties to configure your extension.

You may define them in serve.json for testing:

{
"url": "https://yourtenant.sharepoint.com/sites/yoursite/?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={\"xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\":{\"location\":\"ClientSideExtension.ApplicationCustomizer\",\"properties\":{\"isConfigured\":false}}}",
  //...
}

or in elements.xml file using ClientSideComponentProperties property:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="Breadcrumbs"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
        HostProperties="{&quot;preAllocatedApplicationCustomizerTopHeight&quot;:&quot;47&quot;}"
    >
    </CustomAction>
</Elements>

or even in Site Design using associateExtension verb with clientSideComponentProperties:

{
    "verb": "associateExtension",
    "title": "ETHZ Corporate Design: add Site Logo and Footer",
    "location": "ClientSideExtension.ApplicationCustomizer",
    "clientSideComponentId": "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "clientSideComponentProperties": "{\"isConfigured\":\"false\"}",
    "scope": "Site"
}

You may also update them later using PnP PowerShell

Set properties from Application Customizer

But what if you want to update a property from the Application Customizer itself?
You may need it, if the application customizer is provisioning resources and this action should be executed only once. Or maybe user is prompted for initial configuration, which should be saved and used from now on.

It's not as easy as when updating WebPart properties, but doable neverthless :)

import "@pnp/sp/sites";
import "@pnp/sp/user-custom-actions";
import { IUserCustomActionInfo } from '@pnp/sp/user-custom-actions';

interface IAppCustomizerInfo extends IUserCustomActionInfo{
    "ClientSideComponentId":string;
    "ClientSideComponentProperties":string;
}

//...

try{
    const siteUserCustomActions = await this.spfiContext.site.userCustomActions()
    if(siteUserCustomActions.length === undefined || siteUserCustomActions.length === 0){
        return {
            result: false,
            error: "Site Design resource not found"
        }
    }
    const appCustomizers = siteUserCustomActions
        .filter(uca => uca.Location === "ClientSideExtension.ApplicationCustomizer")
        .filter((uca : IAppCustomizerInfo) => uca.ClientSideComponentId === _applicationCustomizerID);

    if (appCustomizers.length>0){
        const uca= appCustomizers[0] as IAppCustomizerInfo;


        const props: { [key: string]: string } = {
            "ClientSideComponentProperties" : JSON.stringify({
                    ...JSON.parse(uca.ClientSideComponentProperties),
                    isConfigured: "true"
                })
            }
        const userCustomActions = this.spfiContext.site.userCustomActions.getById(uca.Id);
        await userCustomActions.update(props);

        return { result: true };
    }
}
catch (error) {
    return  {
        result: false,
        error: error
    }
}

Blog

Set properties for/from SPFx Application Customizer

Kinga

Set properties from Application Customizer

Join Our Newsletter. No Spam, Only the good stuff.

Related