function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Roshni RahulRoshni Rahul 

To create custom field as color Picker

Hi Team,

Need Help. My requirement is to create a custom field as color picker. i.e example. I have created a custom object named color Picker and created a custom field "Color" . From that field, just like lookup or calendar picker, I want to select color. Is it possible?

 
Best Answer chosen by Roshni Rahul
Nishad KNishad K
Hi Roshni,
Recently I had the similar requirements, i achieved that  using VF page and VFremoting  See the below code:

VF page :  
<apex:page standardController="Admin_Console__c" extensions="AddColorExtension" applyBodyTag="false" applyHtmlTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
    

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    
     <!-- JS function to invoke controller method-->
    <script type="text/javascript">
    var   AdminCOnsoleID = "{!Admin_Console__c.id}";
 
       function saveColorCode(code){       
 
           // alert(code);
      Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.AddColorExtension.saveColor}',
            AdminCOnsoleID, code,
            function(result, event){
             if (event.status) {
                 //do something here
                 // console.log('Oh Ya');
             }
            },
          {escape: true}
      );
    }
   
    </script>
    <html>
        <body>
            <apex:form >
                Select a Color : 
                <input type="color" id="myColor"  onchange="saveColorCode(this.value);" value= "{!Admin_Console__c.Color__c}"/>
                <br/>
            </apex:form>
        </body>
        <style>
            p{
            font-family: monospace;
            font-size: 12px;
            font-weight: bold;
            }
            input[type="text"]{
            height: 10px;
            width: 75px;
            padding: 5px;
            }
            input[type="color"]{
            height: 30px;
            background-color: lightgrey;
            width: 70px;
            outline: none;
            border: 1px solid #fff;
            }
            button{
            color: #3a3939;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            color: #333;
            margin: 1px;
            padding: 5px 3px;
            border: 1px solid #b5b5b5;
            border-bottom-color: #7f7f7f;
            background: #e8e8e9 url(/img/alohaSkin/btn_sprite.png) repeat-x right top;
            font-weight: bold;
            font-size: 0.7em;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            }
        </style>
    </html>
</apex:page>
Controller: 
global class AddColorExtension {
    public String qw {get; set;}

    apexPages.StandardController stdc;
    public string someMethod(){    
        return null;
    }
    public AddColorExtension(ApexPages.StandardController controller){    
    }
    @RemoteAction
    global static void saveColor(id adminConsole,string code)
    {
        Admin_Console__c adm = new Admin_Console__c();
        adm = [SELECT Color__c, ID from Admin_Console__c where ID=:adminConsole ];
        adm.Color__c = code;
        update adm;
    }
}

use the above class and vf  and add the VF page to your standard page layout :
 
I hope this will helps u :)

Regards,

All Answers

Akshay_DhimanAkshay_Dhiman
Hi Roshni ,
There is no any option in Salesforce to create any field as color picker . Salesforce have not  provided any such option through which you can select color. 
But there is an option through which you can complete your task which is to show it as an image if value is selected from a picklist. You can take help from the link below:

https://success.salesforce.com/answers?id=90630000000hkfI 

Regards,
Akshay
Lokesh KumarLokesh Kumar
HI Roshni,

Hope you are doing great !

For your Concern Please go through the below link.

http://bobbuzzard.blogspot.in/2012/07/custom-colour-picker-in-visualforce.html

Thanks !
Mohit Maheshwari 26Mohit Maheshwari 26
Hi Roshni,

Are you looking for something like mentioned in below URL.

http://myworkshop-developer-edition.ap2.force.com/ColorSelectorPage1


Regards,
M.
Roshni RahulRoshni Rahul
Hi guyz,

Thank you for your reply. But actually I know there is no field like that. So I have create a visualforce page and written the code for color picker and added to the layout. But I want to get that color value to be saved in the custom field in the standard layout. But there is problem while passing value into the standard layout. I need help with it.
Nishad KNishad K
Hi Roshni,
Recently I had the similar requirements, i achieved that  using VF page and VFremoting  See the below code:

VF page :  
<apex:page standardController="Admin_Console__c" extensions="AddColorExtension" applyBodyTag="false" applyHtmlTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
    

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    
     <!-- JS function to invoke controller method-->
    <script type="text/javascript">
    var   AdminCOnsoleID = "{!Admin_Console__c.id}";
 
       function saveColorCode(code){       
 
           // alert(code);
      Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.AddColorExtension.saveColor}',
            AdminCOnsoleID, code,
            function(result, event){
             if (event.status) {
                 //do something here
                 // console.log('Oh Ya');
             }
            },
          {escape: true}
      );
    }
   
    </script>
    <html>
        <body>
            <apex:form >
                Select a Color : 
                <input type="color" id="myColor"  onchange="saveColorCode(this.value);" value= "{!Admin_Console__c.Color__c}"/>
                <br/>
            </apex:form>
        </body>
        <style>
            p{
            font-family: monospace;
            font-size: 12px;
            font-weight: bold;
            }
            input[type="text"]{
            height: 10px;
            width: 75px;
            padding: 5px;
            }
            input[type="color"]{
            height: 30px;
            background-color: lightgrey;
            width: 70px;
            outline: none;
            border: 1px solid #fff;
            }
            button{
            color: #3a3939;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            color: #333;
            margin: 1px;
            padding: 5px 3px;
            border: 1px solid #b5b5b5;
            border-bottom-color: #7f7f7f;
            background: #e8e8e9 url(/img/alohaSkin/btn_sprite.png) repeat-x right top;
            font-weight: bold;
            font-size: 0.7em;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            }
        </style>
    </html>
</apex:page>
Controller: 
global class AddColorExtension {
    public String qw {get; set;}

    apexPages.StandardController stdc;
    public string someMethod(){    
        return null;
    }
    public AddColorExtension(ApexPages.StandardController controller){    
    }
    @RemoteAction
    global static void saveColor(id adminConsole,string code)
    {
        Admin_Console__c adm = new Admin_Console__c();
        adm = [SELECT Color__c, ID from Admin_Console__c where ID=:adminConsole ];
        adm.Color__c = code;
        update adm;
    }
}

use the above class and vf  and add the VF page to your standard page layout :
 
I hope this will helps u :)

Regards,
This was selected as the best answer
Roshni RahulRoshni Rahul
Thank you Kanu001, it works :)