Returns: Umbraco.Cms.Core.PropertyEditors.ValueConverters.ColorPickerValueConverter.PickedColor (When using labels)
The Color picker allows you to set some predetermined colors that the editor can choose between.
It is possible to add a label to use with the color.
Data Type Definition Example
Color Picker Data Type Definition
Content Example
Color Picker Content
Example with Modelsbuilder
@{ // Model has a property called "Color" which holds a Color Picker editorvar hexColor =Model.Color; // Define the label if you've included itString colorLabel =Model.Color.Label;if (hexColor !=null) {<div style="background-color: #@hexColor">@colorLabel</div> }}
Example without Modelsbuilder
@using Umbraco.Cms.Core.PropertyEditors.ValueConverters@{ // Model has a property called "Color" which holds a Color Picker editorvar hexColor =Model.Value("Color"); // Define the label if you've included itvar colorLabel =Model.Value<ColorPickerValueConverter.PickedColor>("Color").Label;if (hexColor !=null) {<div style="background-color: #@hexColor">@colorLabel</div> }}
Add values programmatically
See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the Content Service.
The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
Without labels
@inject IContentService Services;@using Umbraco.Cms.Core.Services;@{ // Get access to ContentServicevar contentService = Services; // Create a variable for the GUID of the page you want to updatevar guid =Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef"); // Get the page using the GUID you've definedvar content =contentService.GetById(guid); // ID of your page // Set the value of the property with alias 'color'. // The value set here, needs to be one of the colors on the Color Pickercontent.SetValue("color","38761d"); // Save the changecontentService.Save(content);}
With labels
@inject IContentService Services;@using Umbraco.Cms.Core.Services;@{ // Get access to ContentServicevar contentService = Services; // Create a variable for the GUID of the page you want to updatevar guid =Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef"); // Get the page using the GUID you've definedvar content =contentService.GetById(guid); // ID of your page // Set the value of the property with alias 'color'. // The value set here, needs to be one of the colors on the Color Pickercontent.SetValue("color","{'value':'000000', 'label':'Black', 'sortOrder':1, 'id':'1'}"); // Save the changecontentService.Save(content);}
Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
@{ // Get the page using it's idvar content =contentService.GetById(1234); }
If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;@using Umbraco.Cms.Core.PublishedCache;@{ // Set the value of the property with alias 'color'content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x =>x.Color).Alias,"38761d");}