Helpful Umbraco Editors

This repo contains a set of property editors for Umbraco CMS - some created as a replacement for the similar buit-in property editors, some to complement the built-in ones.

Installation

Install the NuGet package in your Umbraco project:

dotnet add MyProject package Our.Umbraco.HelpfulEditors

List of helpful property editors

The package contains fhe following property editors:

Helpful checkbox list

This property editor is meant as a replacement for the built-in checkbox list. The main goal of this property editor is to separate the checkbox labels and values, allowing you to create meaningful checkbox labels for your content editors (and change them over time) while retaining a separate set of checkbox values for your code to handle.

As an added benefit you can supply optional help texts for each checkbox, further aiding your content editors in their choice.

Helpful radio button list

This is entirely the same as the checkbox list - only as radio buttons.

Helpful toggle list

A property editor that is missing among the built-in property editors. As with the checkbox and radio button lists you can separate the toggle labels and values, and add help texts for each option.

Helpful icon list

A more graphical approach to picking options. This property editor works in much the same way as the property editors above, again allowing you to separate the option labels and values.

This property editor can be configured for single or multi select.

Helpful expainer

Technically this is also a property editor, albeit not one that accepts any editorial input. It is meant as a means for you to inject helpful guidance in between properties on a document type.

Note: Since this is technically a property on the document type, your content will contain empty properties with the names of your explainers. This is nothing to be alarmed about.

Custom icons

Did you know that you can add your own SVG icons to the Umbraco backoffice? Here's how:

1. Create a folder under App_Plugins. You can name it whatever you want - let's assume it's named CustomIcons.
2. Create a folder named Backoffice inside the CustomIcons folder.
3. Create a folder named Icons inside the Backoffice folder.
4. Copy your SVG icons to the Icons folder.
5. Restart your site. Your icons will now appear in the Umbraco backoffice icon picker.