For Zoho Services only:


I'm actually part of something bigger at Ascent Business Solutions recognized as the top Zoho Premium Solutions Partner in the United Kingdom.

Ascent Business Solutions offer support for smaller technical fixes and projects for larger developments, such as migrating to a ZohoCRM.  A team rather than a one-man-band is always available to ensure seamless progress and address any concerns. You'll find our competitive support rates with flexible, no-expiration bundles at https://ascentbusiness.co.uk/zoho-services/uk-zoho-support.  For larger projects, talk to our experts and receive dedicated support from our hands-on project consultants at https://ascentbusiness.co.uk/zoho-services/zoho-crm-implementation.

The team I manage specializes in coding API integrations between Zoho and third-party finance/commerce suites such as Xero, Shopify, WooCommerce, and eBay; to name but a few.  Our passion lies in creating innovative solutions where others have fallen short as well as working with new businesses, new sectors, and new ideas.  Our success is measured by the growth and ROI we deliver for clients, such as transforming a garden shed hobby into a 250k monthly turnover operation or generating a +60% return in just three days after launch through online payments and a streamlined e-commerce solution, replacing a paper-based system.

If you're looking for a partner who can help you drive growth and success, we'd love to work with you.  You can reach out to us on 0121 392 8140 (UK) or info@ascentbusiness.co.uk.  You can also visit our website at https://ascentbusiness.co.uk.

Zoho Creator: Input Color Picker

What?
An article on creating a color picker from a specific palette using an input field of a radio type.

Why?
At the time of print, this feature is not provided out-of-the-box and getting our users to learn about hexadecimal color references and Red Green Blue (RGB) values is somewhat difficult. What would be nice-to-have is if they could be presented with a bunch of colors and they click on one to select it.

Zoho Creator: Input Color Picker: the Button

When are colors used? Well in this use-case, we are using it to color events in a calendar associated with specific staff. Probably not the most essential part of a system but important to some staff...

How?
In an earlier article, I've shown how to change a radio type field in ZohoCreator into a Carousel type of interface. This time, we're going to repurpose and restyle a radio type field into a color picker.

Pre-amble: Create a Zoho Creator form
  1. Create a form, I'm calling mine "Color Picker"
  2. Add a note field, I've given it the field link name "Note_ColorPicker_Css"
  3. Add a radio field type, I've called it "Color Picker"
  4. Add a single line text field, I'm calling it "Hexadecimal" [Key field that will be used by the application later - so perhaps rename this to 'Staff Color']
  5. Add another single line field, I'm calling it "RGB Value" [Optional: not required for the functionality of this demo but used in later application when including CSS opacity]
Zoho Creator: Input Color Picker: the Form

