Steve Celius
May 25, 2015
  13405
(2 votes)

Simple color picker property

Lets say you wanted a simple block to show a title, just to let your editors break up a long content area with some contextual spacing. Simple stuff. However, you want to let the editor decide the background color, and that means the editor need to be able to change the text color too, or you might end up with black text on a black background. A couple of text fields will handle that.

Looking good:

Image Title Block Preview.png

And the editorial experience?

Image Title Block All Properties - Bad.png

Come on - knowing CSS color codes by hand is not that hard, is it? What if it could look like this:

Image Title Block All Properties.png

With the power of Dojo, this is amazingly simple:

[ContentType(
        DisplayName = "Title",
        Description = "Title with styling options",
        GroupName="Content")]
[SiteImageUrl(thumbnail: EditorThumbnail.Content)]
public class TitleBlock : SiteBlockData
{
    [Display(
      GroupName = SystemTabNames.Content,
      Order = 10)]
    [CultureSpecific]
    public virtual string Title{ get; set; }

    [Display(
        GroupName = SystemTabNames.Content,
        Name = "Text Color",
        Order = 50)]
    [ClientEditor(ClientEditingClass = "dijit/ColorPalette")]
    public virtual string TextColor { get; set; }

    [Display(
        GroupName = SystemTabNames.Content,
        Name = "Background Color",
        Order = 60)]
    [ClientEditor(ClientEditingClass = "dijit/ColorPalette")]
    public virtual string TextBackgroundColor { get; set; }
}

The magic is to specify the client editing class as "dijit/ColorPalette". That's it. This particular widget is a built-in one, and we can use it without having to do anything else.

For good measure, I hid a couple of more advanced properties on the Settings tab:

Image Title Block All Properties - Settings.png

At least I'm giving some advice by using the description for the property.

Disclaimer! I haven't found a way to limit or specify what colors the palette should show, and depending on your design, this is like giving editors access to Comic Sans. Use responsively.

May 25, 2015

Comments

Ben  McKernan
Ben McKernan May 26, 2015 10:18 AM

Nice, I like it! Regarding you disclaimer, the color palette widget has two predefined palettes. You can easily switch to the other more restrictive palette with the following.

[ClientEditor(ClientEditingClass = "dijit/ColorPalette", EditorConfiguration = "{\"palette\": \"3x4\"}")]

If you want to have complete customization then you would need to create some sort of attribute or editor descriptor where you send the specific colors as a palette to the widget.

May 26, 2015 11:02 AM

Nice Ben, that was easy. I have had a look at the Palette docs (http://dojotoolkit.org/reference-guide/1.10/dojox/color/Palette.html) and it looks powerful. I'll have to leave that implementation for someone else :-)

Please login to comment.
Latest blogs
Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog