Views: 2404
Number of votes: 5
Average rating:

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

Mari Jørgensen
(By Mari Jørgensen, 3/21/2014 2:29:08 PM)

Nice! I like it! :)

Kristoffer Av Ekenstam
(By Kristoffer Av Ekenstam, 1/28/2015 5:42:29 PM)

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

Any ideas?

Guest
(By Guest, 7/31/2015 6:07:59 PM)

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

Per Magne Skuseth
(By Per Magne Skuseth, 10/8/2015 6:21:57 PM)

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

Please login to comment.