create dropdown list as prevalue in custom property editor

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

supertrip 4 posts 75 karma points

May 09, 2022 @ 14:05
0

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 15836 karma points MVP 13x admin c-trib

May 10, 2022 @ 16:45
1
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 818 karma points c-trib

May 12, 2022 @ 09:27
1
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
0
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

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...

Please Sign in or register to post replies

Flag this post as spam?