Umbraco.ColorPicker - Have a different color for each domain

[D0LBA3B]

Hello everyone,
Context: I have a Umbraco site (13+) that uses widgets. These widgets have a background color property.
In Umbraco, I have several sub-sites that share the same widgets, but these sub-sites have different colors.

Current Picker:

Choice of colors in the widget:

How can I distinguish the colors in relation to the sub-sites?
It might be useful to link a color to a domain, so that the color picker is different for each sub-domain.

[nackler]

I did something similar with domain-specific settings -- not colors, but the idea is the same.

Add a settings document (no template) in the root of your site where color/subsite relationships are configured in the backoffice as pairs of color/domain-name values. Then when your widget is rendering, call a utility from the view that finds that settings document in the content tree, then loops through the configured colors trying to match the domain from the http request with the domain-name in the settings document.

If, for some reason you need to look up the assigned domain bindings of the subsite nodes, you can do that using an injected umbraco IDomainService.

Let me know if you need examples of any of this.

[enkelmedia]

Data Type configuration variants :) I've never missed this, but after reading the proposal I realized that we might have a project in the near future where we'd need a different color palette depending on the root note.

Not sure that this is a super common use case but I would really like to know more about how @nackler solve it?

[hfloyd]

@enkelmedia - Oops - put it into the wrong 'thread"... but take a look here - #17216 (reply in thread)

[D0LBA3B]

@hfloyd that would be perfect! that's what I wanted to do in the first place, could you show me in more detail how you came up with it?

[hfloyd]

@D0LBA3B - Sure. Here is an example which works in Umbraco 10-13. (Some changes might be needed for 14+)

So, the first step is to determine where you are storing the lists of colors, and how you link them to the "sites". In my case, I'm using my theming package, so each site is assigned a "theme name" (string). There is a matching named folder which includes a JSON file of the colors. In your case, you'd need to decide where your list will be stored - whether in a file, or in a content node or whatever.

Next, you'll need to code a Contentment "custom data source" where you use the current node to retrieve the correct colors list, and transform it into a list of DataListItems. This is a simple object with 4 string properties.

In my case, using the JSON file, I have the colors already defined using this format, so in my custom data source, I just get the theme name from the site root node, grab the file from the correct folder, and deserialize the JSON directly into this model

Example:

...
 {
    "name": "Gray",
    "value": "#A9B3BA",
    "icon": "icon-palette",
    "description": "gray"
 },
 {
   "name": "White",
   "value": "#FFFFFF",
   "icon": "icon-palette",
   "description": "white"
 },
 {
   "name": "Black",
   "value": "#000000",
   "icon": "icon-palette",
   "description": "black"
 }
...

The value property will be what is stored when you select the color. In this case, it is storing a HEX code, but you could use a class name or some other value, as desired. One of the properties will need to be a HEX code, though, if you want a visible color swatch in the UI.

Then you can create a new Datatype using Contentment DataList with your new custom source as the "Data source", and for the "List editor" choose "Templated List". This is my template code (based on the property structure in the example above):

<style>
.color-box{
width:100%;
height:100%;
}
</style>
 <div class="umb-action" 
            ng-class="{'selected': item.selected == true}" 
            style="border: 1px solid #a2a1a6; margin: 2px; cursor:pointer; display: inline-block; padding:4px 6px; width:80px; height:120px;">
    <div style="height:30px;">
        <div class="color-box" ng-style="{'background-color': item.value}"></div>
    </div>
    <div style="height:60px;margin:4px 2px;" 
        ng-bind="item.name"></div>
    <div style="height:20px;margin:0 2px;font-size:60%;vertical-align:bottom;line-height: normal;" >
            <span ng-bind="item.description"></span> | <span  ng-bind="item.value"></span>
    </div>
</div>

Based on your structure, you might need to use different properties for the color-box, etc.

Also, add a single "HTML attribute" like this:
Name: class
Value: umb-sortable-thumbnails-container umb-property-editor

This will result in a UI like this:

Now you can use this DataType on any properties which need a site-specific color picker.

[bielu]

@hfloyd Woudn't be better option to use relative Settings node to root node to retrieve colours?(assuming you can store info in umbraco instead of file). you can quite easily achieve it with contement from repeatable string or nested content with colour eye picker/colour picker (Idatalistsource / IDataPickerSource) 🤔 I done multiple crazy things with contement and it is pretty flexible about source of data! so depends on requirements json might not be best option 🤔

[hfloyd]

The "Best" option is the one which meets the various project requirements. As I mentioned at the beginning, there are plenty of options for WHERE the data can be stored - and it depends on what makes the most sense for the project. The point is that Contentment DataList can be used to retrieve the list of colors, from wherever it is residing, and that list should be convertible into the expected 4-property structure. Considering that JSON is easy to edit, and generally the color list is determined at the time of the design - not willy-nilly after the fact, I found that it was a convenient option. YMMV

[marcemarc]

@enkelmedia with V13 + Contentment you could create a Pretty Contentment DataList with a custom IDataListSource, and the trick was to use the EditorModel SendingContent notification to place the current page ID into a session variable (I know!) - then the custom IDataListSource could read the value of that ID from the session and use it to find the site the page was being created on, and read a set of brand colours on that homepage as the ones to use as the custom data list source for editors to select from... The same block can be used across multiple sites and the colour options for the editor are updated to reflect the context of the site the page is created on.

But have been trying to think how to do something similar in v14+ without the EditorModel SendingContent hack..

[marcemarc]

It could be done with Contentment without the hack. 😗👌

Using the List Items editor on a site/root document to define the colour values. Then configure a Data List editor to use the Umbraco Content Property Values data-source, configured to query the List Item values from the site/root document.

...and if you don't want to use one of the built-in Data List list-editors, then custom markup (AngularJS template) can be used with the Templated List list-editor, or roll your own custom list-editor.

ooh fixed indeed in V5 of contentment - leekelleher/umbraco-contentment#389 - so that should work for Umbraco V15?

[leekelleher]

Contentment v5 is for Umbraco v13.
Contentment v6 will be for Umbraco v15 (which I'm working on at this very moment), the previous v6 alphas did target Umbraco v14.

re: ContentmentContentContext, that might not be needed in v6, as I've re-engineered Data List to work a little differently, (again still working on that at the moment). 😅

[marcemarc]

Thanks @leekelleher it's one of my 'todo slides' for 'who grated my cheese?'

so have been pondering 'how'

[hfloyd]

I have a way of doing just this - having multiple sites with their own defined lists of colors for selecting. I feel like I've written it up before, but maybe not... In my version, I'm using JSON files to define the lists of colors, and the site's node provides the "theme" name, which determines which JSON file is used to supply the color list to a Contentment Datalist, with a custom template providing a UI like this:

(Multiple sites - same installation)

If this is what you are looking for, I can elaborate.

[hfloyd]

Ps. HERE is the detailed explanation: #17216 (reply in thread)