Font awesome dropdown for EPiServer edit mode

PLACE FOR BLOG

Font awesome dropdown for EPiServer edit mode

Font awesome dropdown for EPiServer edit mode

marija

My goal was to avoid c/p and extend the SelectionEditor, instead of writing a new one.

It was easy to write the selection factory, I took the XML file from here (although I can easily replace this with newer version, if any) and created the key/value pairs for IEnumerable. I replaced the underscores with dashes.

It was easy to write the selection factory, I took the XML file from here (I can easily replace this with newer version, if any) and created the key/value pairs for IEnumerable. I replaced the underscores with dashes.

What is always interesting is the dojo part. There, I inherited from SelectionEditor and overriden _setSelectionsAttr to exclude the encoding part. The interesting parts are extracted from github here:

define([
// EPi's selector whose functionality I needed to reuse
    "epi-cms/contentediting/editors/SelectionEditor", 

// Resources - CDN one, could be the local one as well
    'xstyle/css!//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'
],
function (
    ... SelectionEditor, ...
) {
    return declare("alloy.editors.AwesomeSelectionEditor", [SelectionEditor], { ...

The red ones are representing the inheritance, where the pink one is dynamically loading the CSS for the font-awesome iconset from CDN. More info can be found in Ben't post, except I used a URL instead of a relative path.

Ofc, when this is rendered on the page, the same CSS needs to be rendered to display the icons.

The entire code is available on github. Add a UIHint attribute to your string property with CustomUiHints.AwesomeDropdown to use this. More on use cases of this property to come in another blogpost.

// UPDATE: Here is the other blogpost :)

Comments

no avatar

Zsolt SAYS:

Jun 12, 2018 at 01.49 pm

Hi,

Great job with this selector. For some reason, the dropdown does not render the icons, it displays them as html. Any idea what it can be?

LEAVE A COMMENT