Per Magne Skuseth
Mar 21, 2014
  3370
(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
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously smtp.episerver.net was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog