Configurate text and value for prevalues in dropdown

[bjarnef]

In property editors like dropdown, checkbox list and radiobutton list we can configurate prevalues.

However currently there is no way to configurate both text and value and also default selected option(s).
Often you don't want the label is the same as the stored value, but currently we may need to resolve the value in e.g. razor view, so None would be mapped to a value like g-0 (no gutter).

It would could specify the specific value (which editors don't see), it would in many cases require less code in views.

Not sure what the best approach would be, but it could be something like this with toggles. By default it could generate a lowercase value from the label/text and replace e.g. space with hyphen.

and a bit similar to color picker which allow to specific value and label.

[bjarnef]

Regarding color picker devlopers may just use the color code directly as inline styles in frontend, while in other scenarios it makes more sence the store a different value like a value used as class name or data attribute value. Currently we would have to either transform the color in view or controller, create our own color picker property editor or use a package like Contentment.

[SofusMunch]

I was just about to write my own editors to do this exact thing.

I don’t think I ever use dropdowns, radio buttons or checkboxes without having to parse them in the view. More often than not I also have to code a fall back value if nothing was selected.

I would like be able to:

• Set label/values
• Set default value(s)
• Possibly set min/max for multiple dropdowns/checkboxes

[bjarnef]

@iOvergaard @nielslyngsoe in the new backoffice the multivalues property editors currently expect a string arrary, e.g. a config like this:

"Configuration": {
    "fileExtensions": [
      "mp3",
      "weba",
      "oga",
      "opus"
    ]
  }

it would be useful if these can support label/value as well as the value if often not want you want to be shown to content editors - especially when dealing with label translations in backoffice - and value is not always what one want to present to content editors or the other way around.

E.g. Approved Color has this configuration:

"Configuration": {
    "items": [
      {
        "value": "000000",
        "label": "Black"
      },
      {
        "value": "ffffff",
        "label": "White"
      },
      {
        "value": "ff0000",
        "label": "Red"
      }
    ],
    "useLabel": true
  },

[bjarnef]

I was thinking a multi values property editor / component will be useful in both core, but also packages or when extending backoffice UI, mainly label/value or key/value and the (approved) color picker may be able to extend this.

For our projects we also have a custom Button Picker property editor, which allow to set an (optional) icon, (optional) label and (required) value.

Perhaps it makes sense to have a flexible multi values property editor and pass in an array of objects (similar to settings property in configuration of a property editor).

Scenario 1: Label/value for lists (dropdown, radiobutton, checkbox)

[
   {
      "alias": "label",
      "label": "Label",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox",
      "mandatory": false
   },
   {
      "alias": "value",
      "label": "Value",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox",
      "mandatory": true,
      "unique": true  // or something else to indicate value only must exist once.
   }
]

Scenario 2: Crop dimensions

[
   {
      "alias": "alias",
      "label": "Alias",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox",
      "mandatory": true,
      "unique": true
   },
   {
      "alias":"width",
      "label":"Width",
      "propertyEditorUiAlias":"Umb.PropertyEditorUi.Integer",
      "mandatory":false
   },
   {
      "alias": "height",
      "label": "Width",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.Integer",
      "mandatory": false
   }
]

Scenario 3: Currencies

[
   {
      "alias": "isoCode",
      "label": "ISO 4217 Code",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox",
      "mandatory": true
   },
   {
      "alias":"price",
      "label":"Price",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.Decimal",
      "mandatory": false
   }
]

Scenario 4: Button Picker
Alignment: (left, center, right), Formatting (bold, italic, underline), Format (square, landscape, portrait), etc.

[
   {
      "alias": "icon",
      "label": "Icon",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.IconPicker",
      "mandatory": false
   },
   {
      "alias":"Label",
      "label":"Label",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox",
      "mandatory": false
   },
   {
      "alias": "value",
      "label": "Value",
      "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox",
      "mandatory": true,
      "unique": true
   }
]

It would allow to re-use much of the existing property editor UIs and pre-configure items in the content type property.

Of course it doesn't cover every use-case, but it allow to pre-configure items in a property editor setting property, where each object value not necessary is a textbox/string.

[bjarnef]

@iOvergaard @nielslyngsoe would something like this makes sense? It seems to be familiar with current settings properties in configuration of property editors and allow a more flexible configuration.

Of course it may not look great with 10+ properties horizontally, but useful when just 2-5 properties per item/row. For more complex configuration custom property editor UIs / components can be added.

It may even solve the issue defined repeatable content item for something else than textbox/string - e.g. just a single property "Label" and then the "repeatable content property editor UI can probably map each item to return Array<T> - e.g. string[] but the propertyEditorUiAlias may be Umb.PropertyEditorUi.TextBox or Umb.PropertyEditorUi.EmailAddress or something else.
#17566

[skttl]

Just want to put this one in here :)
leekelleher/umbraco-package-ideas#47

Maybe also this one:
leekelleher/umbraco-package-ideas#48