Property Value Preset for specific instances of Contentment Data List

[skttl (Søren Kottal)]

I’m trying to add a preset value for specific instances of a Contentment Data List data type.

I’ve got it to work, but I’m not sure its the best way. Can anyone chime in with possible improvements?

import { UmbPropertyTypePresetModelTypeModel, UmbPropertyValuePreset, UmbPropertyValuePresetApiCallArgs } from "@umbraco-cms/backoffice/property";
import { UmbPropertyEditorConfig } from "@umbraco-cms/backoffice/property-editor";

export class VideoFeaturesPropertyValuePreset
    implements UmbPropertyValuePreset<undefined | string[], UmbPropertyEditorConfig> {
    
    entityTypesWithVideoFeatures = { // can I check content types without relying on magic guids?
        "98042a00-1b76-4ffd-8d04-60fcb32c1bdc": "heroBlock",
        "46dfb7e4-572e-4192-ad0e-d5235b4b0d08": "mediaBlock"
    } as Record<string, string>;
    
    async processValue(value: undefined | string[], _config: UmbPropertyEditorConfig, _typeArgs: UmbPropertyTypePresetModelTypeModel, callArgs: UmbPropertyValuePresetApiCallArgs) {
        var entityType = this.entityTypesWithVideoFeatures[callArgs.entityTypeUnique as string];
        if (entityType === undefined || callArgs.alias !== "videoFeatures") { // can the alias check be made better?
            return value;
        }

        const initialState = [];
        
        if (entityType === "heroBlock") {
            initialState.push("Autoplay");
            initialState.push("Muted");
            initialState.push("Loop");
        }

        else if (entityType === "mediaBlock") {
            initialState.push("Autoplay");
            initialState.push("Muted");
        }
        
        return value !== undefined ? value : initialState;
    }

    destroy(): void { }
}

export { VideoFeaturesPropertyValuePreset as api };

I also want to set a specific Rich Text Editor to use h3 as the default element. I guess Property Value Presets is the way to go here, but I’m not sure how. I gues the value of a rich text editor is not a string, but some kind of type specific for TipTap?

And in this preset, I want it to work for all instances of the specific data type, so if it could match with the data type id and nothing else, that would be sweet.

[Luuk (Luuk Peters (Proud Nerds))]

Ah! Interesting question I am also very curious about! I was thinking if we can have a preset value with a condition or not, but haven’t gotten around to dive deeper.

[jemayn (Jesper Mayntzhusen)]

I don’t know the answer to your specific question, but I recently needed to check for the doctype of the current page in a propertyValuePreset, and for that I needed to extend `UmbControllerBase` to be able to consume contexts.

Maybe something similar gives you access to check based on a type instead of hardcoding guids..

Example code:

import type {
    UmbPropertyTypePresetModelTypeModel,
    UmbPropertyValuePreset
} from "@umbraco-cms/backoffice/property";
import type { UmbPropertyEditorConfig } from "@umbraco-cms/backoffice/property-editor";
import {UmbControllerBase} from "@umbraco-cms/backoffice/class-api";
import type {UmbControllerHost} from "@umbraco-cms/backoffice/controller-api";
import { UMB_DOCUMENT_WORKSPACE_CONTEXT  } from '@umbraco-cms/backoffice/document';
export class DatePrevalue extends UmbControllerBase implements UmbPropertyValuePreset<string, UmbPropertyEditorConfig> {
    private permitted: boolean = false;

    constructor(host: UmbControllerHost) {
        super(host);

        this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
            this.observe(instance?.structure.contentTypeAliases, (aliases) => {
                if(aliases?.includes('downloadItem')) {
                    this.permitted = true;
                } else {
                    this.permitted = false;
                }
            });
        });
    }

    async processValue(value: any, _config: UmbPropertyEditorConfig, _typeArgs: UmbPropertyTypePresetModelTypeModel) {
        if(this.permitted){
            return value ? value : new Date().toISOString().replace('T', ' ').substring(0, 19);
        }
        
        return value;
    }

    destroy(): void {
        super.destroy();
    }
}

export { DatePrevalue as api };

[Luuk (Luuk Peters (Proud Nerds))]

I checked, the Property Value Preset does support conditions, so I guess doing it in the logic the implementation itself seems to be the only way to do it.

It does seem to have a callArgs parameter on the processValue function that provides some information about the context that it’s used in. You might be able to do something like (untested):

callArgs.entityTypeUnique === "downloadItem"

[nielslyngsoe (Niels Lyngsø)]

Since i have the source code at hand i may just chip in with some details:

The call args hold the following:

entityType: string;
entityUnique: string;
entityTypeUnique?: string;
alias: string;
propertyEditorUiAlias: string;
propertyEditorSchemaAlias?: string;
variantId?: UmbVariantId;

The in case of using Presets on Documents, the values would be:
entityType would be ‘document’.
entityUnique: this would be the Unique/Guid/key/Id for the particular Document, in the case of a new document this is not known by the server yet.
entityTypeUnique: is the Unique/Guid/key/Id for the particular Document-Type.
alias: the alias of the property
propertyEditorUiAlias: the alias of the property editor ui.
propertyEditorSchemaAlias?: the alias of the property editor schema(server property editor/data-editor)
variantId: a variant id presenting the variant that the value will be related to. (example a invariant property will have culture: null)

the type args hold the following:

isMandatory?: boolean;
variesByCulture?: boolean;
variesBySegment?: boolean;

which comes directly from the configuration of the property.

I hope this helps. Someone may make this information pretty and put it into the Docs Article for Property Value Presets.

Thanks in advance

[skttl (Søren Kottal)]

Thanks for the explainer!

In my opinion the callArgs might benefit from having the data type id too. This way you can match the preset with the data type, instead the instance of the data type.

Then you could also show what presets are configured for the data type here:

[skttl (Søren Kottal)]

For the rte preset, I ended up with this:

import { UmbPropertyTypePresetModelTypeModel, UmbPropertyValuePreset, UmbPropertyValuePresetApiCallArgs } from "@umbraco-cms/backoffice/property";
import { UmbPropertyEditorConfig } from "@umbraco-cms/backoffice/property-editor";
import { UmbPropertyEditorRteValueType } from "@umbraco-cms/backoffice/rte";

export class HeadlineRtePropertyValuePreset
    implements UmbPropertyValuePreset<UmbPropertyEditorRteValueType | undefined, UmbPropertyEditorConfig> {
    
    async processValue(value: UmbPropertyEditorRteValueType | undefined, _config: UmbPropertyEditorConfig, _typeArgs: UmbPropertyTypePresetModelTypeModel, callArgs: UmbPropertyValuePresetApiCallArgs) {
        
        if (callArgs.alias === "headline") {
            value = value || { markup: "<h3></h3>" };
        }

        return value;
    }

    destroy(): void { }
}

export { HeadlineRtePropertyValuePreset as api };

Would love to be able to rely on a data type id, instead of a property alias though

[nielslyngsoe (Niels Lyngsø)]

Good point, its just important to notice that we do not always have a Data-Type ID(unique). Its only on Content Type based Properties that we use Data-Types.

But I would say we could add it as an optional property in the callArgs, feel free to make a PR