create dropdown list as prevalue in custom property editor

supertrip 4 posts 75 karma points

May 09, 2022 @ 14:05

Create dropdown list as prevalue in custom Property Editor

Hi, I am developing an Umbraco custom Property Editor, and I would like to add as a prevalue a dopwdown list with options from which to select a specific value.

To learn how to create custom Property Editors I am referring to this project:

Bergmania.OpenStreetMap

I saw that a way to specify prevalues from a C# class, I can do:

```

using System.Runtime.Serialization; using Umbraco.Cms.Core.PropertyEditors;

namespace Bergmania.OpenStreetMap.Core { [DataContract] public class OpenStreetMapConfiguration { [DataMember(Name = "defaultPosition")] [ConfigurationField("defaultPosition", "Default Position", Constants.EditorView)] public OpenStreetMapModel DefaultPosition { get; set; }

    [DataMember(Name = "showSearch")]
    [ConfigurationField("showSearch", "Show Search", Constants.BooleanView, Description = "Show search field above map.")]
    public bool ShowSearch { get; set; } = false;

    [DataMember(Name = "showCoordinates")]
    [ConfigurationField("showCoordinates", "Show Coordinates", Constants.BooleanView, Description = "Show marker coordinates below map.")]
    public bool ShowCoordinates { get; set; } = false;

    [DataMember(Name = "allowClear")]
    [ConfigurationField("allowClear", "Allow Clear", Constants.BooleanView, Description = "Allow clearing previous marker.")]
    public bool AllowClear { get; set; } = true;

    [DataMember(Name ="tileLayer")]
    [ConfigurationField("tileLayer", "Tile Layer", Constants.TextStringView)]
    public string TileLayer { get; set; } = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

    [DataMember(Name ="tileLayerAttribution")]
    [ConfigurationField("tileLayerAttribution", "Tile Layer Attribution", Constants.TextStringView)]
    public string TileLayerAttribution { get; set; } = "Map data © OpenStreetMap contributors";
}

}

```

So, In understand I can add new fields in the following way:

```

[DataMember(Name ="tileLayer")] ConfigurationField("tileLayer", "Tile Layer", Constants.TextStringView)]public string TileLayer { get; set; } = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

```

Now, I can see that "boolean" and "textstring" are used...

Does anyone have an example on how I can insert a dropdown list? Or know where I can find all the data types / views I can provide to this ConfigurationField object?

Copy Link

Lee Kelleher 4026 posts 15837 karma points MVP 13x admin c-trib

May 10, 2022 @ 16:45

Hi supertrip!

As you may have found, there isn't a dropdown editor available in the "umbraco\views\prevalueeditors" folder - I'm not sure why this is, probably that there hasn't been a need for it with the core/default property-editor configuration options.

There is a way to do this, by using the "umbraco\views\propertyeditors\dropdownFlexible" property-editor. But it needs some extra C# code.

Add your new field to the Configuration class, pretty much as the OpenStreetMap editor code has it.

For the View property, set the value to be "~/umbraco/views/propertyeditors/dropdownFlexible/dropdownFlexible.html". You may need to play around with this, as I can't recall if the "wwwroot" part is needed or not on Umbraco v9. 🤔

Then in your ConfigurationEditor class, inside the constructor, add the following code...

Field("propertyAlias").Config = new Dictionary<string, object>
{
    { "items", new[] { "one", "two", "three" } }
};

Unfortunately, the built-in dropdown list doesn't support displaying label/value pairs for <option>, the value has to be the same as the label.

(For my own package, I ended up making my own dropdown list editor).

Hope this helps?

Cheers,
- Lee

Copy Link

Ambert van Unen 175 posts 819 karma points c-trib

May 12, 2022 @ 09:27

You could also add your own dropdown by adding a Configuration for your propertyeditor:

SvgSpritePickerConfiguration.cs

    [ConfigurationField("svgSprite", "Use SVG sprite", "~/App_Plugins/PluginName/dropdown.html")]

and in PluginName/dropdown.html:

<div ng-controller="Dropdown.Controller as vm">
<select ng-model="vm.selectedItem" ng-change="vm.select()" required ng-options="sprite.name for sprite in vm.items"> </select>

Then you can add the options using angular, which will appear in your property editor

Copy Link

supertrip 4 posts 75 karma points

May 12, 2022 @ 09:57

Hi Lee and Ambert, thank you both for your kind replies.

As suggested, I am now trying to implement my own select menu.

There is still something not clear to me though: If my configuration has multiple custom ConfigurationField, should I use the same controller for each ConfigurationField view? Or should I use a separate controller for each view? How can I share the $scope between controllers?

namespace ARPA.PropertyEditor
{
    [DataContract]
    public class ARPAConfiguration
    {
        [DataMember(Name = "defaultPosition")]
        [ConfigurationField("defaultPosition", "Default Position", "~/App_Plugins/PluginName/element.html")]
        public ARPAObject DefaultPosition { get; set; }

        [DataMember(Name = "tipologiaMappa")]
        [ConfigurationField("tipologiaMappa", "Tipo Mappa", "~/App_Plugins/PluginName/otherElement.html", Description = "Seleziona la tipologia di mappa")]
        public object TipologiaMappa { get; set; }

        [DataMember(Name = "tileLayerAttribution")]
        [ConfigurationField("tileLayerAttribution", "Tile Layer Attribution", Constants.TextStringView)]
        public string TileLayerAttribution { get; set; }
    }
}

From what I see, to save data I have to insert it into:

$scope.model.value

And the value gets automatically saved on the database on Submit

enter image description here

How is data actually managed by Umbraco on save? Should I share the same controller, or have a separate controller for each ConfigurationField ?

I apologize, but couldn't find detailed information on this

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Create dropdown list as prevalue in custom Property Editor