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!