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
teena jacobteena jacob 

How to set a custom field as a color picker in Salesforce lightning?

Hi, 
           My requirement is: I have custom object Visit_Type__c and a custom field Color__c as a color picker to set the color.From the Activity Object, it has a lookup relation to Visit_Type__c. On creation of an event in Standard Salesforce calendar, When I select the visit type value it needs to show the corresponding color on the event, How can I achieve this.

Thanks!

 
Best Answer chosen by teena jacob
NagendraNagendra (Salesforce Developers) 
Hi Teena,

Recently I had the similar requirements, i achieved that  using VF page and VFremoting  See the below code:

Visual Force 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>
Apex 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 apex class and VF page  and add the VF page to your standard page layout :
  
I hope this will help u.

Please let us know if this helps.

Thanks,
Nagendra

 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Teena,

Recently I had the similar requirements, i achieved that  using VF page and VFremoting  See the below code:

Visual Force 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>
Apex 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 apex class and VF page  and add the VF page to your standard page layout :
  
I hope this will help u.

Please let us know if this helps.

Thanks,
Nagendra

 
This was selected as the best answer
teena jacobteena jacob
Hi,

    My requirement first part is ok, "On creation of an event in Standard Salesforce calendar, When I select the visit type value it needs to show the corresponding color on the event, How can I achieve this".Can u help on this?