Set properties for/from SPFx Application Customizer
Tags: spfx, node, pnp, pnpj
Published: 2023-07-10 07:27:13

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

You may define them in `serve.json` for testing:
```json
{
"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
<?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`:
```json
{
    "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](https://pnp.github.io/powershell/cmdlets/Set-PnPApplicationCustomizer.html)

## 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 :)


```ts
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
    }
}
```