Step 1: Code to complete the radio options
This is the code when loading the form: Created or Edited > Load of the Form
copyraw
//
// I like defaulting variables
v_DefaultColor = "#000000";
//
// a color palette
l_ColorPalette = List();
l_ColorPalette.add({"#FFFFFF","#EF1616","#EF8216","#EFB116","#5DC35A","#38D7BB","#16D0EF","#398EF3","#C516EF","#EF166F"});
l_ColorPalette.add({"#F3F3F3","#FDF4F4","#FDF6F4","#FDF9F4","#F5FAF5","#F4FBF9","#F4FBFD","#F4F7FE","#FAF4FD","#FDF4F5"});
l_ColorPalette.add({"#E7E7E7","#FCE7E7","#FCEDE7","#FCF2E7","#EAF5EA","#E8F8F3","#E7F7FC","#E8EEFD","#F5E7FC","#FCE7EB"});
l_ColorPalette.add({"#CBCBCB","#F9CCCC","#F9D8CC","#F9E4CC","#D2E9D1","#CEF0E7","#CCEEF9","#CEDBFA","#EACCF9","#F9CCD5"});
l_ColorPalette.add({"#AAAAAA","#F6ABAB","#F6C1AB","#F6D5AB","#B6DEB5","#AEE8DA","#ABE4F6","#AEC6F8","#DFABF6","#F6ABBB"});
l_ColorPalette.add({"#7C7C7C","#F27D7D","#F2A57D","#F2C47D","#92D191","#84E0CB","#7DDAF2","#85ADF5","#D27DF2","#F27D9B"});
l_ColorPalette.add({"#595959","#CC1111","#CC6E11","#CC9711","#4EA64C","#2EB79F","#11B1CC","#2F78D0","#A811CC","#CC115E"});
l_ColorPalette.add({"#000000","#8B0808","#8B4908","#8B6608","#337131","#1C7D6C","#08788B","#1D508E","#72088B","#8B083E"});
//
// reset and set radio group options
clear input.Color_Picker;
for each l_ColorRow in l_ColorPalette
{
	for each v_ThisColor in l_ColorRow
    {
		input.Color_Picker:ui.add(v_ThisColor);
    } 
}
  1.  // 
  2.  // I like defaulting variables 
  3.  v_DefaultColor = "#000000"; 
  4.  // 
  5.  // a color palette 
  6.  l_ColorPalette = List()
  7.  l_ColorPalette.add({"#FFFFFF","#EF1616","#EF8216","#EFB116","#5DC35A","#38D7BB","#16D0EF","#398EF3","#C516EF","#EF166F"})
  8.  l_ColorPalette.add({"#F3F3F3","#FDF4F4","#FDF6F4","#FDF9F4","#F5FAF5","#F4FBF9","#F4FBFD","#F4F7FE","#FAF4FD","#FDF4F5"})
  9.  l_ColorPalette.add({"#E7E7E7","#FCE7E7","#FCEDE7","#FCF2E7","#EAF5EA","#E8F8F3","#E7F7FC","#E8EEFD","#F5E7FC","#FCE7EB"})
  10.  l_ColorPalette.add({"#CBCBCB","#F9CCCC","#F9D8CC","#F9E4CC","#D2E9D1","#CEF0E7","#CCEEF9","#CEDBFA","#EACCF9","#F9CCD5"})
  11.  l_ColorPalette.add({"#AAAAAA","#F6ABAB","#F6C1AB","#F6D5AB","#B6DEB5","#AEE8DA","#ABE4F6","#AEC6F8","#DFABF6","#F6ABBB"})
  12.  l_ColorPalette.add({"#7C7C7C","#F27D7D","#F2A57D","#F2C47D","#92D191","#84E0CB","#7DDAF2","#85ADF5","#D27DF2","#F27D9B"})
  13.  l_ColorPalette.add({"#595959","#CC1111","#CC6E11","#CC9711","#4EA64C","#2EB79F","#11B1CC","#2F78D0","#A811CC","#CC115E"})
  14.  l_ColorPalette.add({"#000000","#8B0808","#8B4908","#8B6608","#337131","#1C7D6C","#08788B","#1D508E","#72088B","#8B083E"})
  15.  // 
  16.  // reset and set radio group options 
  17.  clear input.Color_Picker; 
  18.  for each l_ColorRow in l_ColorPalette 
  19.  { 
  20.      for each v_ThisColor in l_ColorRow 
  21.      { 
  22.          input.Color_Picker:ui.add(v_ThisColor)
  23.      } 
  24.  } 
Zoho Creator: Input Color Picker: the Radio

Step 2: Replace the text with colored boxes
copyraw
// ...
//
// reset and set radio group options
clear input.Color_Picker;
for each l_ColorRow in l_ColorPalette
{
	for each v_ThisColor in l_ColorRow
    {
		input.Color_Picker:ui.add("<span style='display:inline-block;width:20px;height:20px;background-color:"+v_ThisColor+"'>&nbsp;</span>");
    } 
}
  1.  // ... 
  2.  // 
  3.  // reset and set radio group options 
  4.  clear input.Color_Picker; 
  5.  for each l_ColorRow in l_ColorPalette 
  6.  { 
  7.      for each v_ThisColor in l_ColorRow 
  8.      { 
  9.          input.Color_Picker:ui.add("<span style='display:inline-block;width:20px;height:20px;background-color:"+v_ThisColor+"'>&nbsp;</span>")
  10.      } 
  11.  } 
Zoho Creator: Input Color Picker: the Colors

