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; }

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

});

… And when using SelectMany:

Mar 21, 2014

Comments

Please login to comment.