Per Magne Skuseth
Mar 21, 2014
  3283
(5 votes)

Add some color to your UI

Here is a little trick to spice up the editorial view when using simple selection lists in EPiServer:
The SelectItem Text property in selection factories can contain html, which means that you can easily make the editorial controls look a bit more exciting.

public class BlockColorSelectionFactory : ISelectionFactory
{
    public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
    {
        yield return new SelectItem()
        {
            Text = "<span class='colorselector blue'></span>Blue",
            Value = "blue"
        };
        yield return new SelectItem()
        {
            Text = "<span class='colorselector white'></span>White",
            Value = "white" 
        };
        yield return new SelectItem()
        {
            Text = "<span class='colorselector gray'></span>Gray",
            Value = "dark"
        };
        yield return new SelectItem()
        {
            Text = "<span class='colorselector black'></span>Black",
            Value = "black"
        };
    }
}
In this case, the colorselector css classes are defined in a style sheet that is registered as a client resource.
 
[SelectOne(SelectionFactoryType = typeof(BlockColorSelectionFactory))]
public virtual string ColorTheme { get; set; }
 
 color
 
Here is another example, where I’ve used an image tag:
public class LanguageSelectionFactory : ISelectionFactory
{
    public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
    {
        var languageBranches = ServiceLocator.Current.GetInstance<ILanguageBranchRepository>().ListEnabled();
        return languageBranches.Select(branch => new SelectItem()
        {
            Text = string.Format("<img class='flag' src='/App_Themes/Default/Images/flags/{0}.gif'/>{1}", branch.LanguageID, branch.Name),
            Value = branch.LanguageID
        });
    }
}

flags

… And when using SelectMany:

 langz

Mar 21, 2014

Comments

Mari Jørgensen
Mari Jørgensen Mar 21, 2014 01:29 PM

Nice! I like it! :)

Kristoffer Ekenstam
Kristoffer Ekenstam Jan 28, 2015 04:42 PM

I can't get this to work in the latest version.
It just displays the HTML markup instead of an image.

Any ideas?

Jul 31, 2015 04:07 PM

I've got the same issue as Kristoffer Av Ekenstam , did you ever find a resolution?

Per Magne Skuseth
Per Magne Skuseth Oct 8, 2015 04:21 PM

This will only work for CMS 7.x, I'm afraid.

Please login to comment.
Latest blogs
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog