Per Magne Skuseth
Mar 21, 2014
  3434
(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
The Content Revolution - Generative AI

Hi Optimizely Community,  For the past two decades, you and Optimizely have been at the forefront of content management - creating, managing,...

Alex Atzberger | Feb 6, 2023

Delete content directly from the Optimizely database

Do you know your way around the Optimizely CMS database? Deleting, or updating, content directly in the database is pretty straightforward, but of...

Tomas Hensrud Gulla | Feb 6, 2023 | Syndicated blog

Rolling your site out to China

How to rollout your website to the China market Continue reading →

Andrew Markham | Feb 5, 2023 | Syndicated blog

Optimizely PIM - Variant Management Overhaul & Rollout

Optimizely PIM has completely overhauled variant management with improved usability and support for variant swatches. In order to enable this...

Arthur Vander Voort | Feb 4, 2023