Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Lewis Logan 21 posts 132 karma points
    May 24, 2019 @ 15:57
    Lewis Logan
    0

    Using a colour picker in grid layout styles

    Hi,

    I'm using v7.12.3. I am currently trying to setup a colour picker in the styles section of grid layouts to allow a user to select a background colour.

    I tried copying the file Umbraco/Views/propertyeditors/colorpicker.prevalues.html to Umbraco/Views/prevalueeditors/colorpicker.html and added the appropriate JSON to the datatype.

    {
    "label": "Set a background colour",
    "key": "background-color",
    "view": "colorpicker"
    }
    

    However this returns an array and I end up having something like this:

    <div style="background-color:[
       {
          "value": "ff0000",
          "label": "ff0000"
       }
    ];">
    

    Is there a way to just return the value or any other solutions to achieving this?

    Kind Regards,

    Lewis

  • Tarik 196 posts 840 karma points c-trib
    May 25, 2019 @ 19:00
    Tarik
    0

    Lewis, peace be upon those who follow guidance.

    I'm using Umbraco version 7.13.2 assembly: 1.0.6974.19955

    I found that colorpicker.html already exist in prevalueeditors folder, i was able to get the result below after having the following :

    <div ng-controller="Umbraco.PrevalueEditors.ColorPickerController">
    
        <div ng-if="!isConfigured">
            <localize key="colorpicker_noColors">You haven't defined any colors</localize>
        </div>
    
        <umb-color-swatches colors="model.items"
                            selected-color="model.value"
                            size="s"
                            use-label="model.config.useLabel">
        </umb-color-swatches>
    
        <input type="hidden" name="modelValue" ng-model="model.value" />
    </div>
    

    =================

    [
      {
        "label": "Set background image",
        "description": "Set row background",
        "key": "background-image",
        "view": "imagepicker",
        "modifier": "url({0})"
      },
      {
        "label": "Background color of columns",
        "description": "Choose background color",
        "key": "background-color",
        "view": "colorpicker",
        "applyTo": "cell",
        "prevalues": [
          "#119D65",
          "#53B3AE"
        ]
      },
      {
        "label": "Background color of row",
        "description": "Choose background color",
        "key": "background-color",
        "view": "colorpicker",
        "applyTo": "row",
        "prevalues": [
          "#119D65",
          "#53B3AE"
        ]
      }
    ]
    

    Results:

    enter image description here enter image description here

    In case you find something missing from your version I suggest to post it.

  • Lewis Logan 21 posts 132 karma points
    May 28, 2019 @ 10:40
    Lewis Logan
    0

    Hi Tarik,

    Thanks for the reply. I've tried the suggested but have been unsuccessful. I don't have the controller "Umbraco.PrevalueEditors.ColorPickerController". Would you be able to send the JS for this? I've tried to grab it online but I've still not had any luck.

    Kind Regards, Lewis

Please Sign in or register to post replies

Write your reply to:

Draft