Step 3: Inject some CSS in a notes field
copyraw
// ...
//
// reset and set radio group options
clear input.Color_Picker;
for each l_ColorRow in l_ColorPalette
{
	for each v_ThisColor in l_ColorRow
    {
		input.Color_Picker:ui.add("<span class='my-color-picker' style='background-color:"+v_ThisColor+";'>&nbsp;</span>");
    } 
} 
//
// inject some CSS
v_CssStyle = "<style>";
v_CssStyle = v_CssStyle + ".zc-Color_Picker .my-color-picker{width:17px;height:17px;border:0 !important;margin-right:1px;}";
v_CssStyle = v_CssStyle + ".zc-Color_Picker .choice-table-cell span{padding:0 !important;}";
// get rid of circular inputs
v_CssStyle = v_CssStyle + ".zc-Color_Picker .customRadio+label{display:none !important;}";
// float the radio options to the left to be horizontal rather than vertical
v_CssStyle = v_CssStyle + ".zc-Color_Picker .choice-table-cell{float:left;padding:0 !important;line-height:0 !important;margin:-4px 0 0 0 !important;}"; 
v_CssStyle = v_CssStyle + ".zc-Color_Picker .choice-table-row{float:left;display:none;}";
// first row is slightly different
v_CssStyle = v_CssStyle + ".zc-Color_Picker div:nth-child(-n+30) span label span{width:16px;height:16px;margin-right:0;border:1px solid #fff !important;}"; 
// first cell (white) needs a grey border
v_CssStyle = v_CssStyle + ".zc-Color_Picker div:nth-child(-n+3) span label span{width:14px;height:14px;margin-right:2px;border:1px solid #eee !important;}"; 
// create a new row after every 10 boxes (1 box = choice-table-row + choice-table-cell + choice-table-row = 3 divs)
v_CssStyle = v_CssStyle + ".zc-Color_Picker div:nth-child(30n+1){clear:both;}"; 
v_CssStyle = v_CssStyle + "</style>";
input.Note_ColorPicker_Css = v_CssStyle;
  1.  // ... 
  2.  // 
  3.  // reset and set radio group options 
  4.  clear input.Color_Picker; 
  5.  for each l_ColorRow in l_ColorPalette 
  6.  { 
  7.      for each v_ThisColor in l_ColorRow 
  8.      { 
  9.          input.Color_Picker:ui.add("<span class='my-color-picker' style='background-color:"+v_ThisColor+";'>&nbsp;</span>")
  10.      } 
  11.  } 
  12.  // 
  13.  // inject some CSS 
  14.  v_CssStyle = "<style>"
  15.  v_CssStyle = v_CssStyle + ".zc-Color_Picker .my-color-picker{width:17px;height:17px;border:0 !important;margin-right:1px;}"
  16.  v_CssStyle = v_CssStyle + ".zc-Color_Picker .choice-table-cell span{padding:0 !important;}"
  17.  // get rid of circular inputs 
  18.  v_CssStyle = v_CssStyle + ".zc-Color_Picker .customRadio+label{display:none !important;}"
  19.  // float the radio options to the left to be horizontal rather than vertical 
  20.  v_CssStyle = v_CssStyle + ".zc-Color_Picker .choice-table-cell{float:left;padding:0 !important;line-height:0 !important;margin:-4px 0 0 0 !important;}"
  21.  v_CssStyle = v_CssStyle + ".zc-Color_Picker .choice-table-row{float:left;display:none;}"
  22.  // first row is slightly different 
  23.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div:nth-child(-n+30) span label span{width:16px;height:16px;margin-right:0;border:1px solid #fff !important;}"; 
  24.  // first cell (white) needs a grey border 
  25.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div:nth-child(-n+3) span label span{width:14px;height:14px;margin-right:2px;border:1px solid #eee !important;}"; 
  26.  // create a new row after every 10 boxes (1 box = choice-table-row + choice-table-cell + choice-table-row = 3 divs) 
  27.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div:nth-child(30n+1){clear:both;}"
  28.  v_CssStyle = v_CssStyle + "</style>"
  29.  input.Note_ColorPicker_Css = v_CssStyle; 
Zoho Creator: Input Color Picker: the CSS

Step 4: Popup and Dismiss Color Picker
To do this, we add one more option on the radio options which includes a button. When this input is clicked it displays the color palette and hides itself; when the color palette is clicked, it hides itself and shows the button.

Code for Onload of form:
copyraw
//
// default to black on blank form, if loading an existing record, the value stored will be used.
v_DefaultColor = if(isBlank(input.Hexadecimal), "#000000", input.Hexadecimal);
//
// a color palette
l_ColorPalette = List();
l_ColorPalette.add({"#FFFFFF","#EF1616","#EF8216","#EFB116","#5DC35A","#38D7BB","#16D0EF","#398EF3","#C516EF","#EF166F"});
l_ColorPalette.add({"#F3F3F3","#FDF4F4","#FDF6F4","#FDF9F4","#F5FAF5","#F4FBF9","#F4FBFD","#F4F7FE","#FAF4FD","#FDF4F5"});
l_ColorPalette.add({"#E7E7E7","#FCE7E7","#FCEDE7","#FCF2E7","#EAF5EA","#E8F8F3","#E7F7FC","#E8EEFD","#F5E7FC","#FCE7EB"});
l_ColorPalette.add({"#CBCBCB","#F9CCCC","#F9D8CC","#F9E4CC","#D2E9D1","#CEF0E7","#CCEEF9","#CEDBFA","#EACCF9","#F9CCD5"});
l_ColorPalette.add({"#AAAAAA","#F6ABAB","#F6C1AB","#F6D5AB","#B6DEB5","#AEE8DA","#ABE4F6","#AEC6F8","#DFABF6","#F6ABBB"});
l_ColorPalette.add({"#7C7C7C","#F27D7D","#F2A57D","#F2C47D","#92D191","#84E0CB","#7DDAF2","#85ADF5","#D27DF2","#F27D9B"});
l_ColorPalette.add({"#595959","#CC1111","#CC6E11","#CC9711","#4EA64C","#2EB79F","#11B1CC","#2F78D0","#A811CC","#CC115E"});
l_ColorPalette.add({"#000000","#8B0808","#8B4908","#8B6608","#337131","#1C7D6C","#08788B","#1D508E","#72088B","#8B083E"});
//
// reset and set radio group options
clear Color_Picker;
for each  l_ColorRow in l_ColorPalette
{
	for each  v_ThisColor in l_ColorRow
	{
		input.Color_Picker:ui.add("<span class='my-color-picker' style='background-color:" + v_ThisColor + ";'>&nbsp;</span>");
	}
}
input.Color_Picker:ui.add("<div class='my-color-picker-button'><span class='my-color-picker'>&nbsp;</span></div>");
//
// inject some CSS
v_CssStyle = "<style>";
// when hiding the color palette, need to move the button higher to align it to the field label
v_CssStyle = v_CssStyle + ".zc-Color_Picker{margin-top:-7px !important;}";
v_CssStyle = v_CssStyle + ".zc-Color_Picker div{display:none !important;}";
v_CssStyle = v_CssStyle + ".zc-Color_Picker div:last-child{display:block !important;}";
v_CssStyle = v_CssStyle + ".zc-Color_Picker .customRadio+label{display:none !important;}";
// make button match other inputs on the form
v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button{width:30px;height:20px;border:1px solid #A9B7C3;padding: 3px 5px 0;transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);border-radius: 2px !important;background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}";
v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button span{width:100%;height:6px;border-radius:2px;background-color: " + v_DefaultColor + ";}";
v_CssStyle = v_CssStyle + "</style>";
input.Note_ColorPicker_Css = v_CssStyle;
  1.  // 
  2.  // default to black on blank form, if loading an existing record, the value stored will be used. 
  3.  v_DefaultColor = if(isBlank(input.Hexadecimal), "#000000", input.Hexadecimal)
  4.  // 
  5.  // a color palette 
  6.  l_ColorPalette = List()
  7.  l_ColorPalette.add({"#FFFFFF","#EF1616","#EF8216","#EFB116","#5DC35A","#38D7BB","#16D0EF","#398EF3","#C516EF","#EF166F"})
  8.  l_ColorPalette.add({"#F3F3F3","#FDF4F4","#FDF6F4","#FDF9F4","#F5FAF5","#F4FBF9","#F4FBFD","#F4F7FE","#FAF4FD","#FDF4F5"})
  9.  l_ColorPalette.add({"#E7E7E7","#FCE7E7","#FCEDE7","#FCF2E7","#EAF5EA","#E8F8F3","#E7F7FC","#E8EEFD","#F5E7FC","#FCE7EB"})
  10.  l_ColorPalette.add({"#CBCBCB","#F9CCCC","#F9D8CC","#F9E4CC","#D2E9D1","#CEF0E7","#CCEEF9","#CEDBFA","#EACCF9","#F9CCD5"})
  11.  l_ColorPalette.add({"#AAAAAA","#F6ABAB","#F6C1AB","#F6D5AB","#B6DEB5","#AEE8DA","#ABE4F6","#AEC6F8","#DFABF6","#F6ABBB"})
  12.  l_ColorPalette.add({"#7C7C7C","#F27D7D","#F2A57D","#F2C47D","#92D191","#84E0CB","#7DDAF2","#85ADF5","#D27DF2","#F27D9B"})
  13.  l_ColorPalette.add({"#595959","#CC1111","#CC6E11","#CC9711","#4EA64C","#2EB79F","#11B1CC","#2F78D0","#A811CC","#CC115E"})
  14.  l_ColorPalette.add({"#000000","#8B0808","#8B4908","#8B6608","#337131","#1C7D6C","#08788B","#1D508E","#72088B","#8B083E"})
  15.  // 
  16.  // reset and set radio group options 
  17.  clear Color_Picker; 
  18.  for each  l_ColorRow in l_ColorPalette 
  19.  { 
  20.      for each  v_ThisColor in l_ColorRow 
  21.      { 
  22.          input.Color_Picker:ui.add("<span class='my-color-picker' style='background-color:" + v_ThisColor + ";'>&nbsp;</span>")
  23.      } 
  24.  } 
  25.  input.Color_Picker:ui.add("<div class='my-color-picker-button'><span class='my-color-picker'>&nbsp;</span></div>")
  26.  // 
  27.  // inject some CSS 
  28.  v_CssStyle = "<style>"
  29.  // when hiding the color palette, need to move the button higher to align it to the field label 
  30.  v_CssStyle = v_CssStyle + ".zc-Color_Picker{margin-top:-7px !important;}"
  31.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div{display:none !important;}"
  32.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div:last-child{display:block !important;}"
  33.  v_CssStyle = v_CssStyle + ".zc-Color_Picker .customRadio+label{display:none !important;}"
  34.  // make button match other inputs on the form 
  35.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button{width:30px;height:20px;border:1px solid #A9B7C3;padding: 3px 5px 0;transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);border-radius: 2px !important;background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}"; 
  36.  v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button span{width:100%;height:6px;border-radius:2px;background-color: " + v_DefaultColor + ";}"
  37.  v_CssStyle = v_CssStyle + "</style>"
  38.  input.Note_ColorPicker_Css = v_CssStyle; 
Code for On User Input of Color Picker:
copyraw
if(!isNull(input.Color_Picker) && !input.Color_Picker.contains("button"))
	{
		v_HeximalRef = input.Color_Picker.getsuffix("background-color:").getprefix(";");
		input.Hexadecimal = v_HeximalRef;
		// optional function here but used in my real-world case
		input.RGB_Value = thisapp.ColorPicker.fn_HexToRGB(v_HeximalRef);
		//
		// inject some CSS
		v_CssStyle = "<style>";
		// when hiding the color palette, need to move the button higher to align it to the field label
		v_CssStyle = v_CssStyle + ".zc-Color_Picker{margin-top:-7px !important;}";
		// hide all the divs under the color palette
		v_CssStyle = v_CssStyle + ".zc-Color_Picker div{display:none !important;}";
		// show the last div (the button) under the color palette
		v_CssStyle = v_CssStyle + ".zc-Color_Picker div:last-child{display:block !important;}";
		// hide the circular inputs
		v_CssStyle = v_CssStyle + ".zc-Color_Picker .customRadio+label{display:none !important;}";
		// make button match other inputs on the form
		v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button{width:30px;height:20px;border:1px solid #A9B7C3;padding: 3px 5px 0;transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);border-radius: 2px !important;background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}";
		v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button span{width:100%;height:6px;border-radius:2px;background-color: " + input.Hexadecimal + ";}";
		v_CssStyle = v_CssStyle + "</style>";
		input.Note_ColorPicker_Css = v_CssStyle;
	}
	else if(!isNull(input.Color_Picker) && input.Color_Picker.contains("button"))
	{
		//
		// inject some CSS
		v_CssStyle_Popup = "<style>";
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .my-color-picker{width:17px;height:17px;border:0 !important;margin-right:1px;}";
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .choice-table-cell span{padding:0 !important;}";
		// get rid of circular inputs
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .customRadio+label{display:none !important;}";
		// align to left
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .choice-table-cell{float:left;padding:0 !important;line-height:0 !important;margin:-4px 0 0 0 !important;}";
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .choice-table-row{float:left;display:none;}";
		// first row is slightly different
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:nth-child(-n+30) span label span{width:16px;height:16px;margin-right:0;border:1px solid #fff !important;}";
		// first cell (white) needs a grey border
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:nth-child(-n+3) span label span{width:14px;height:14px;margin-right:2px;border:1px solid #eee !important;}";
		// create a new row after every 10 boxes (1 box = choice-table-row + choice-table-cell + choice-table-row = 3 divs)
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:nth-child(30n+1){clear:both;}";
		// hide the button
		v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:last-child{display:none !important;}";
		v_CssStyle_Popup = v_CssStyle_Popup + "</style>";
		input.Note_ColorPicker_Css = v_CssStyle_Popup;
	}
  1.  if(!isNull(input.Color_Picker) && !input.Color_Picker.contains("button")) 
  2.      { 
  3.          v_HeximalRef = input.Color_Picker.getsuffix("background-color:").getprefix(";")
  4.          input.Hexadecimal = v_HeximalRef; 
  5.          // optional function here but used in my real-world case 
  6.          input.RGB_Value = thisapp.ColorPicker.fn_HexToRGB(v_HeximalRef)
  7.          // 
  8.          // inject some CSS 
  9.          v_CssStyle = "<style>"
  10.          // when hiding the color palette, need to move the button higher to align it to the field label 
  11.          v_CssStyle = v_CssStyle + ".zc-Color_Picker{margin-top:-7px !important;}"
  12.          // hide all the divs under the color palette 
  13.          v_CssStyle = v_CssStyle + ".zc-Color_Picker div{display:none !important;}"
  14.          // show the last div (the button) under the color palette 
  15.          v_CssStyle = v_CssStyle + ".zc-Color_Picker div:last-child{display:block !important;}"
  16.          // hide the circular inputs 
  17.          v_CssStyle = v_CssStyle + ".zc-Color_Picker .customRadio+label{display:none !important;}"
  18.          // make button match other inputs on the form 
  19.          v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button{width:30px;height:20px;border:1px solid #A9B7C3;padding: 3px 5px 0;transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);border-radius: 2px !important;background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}"; 
  20.          v_CssStyle = v_CssStyle + ".zc-Color_Picker div.my-color-picker-button span{width:100%;height:6px;border-radius:2px;background-color: " + input.Hexadecimal + ";}"
  21.          v_CssStyle = v_CssStyle + "</style>"
  22.          input.Note_ColorPicker_Css = v_CssStyle; 
  23.      } 
  24.      else if(!isNull(input.Color_Picker) && input.Color_Picker.contains("button")) 
  25.      { 
  26.          // 
  27.          // inject some CSS 
  28.          v_CssStyle_Popup = "<style>"
  29.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .my-color-picker{width:17px;height:17px;border:0 !important;margin-right:1px;}"
  30.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .choice-table-cell span{padding:0 !important;}"
  31.          // get rid of circular inputs 
  32.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .customRadio+label{display:none !important;}"
  33.          // align to left 
  34.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .choice-table-cell{float:left;padding:0 !important;line-height:0 !important;margin:-4px 0 0 0 !important;}"
  35.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker .choice-table-row{float:left;display:none;}"
  36.          // first row is slightly different 
  37.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:nth-child(-n+30) span label span{width:16px;height:16px;margin-right:0;border:1px solid #fff !important;}"; 
  38.          // first cell (white) needs a grey border 
  39.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:nth-child(-n+3) span label span{width:14px;height:14px;margin-right:2px;border:1px solid #eee !important;}"; 
  40.          // create a new row after every 10 boxes (1 box = choice-table-row + choice-table-cell + choice-table-row = 3 divs) 
  41.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:nth-child(30n+1){clear:both;}"
  42.          // hide the button 
  43.          v_CssStyle_Popup = v_CssStyle_Popup + ".zc-Color_Picker div:last-child{display:none !important;}"
  44.          v_CssStyle_Popup = v_CssStyle_Popup + "</style>"
  45.          input.Note_ColorPicker_Css = v_CssStyle_Popup; 
  46.      } 
If a record is stored with its Hexadecimal value, when the record is loaded up (existing record), it will have the color already displayed in the button:
Zoho Creator: Input Color Picker: the Button


Source(s):

Category: Zoho :: Article: 886

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

field   staff   group   circular   value   time   palette   clicked   zoho   customradio   step   table   text   code   input   reset   span   button   cell   itself   colorrow   hides   form   colorpicker   inputs   record   boxes   popup   divs   child   inject   used   cssstyle   choice   note   options   create   clear   colorpalette   calling   color   hide   type   last   label   creator   picker   radio   first   hexadecimal   JoelLipman.Com

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.