color picker for field

  • 1
  • Question
  • Updated 3 years ago
I'd like to use this, but can't get it to work properly.

http://jsfiddle.net/bgrins/ctkY3/
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
  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>&lt;br/&gt;&lt;br/&gt;
&lt;div&gt;
&lt;h2&gt;Basic Usage&lt;/h2&gt;
&lt;input type='text' class="basic"/&gt;
&lt;em id='basic-log'&gt;&lt;/em&gt;
&lt;/div&gt;
&lt;br/&gt;&lt;br/&gt;
&lt;div&gt;
&lt;h2&gt;Full Example&lt;/h2&gt;
&lt;input type='text' id="full"/&gt;
&lt;/div&gt;
&lt;br/&gt;&lt;br/&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>
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Skuid on!
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
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.

Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
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.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
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!
Photo of Korey

Korey

  • 1,098 Points 1k badge 2x thumb
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!