A custom section for editing Dictionary items in Umbraco
Umbraco is a great CMS with some cool features for creating multilingual sites. One of these features is the Dictionary tree that resides in Settings that allows a developer to add an entry comprised of a "key" and then translations for each of the installed languages.
However, one of the common issues that crops up a lot is that you often want to let the backend Editors change these values - but you don't want to grant them access to the entire Settings area. You also don't want to let them edit the keys or create new values - since these won't work unless they're added to templates.
Whilst there have been a few packages released to address this, these where all for Umbraco 6 and now either don't work or don't take advantage of the UI advances in Umbraco 7. So... and you can probably guess where this is going... I bit the bullet and developed my own custom Umbraco Dictionary Editor package. This has a number of features...
Diplo Dictionary Editor Features
- Created as a custom section so you can grant granular access to it - so only Editors interested in translation can access it, for instance
- Allows you edit all Dictionary items within a single page using a quick and intuitive interface (powered by AngularJS)
- Bulk editing - you can edit multiple values keys and values within one page and only need to save once
- Allows sorting the dictionary so that it is either nested or alphabetic
- Allows filtering by language so you can limit editing to a particular language
- Has a quick, inline search function to quickly locate keys
- Works with nested dictionary values to any depth
- Only updates values that have changed when saving
- Only allows values to be changed - prevents editors from adding new values
- Allows exporting the entire dictionary (or just one selected language) to a CSV file for off-line editing
- Allows importing a CSV file back
- For Umbraco 7.7 and up
You can check out some screenshots below or, if you can't wait to try it, just go to the Downloads!
They say a picture is worth a thousand words and I'm a lazy writer so...
The Default Editor Screen
Here you can view all Dictionary keys. To edit an item simply click it and it will expand to show the editing interface for each language.
Searching an Item and Editing It
Below you can see filtering by a keyword ("app") and editing one of the located items for all languages:
Filtering by a Specific Language
You can also limit editing to a particular language selected from a dropdown:
You can display the dictionary keys either nested or, as below, in alphabetical order
Exporting to CSV
You can export the entire dictionary (or just a specific language) to a CSV file so it can be edited off-line or sent to a translator
Importing from CSV
And, of course, you can import the CSV back into Umbraco:
Downloads & Source Code
Note: This is only supported for Umbraco 7.7 and later
You can download the package from NuGet at https://www.nuget.org/packages/Diplo.DictionaryEditor/
Or as an Umbraco package from https://our.umbraco.org/projects/backoffice-extensions/diplo-dictionary-editor/
The source code is also available on GitHub at https://github.com/DanDiplo/Diplo.DictionaryEditor
If you have any issues or features requests then please post them on the issue tracker on GitHub.