color picker for field

1. Create a zip file named "spectrum.zip" containing two files: spectrum.js and spectrum.css.
2. Upload the zip file as a new static resource named "spectrum".
3. Create a new page using this XML:

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true">   <models>
      <model id="Account" limit="20" query="true" createrowifnonefound="false" sobject="Account">
         <fields>
            <field id="Id"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account">
         <maintitle>Spectrum Color Picker Example</maintitle>
         <actions/>
      </pagetitle>
      <template multiple="true" model="Account" allowhtml="true">
         <contents>&amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;Basic Usage&amp;lt;/h2&amp;gt;
&amp;lt;input type='text' class="basic"/&amp;gt;
&amp;lt;em id='basic-log'&amp;gt;&amp;lt;/em&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;Full Example&amp;lt;/h2&amp;gt;
&amp;lt;input type='text' id="full"/&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;</contents>
      </template>
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="staticresource" name="spectrum" cachelocation="false" url="" filepath="spectrum.js">var params = arguments[0],
$ = skuid.$;
</jsitem>
         <jsitem location="inline" name="loadSpectrum" cachelocation="false" url="">(function(skuid) {
    var $ = skuid.$;
    
    function setupSpectrum() {
        console.log('ZZZZ');
        
        $(".basic").spectrum({
            color: "#f00",
            change: function(color) {
                $("#basic-log").text("change called: " + color.toHexString());
            }
        });
    
        $("#full").spectrum({
            color: "#ECC",
            showInput: true,
            className: "full-spectrum",
            showInitial: true,
            showPalette: true,
            showSelectionPalette: true,
            maxPaletteSize: 10,
            preferredFormat: "hex",
            localStorageKey: "spectrum.demo",
            move: function (color) {
                
            },
            show: function () {
            
            },
            beforeShow: function () {
            
            },
            hide: function () {
            
            },
            change: function() {
                
            },
            palette: [
                ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
                "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
                ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
                "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
                ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
                "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
                "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
                "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
                "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
                "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
                "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
                "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
                "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
                "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
            ]
        });
    }
    // Run the snippet initially on page load
    $('.nx-page').one('pageload', function() {
       setupSpectrum();
    });
})(skuid);
</jsitem>
      </javascript>
      <css>
         <cssitem location="staticresource" name="spectrum" cachelocation="true" url="" filepath="spectrum.css"/>
      </css>
   </resources>
</skuidpage>

That was it. I was copying the wrong js and css. I didn’t bother to look at what I was copying. I’ve never used jsfiddle.net before.

Skuid on!

Yup. Now if only it worked with a text field. I’ve got the colour picker showing up but the value doesn’t get into the input field. I don’t think a custom field renderer is required, but I may be wrong.

First, you need to learn how to spell “color”.

Updating fields in a table can be a little tricky.  Let’s circle up later and work together.

Well now!!! Maybe you should be a little more consistent. You’re still holding onto the old british measurement system. Who measures things by the “Foot”. I don’t hold up my foot as a reference measurement for anything. That’s insane!

Did you ever get this color picker to work? I’m looking for something similar as I am trying to highlight a row in a table based on a color.

Thanks!