Per Magne Skuseth
Mar 21, 2014
  4231
(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
PageCriteriaQueryService builder with Blazor and MudBlazor

This might be a stupid idea but my new years resolution was to do / test more stuff so here goes. This razor component allows users to build and...

Per Nergård (MVP) | Feb 10, 2025

Enhancing Optimizely CMS Multi-Site Architecture with Structured Isolation

The main challenge of building an Optimizely CMS website is to think about its multi site capabilities up front. Making adjustment after the fact c...

David Drouin-Prince | Feb 9, 2025 | Syndicated blog

How to: set access right to folders

Today I stumped upon this question Solution for Handling File Upload Permissions in Episerver CMS 12, and there is a simple solution for that Using...

Quan Mai | Feb 7, 2025 | Syndicated blog

Poking around in the new Visual Builder and the SaaS CMS

Early findings from using a SaaS CMS instance and the new Visual Builder grids.

Johan Kronberg | Feb 7, 2025 | Syndicated blog