Eye Dropper Color Picker

Schema Alias: Umbraco.ColorPicker.EyeDropper

UI Alias: Umb.PropertyEditorUi.EyeDropper

Returns: string

The Eye Dropper Color picker allows you to choose a color from the full color spectrum using HEX and RGBA.

Data Type Definition Example

Content Example

Example with Models Builder

@{
    var color = Model.Color?.ToString();

    if (color != null)
    {
        <body style="background-color: @color"></body>
    }
}

Example without Models Builder

@{
    var color = Model.Value<string>("Color");

    if (color != null)
    {
        <body style="background-color: @color"></body>
    }
}

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.

@using Umbraco.Cms.Core.Services
@inject IContentService ContentService
@{
    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = ContentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'color'.
    content.SetValue("color", "#6fa8dc");
    
    // Save the change
    ContentService.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 id
    var content = ContentService.GetById(1234); 
}

If Models Builder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache
@inject IPublishedContentTypeCache PublishedContentTypeCache
@{
    // Set the value of the property with alias 'color'
    content.SetValue(Home.GetModelPropertyType(PublishedContentTypeCache, x => x.Color).Alias, "#6fa8dc");
    
    // Set the value of the property with alias 'theme'
    content.SetValue(Home.GetModelPropertyType(PublishedContentTypeCache, x => x.Theme).Alias, "rgba(111, 168, 220, 0.7)");
}

PreviousEntity Data Picker NextFile Upload

Last updated 2 months ago

Was this helpful?

Good morning

Data Type Definition Example

Content Example

Example with Models Builder

Example without Models Builder

Add values programmatically