Unable to pass configuration to Provider Setting

[enkelmedia]

On 15.0.3

I'm trying to pass configuration to a Property Editor UI. In my case i need to pass a "min/max" value.

I've tried this but it does not work:

[Setting(nameof(TransactionalEmail),View= "My.Picker.PropertyEditorUi", PreValues = """{"min":1,"max":1}""")]
public string TransactionalEmail { get; set; }

Wondering if this is supported?

[AndyButland]

Yes, this is supported, as is the persisting of complex properties as raised in #1335 - we do this for various settings that are used in the field and workflow types that come out of the box.

The relevant part of the documentation is here.

In summary you need to implement a "setting value converter" on the client. This is responsible for converting the prevalues you have on the setting into the configuration needed for the property value editor. It's also used to convert the value that is emitted from the editor into a value for persistence.

So based on your description, the following is something like what you'll need:

import { manifests as settingValueConverterManifests } from "./setting-value-converter/manifests.js";

const manifests = [
  ...settingValueConverterManifests,
];

export const onInit = async (host, extensionRegistry) => {
  extensionRegistry.registerMany(manifests);
};



import { SliderSettingValueConverter } from "./slider-setting-value-converter.api";

const mySettingValueConverterManifest = {
  type: "formsSettingValueConverter",
  alias: "My.Picker.SettingValueConverter.Slider",
  name: "My Picker Setting Value Converter",
  propertyEditorUiAlias: "My.Picker.PropertyEditorUi",
  api: MyPickerSettingValueConverter,
};

export const manifests = [mySettingValueConverterManifest];



import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";

export class MyPickerSettingValueConverter {

  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
    if (value.length === 0) {
      return Promise.resolve({});
    }

    return Promise.resolve(JSON.parse(value));
  }

  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
    return Promise.resolve(JSON.stringify(valueData.value));
  }

  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
    const config: UmbPropertyEditorConfig = [];

    // Min, max are provided in prevalues.
    if (setting.prevalues.length >= 1) {
      config.push({
        alias: "minVal",
        value: parseInt(setting.prevalues[0]),
      });
      if (setting.prevalues.length >= 2) {
        config.push({
          alias: "maxVal",
          value: parseInt(setting.prevalues[1]),
        });
      }
    }

    return Promise.resolve(config);
  }
}

I'll close the issue but feel free to come back if you have trouble getting it working.

[enkelmedia]

Hi!

Thanks @AndyButland!

Not sure if this would work from another package without having typescript types to import?

import { manifests as settingValueConverterManifests } from "./setting-value-converter/manifests.js";

VS Code complains because it does not recognize the formsSettingValueConverter, tried to look for a npm-package but did not find any.

Another thing about the docs:

I stent a fair amount of time yesterday looking for details about this but it's not at all mentioned on this page: https://docs.umbraco.com/umbraco-forms/developer/extending/adding-a-type/setting-types which is the place where someone who is looking to add settings to a Provider would end up so I think it would make sense to move and/or mention the information about formsSettingValueConverter on this page as well.

Update
I hacked my way around this by just creating a class that has the exact outline as in our example and register like this:

const pickerSettingsValueConverter : UmbExtensionManifest = {
  type: "formsSettingValueConverter",
  alias: "My.Property.SettinsValueConverter",
  name: "My Settings Value Converter",
  //@ts-ignore
  propertyEditorUiAlias: "My.PropertyEditorUI",
  api: PickerSettingValueConverter,
}

Using @ts-ignore since otherwise it would not pass type checks.

[AndyButland]

We're working currently on an npm package as that would make this and other client-side extensions easier certainly. But as you've found you don't strictly need it so long as what you register matches what's expected. In my sample above I'm just not using the : UmbraExtensionManifest type information.

I'll have a look at the docs and see if we can at least point out the additional information from the page you were looking at.

[enkelmedia]

Hi!

Thanks @AndyButland =D You're right, I added : UmbraExtensionManifest out of habit.

Looking forward to the npm package :) Thanks for the swift feedback and the help!

// Markus