DEV Community

Kinga
Kinga

Posted on • Edited on

4

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}}}",
  //...
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay