Set and check ClientSideComponentId and ClientSideComponentProperties on fields

SetClientSideComponentValues.js

var fetchJson = async (url, options) => (await fetch(url, options)).json();

async function getDigest(site) {
    const resObj = await fetchJson(site + '/_api/contextinfo', {
        method: 'POST',
        headers: {
            Accept: 'application/json'
        },
        credentials: 'include'
    });

    return resObj.FormDigestValue;
}

function fieldUrl(site, listName, fieldName) {
    return site + "/_api/web/lists/getbytitle('" + listName + "')/fields/getbyinternalnameortitle('" + fieldName + "')";
}

async function setClientSideComponent(site, listName, fieldName, digest, customizerId, customizerProperties) {
    var data = { '__metadata': { 'type': 'SP.Field' } };
    if (customizerId) {
        data.ClientSideComponentId = customizerId;
    }
    if (customizerProperties) {
        data.ClientSideComponentProperties = JSON.stringify(customizerProperties);
    }

    const resp = await fetch(fieldUrl(site, listName, fieldName), {
        method: "POST",
        headers: {
            "X-RequestDigest": digest,
            "content-type": "application/json;odata=verbose",
            "X-HTTP-Method": "MERGE"
        },
        body: JSON.stringify(data),
        credentials: 'include'
    });

    return resp.status;
}

async function getField(site, listName, fieldName) {
    const resObj = await fetchJson(fieldUrl(site, listName, fieldName), {
        credentials: 'include',
        headers: {
            Accept: 'application/json;odata=verbose'
        }
    })

    return resObj.d;
}

async function setAndCheckClientSideComponent(site, listName, fieldName, customizerId, customizerProperties) {
    try {
        const digest = await getDigest(site);

        const status = await setClientSideComponent(site, listName, fieldName, digest, customizerId, customizerProperties);

        if (!/2\d\d/.test(status)) {
            throw new Error('Error code ' + status + ' received attempting to change field settings.');
        }

        console.log('Finished setting field settings with status code:', status);
        const field = await getField(site, listName, fieldName);

        console.log('Field settings retrieved:');
        console.log('  ClientSideComponentId:', field.ClientSideComponentId);
        console.log('  ClientSideComponentProperties:', field.ClientSideComponentProperties);
    } catch (error) {
        console.error(error);
    }
}

async function setCustomAction(site, listName, componentId, componentProperties, customActionId, title = '', description = '') {
    try {
        const digest = await getDigest(site);

        const urlBase = `${site}/_api/web/lists/getbytitle('${listName}')/UserCustomActions`;
        const url = customActionId ? `${urlBase}('${customActionId}')` : urlBase;

        const body = JSON.stringify({
            '__metadata': { 'type': 'SP.UserCustomAction' },
            Location: 'ClientSideExtension.ListViewCommandSet.CommandBar',
            Title: title,
            Description: description,
            ClientSideComponentId: componentId,
            ClientSideComponentProperties: JSON.stringify(componentProperties),
        });
        const headers = {
            'X-RequestDigest': digest,
            "content-type": "application/json;odata=verbose",
        };

        const fullHeaders = {
            ...headers,
            ...(customActionId ? { "X-HTTP-Method": "MERGE" } : {}),
        };

        await fetch(url, { method: 'POST', body, headers, credentials: 'include' });
    } catch (error) {
        console.error(error);
    }
}