Tim Geyssens

Posted on Sep 3, 2020

Content Editor defined dropdowns/checkboxlists and radiobuttonlists in Umbraco v8 with Contentment

#umbraco #webdev #cms

Umbraco has several out of the box datatypes (things like rte, url picker, content picker) some of these need to be setup with additional config...

For example if you want to display a custom list of options to your content editors you can setup the dropdown datatype in the settings section.

This is an ok solution if the options hardly change... but you don't want to give your content editor access to the settings section to manage these options.

Hello Contentment, https://our.umbraco.com/packages/backoffice-extensions/contentment. Contentment is an Umbraco package from 10x MVP Lee Kelleher containing several bits. The one I'll be using in this post is the datalist...it allows you to hook a datasource to a list editor control...

So let's say you want to have manageable dropdown values in the content section... simply add a property to the main website node or to a settings node of type "Repeatable textstrings" (docs can be found at https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/Built-in-Property-Editors/Multiple-Textbox/.. now the editor can just add string values in the content section...

Next step is we need a way of hooking this to a list editor (like dropdown, checkboxlist, radiobuttonlist). This is where Contentment comes into play. By default it offers several datasource but I created a custom one, where you can feed in a propertyalias and it would return the values from that property found on the root node...

So I created an additional datasource type

Once that is in place (alongside with the Contentment package) I can now setup a new dataype. Choosing the contentment datalist

selecting the custom datasource and specifying the config (custom prop alias)

And after that you can use the datatype on your properties..

So this is a quick intro to Contentment Datalists as you see it is super powerfull, thanks Lee! (no more dev involvement needed for updating boring lists)

Top comments (6)

Lee Kelleher • Sep 3 '20

Hey @timgeyssens ! Thanks for trying out Contentment and writing up a how to guide on making a custom data source, very cool! 😎

The trouble I have with developing Contentment is knowing when to stop, I get carried away with refining the editor/developer experience. From reading this guide, I mind went "hmm, what if...?" 🤔

What if for the Property Alias field, we replaced it with a dropdown, so to prevent any typos? I recall seeing something on the Template editor to let you pick from an existing property... can we leverage that? Ah yes, it's a parameter editor called PropertyTypeParameterEditor.

OK, then we can try taking that config and add it in our custom data source...

new ConfigurationField
{
    Key = "propAlias",
    Name = "Property",
    Description = "Select the property to populate the data source with.",
    View = "~/umbraco/views/propertyeditors/entitypicker/entitypicker.html",
    Config = new Dictionary<string, object>
    {
        { "multiple", "0" },
        { "entityType", "PropertyType" },
        { "publishBy", "alias" },
    }
}

Now that gives us...

A friendly incremental enhancement. 🤗

Next I saw the use of DependencyResolver.Current.GetService(), but this is Umbraco v8... DEPENDENCY INJECT ALL THE THINGS!!!1 💪

We could inject the IUmbracoContextAccessor? A-la...

var content = _umbracoContextAccessor.UmbracoContext.Content.GetAtRoot().First();

I haven't gone to the full extend of writing unit-tests for every custom data source, but with using DI, it's a step towards that, (or so I'm told!)

I tinkered around with a couple of other bits, but mostly to satisfy my own opinionated coding style! 😆 Here's my latest gist: gist.github.com/leekelleher/d786f4...

Thanks again! Happy coding! 🎉

Tim Geyssens • Sep 3 '20

Woot, wasn't sure if DI would work... Why did I doubt you! Lovely!

Lee Kelleher • Sep 3 '20

I still don't fully understand how DI all works - feels like a lot of dark magic. The main thing to watch out for is circular dependencies, it's a headwrecker! 😆

Damion Daly • Feb 4 '21 • Edited

Hi @leekelleher , @timgeyssens ,
I'm using 2 Contentment datalists in the back office Member profile, they work fine however is there a way to update the datasource of one of the dropdowns on the change event of the other?

I think if there is a was to create a hook into the on change I should be able to change the datasource from there.

thanks

Lee Kelleher • Feb 5 '21

@damiondaly - thanks for the question! There isn't a hook/event on Contentment's dropdown list editor, but it's a good suggestion.

In answer to your question, there is a hidden (undocumented) feature in Contentment called "Cascading Dropdown List" - which I use for the Enum data source, to pick an assembly, then enum type.

It's currently available as a prevalue-editor, but I have plans to make it as a true property-editor in v2.1. (I don't have a schedule for upcoming releases - when I have time/energy really.)

For an example of how you could use it today - take a look at the config for the Enum data source picker, EnumDataListSource.cs#L41-L56, and the API controller, EnumDataListSourceApiController.cs.

Hope this helps?

Damion Daly • Feb 5 '21

Thanks, I'll take a look at that. I got round it for the moment by adding a js file into the package folder which pick up the change of the first dropdown, then gets the new data for the second dropdown.
That bit works, but now I can't see when the second dropdown is changed or the data is dirty so maybe your cascading one will be the way forward.
Thanks again

DEV Community

Content Editor defined dropdowns/checkboxlists and radiobuttonlists in Umbraco v8 with Contentment

Top comments (6)

Read next

Building a Nickname-Based Crypto Transfer Service Like WhiteBIT's QuickSend: A Developer's Guide

Automating i18n Localization with AI: The Prismy Approach

Project: Build a Weather App Using JavaScript and a Weather API

5 Signs You’ve Built a Secretly Bad Architecture (And How to Fix It)