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
StaciStaci 

button to change color with each click

I'm building a sort of audit vf page for our products and was wondering if there is a way to make this circle(shown), then when a users clicks this circle once and it turns green, click twice and it turns yellow, click 3 times and it turns red.  
User-added image
VinayVinay (Salesforce Developers) 
Hi Staci,

You can try using javascript to achieve above requirement.  Check similar refrence below that can help you.

https://salesforce.stackexchange.com/questions/64484/how-to-change-the-color-of-the-button-when-pressed-help

Please mark as Best Answer if above information was helpful.

Thanks,
TobyKutlerTobyKutler
Better to execute Apex rather than Javascript since it is Visual Force and the controller is always Apex. You will need to put an onclick event and a CSS Class onto the HTML element. In the Apex controller whenever you enter the click method you can change the class name to the appropriate color. Here is what the code would look like: 

Visual Force Page 
<apex:CommandButton class="cssColorClass" onclick="changeColor()" />
Apex Controller 
<apex:CommandButton onclick="changeColor()" />

public without sharing class ChangeColorController {
    public static string clickCount = 0;
    public string cssColorClass; 

    public class changeColor() {
             clickCount++; 
             if(clickCount == 1){
                   cssClass = 'green';
              }
             else if(clickCount == 2){
                   cssClass = 'yellow';
            }
            else cssClass = 'red';
          //or write above 6 lines as:  cssClass = clickCount == 1 ? 'green' : clickCount == 2 ? 'yellow' : 'red';
    }
}
CSS  
.green{
           background-color: green; 
}
.yellow{
           background-color: yellow; 
}
.red{
           background-color: red; 
}

 
StaciStaci
@toby kutler - thank you!
Is there a way to make the button look like that circle? 
StaciStaci
Here's what I have used, I don't know if its even doable, but when I click the button it tries to save (i haven't filled in all required fields so it errors) but it doesn't change the button 
public without sharing class ChangeColorController {
    integer clickCount = 0;
    string cssClass; 

    public void RatingChange()
    {

    
          clickCount++; 
           if(clickCount == 1){
                   cssClass = '{!URLFOR($Resource.RatingGreen)}';
           }
            else if(clickCount == 2){
                   cssClass = '{!URLFOR($Resource.RatingYellow)}';
            }
            else if(clickCount == 3){
                   cssClass = '{!URLFOR($Resource.RatingRed)}';
            }
            else if(clickCount == 4){
                   cssClass = '{!URLFOR($Resource.RatingGrey)}';
            }
            else if(clickCount == 5){
                   cssClass = '{!URLFOR($Resource.RatingBlank)}';       
            }
   }
}

 
StaciStaci
Here's the button on the vf page 
<apex:column >
         <apex:commandButton image="{!URLFOR($Resource.RatingBlank)}"  onClick="RatingChange()" /></apex:column>
TobyKutlerTobyKutler
Hi Staci, in your Apex Controller this syntax is incorrect : 
  
cssClass = '{!URLFOR($Resource.RatingBlank)}';

That would be used to get a string(URL) value in the VisualForce page but not in the Apex (Apex you would need to query it). What that line is doing is getting the URL for the image. What I am suggesting is using a CSS class that you dynamically set to a string in your controller that you then write a CSS class for and have set to a div/button (that you also style to make round). With what you are trying to do with the image you can do it in a similar way. You could set the image to a variable that you dynamically set based on button clicks. Example: 

Apex 
public without sharing class ChangeColorController {
    integer clickCount = 0;
    string imageUrl; 
          List<StaticResource> green = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingGreen'];
          List<StaticResource> yellow = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingYellow'];
          List<StaticResource> red = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingRed'];
          List<StaticResource> grey = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingGrey'];
          List<StaticResource> blank = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingBlank'];

public ChangeColorController(){
imageUrl = blank[0].Body.toString();

    public void RatingChange()
    {

          clickCount++; 
           if(clickCount == 1){
                   imageUrl = green[0].Body.toString();
           }
            else if(clickCount == 2){
                   imageUrl =  yellow[0].Body.toString();
            }
            else if(clickCount == 3){
                   imageUrl =  red[0].Body.toString();
            }
            else if(clickCount == 4){
                  imageUrl =  grey[0].Body.toString();
            }
            else if(clickCount == 5){
                   iimageUrl = blank[0].Body.toString();
            }
   }
}


Visualforce page 
<apex:column >
         <apex:commandButton image="{!imageUrl)}"  onClick="RatingChange()" /></apex:column>

 
StaciStaci
@toby kutler

My class is giving me this "unexpected token 'public'. at line 39 column 5" for   
public void RatingChange()

Also, this in the vf page, creates a Submit button and the image is broken and if I click, it still tries to save instead of change the image.  Any other thoughts?


<apex:column >
         <apex:commandButton image="{!imageUrl)}"  onClick="RatingChange()" /></apex:column>
TobyKutlerTobyKutler
The error you are getting about the unexpected token "public" because the code I sent you had a syntax error and the constructor method is not closed should be this: 
  
public ChangeColorController(){
imageUrl = blank[0].Body.toString();
}

 
TobyKutlerTobyKutler
For the image try changing the Apex to set "imageUrl" to the id of the static resource and then use URLFOR just like you were doing before. 

Apex 
public without sharing class ChangeColorController {
    integer clickCount = 0;
    string imageUrl; 
          List<StaticResource> green = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingGreen'];
          List<StaticResource> yellow = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingYellow'];
          List<StaticResource> red = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingRed'];
          List<StaticResource> grey = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingGrey'];
          List<StaticResource> blank = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingBlank'];

public ChangeColorController(){
imageUrl = blank[0].Body.toString();
}

    public void RatingChange()
    {

          clickCount++; 
           if(clickCount == 1){
                   imageUrl = green[0].Id;
           }
            else if(clickCount == 2){
                   imageUrl =  yellow[0].Id;
            }
            else if(clickCount == 3){
                   imageUrl =  red[0].Id;
            }
            else if(clickCount == 4){
                  imageUrl =  grey[0].Id;
            }
            else if(clickCount == 5){
                   iimageUrl = blank[0].Id;
            }
   }
}

Visualforce page 
<apex:commandButton image="{!URLFOR(imageUrl))}"  onClick="RatingChange()" /></apex:column>

 
TobyKutlerTobyKutler
**Visualforce Page had extra ) 
<apex:commandButton image="{!URLFOR(imageUrl)}"  onClick="RatingChange()" /></apex:column>
StaciStaci
@TobyKutler
It makes me change the class to this 
public without sharing class ChangeColorController {

    public ChangeColorController(ApexPages.StandardController controller) {

    }

    integer clickCount = 0;
    string imageUrl; 
          List<StaticResource> green = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingGreen'];
          List<StaticResource> yellow = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingYellow'];
          List<StaticResource> red = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingRed'];
          List<StaticResource> grey = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingGrey'];
          List<StaticResource> blank = [SELECT Id, Body FROM StaticResource WHERE Name = 'RatingBlank'];

public ChangeColorController(){
imageUrl = blank[0].Body.toString();
}

    public void RatingChange()
    {

          clickCount++; 
           if(clickCount == 1){
                   imageUrl = green[0].Id;
           }
            else if(clickCount == 2){
                   imageUrl =  yellow[0].Id;
            }
            else if(clickCount == 3){
                   imageUrl =  red[0].Id;
            }
            else if(clickCount == 4){
                  imageUrl =  grey[0].Id;
            }
            else if(clickCount == 5){
                   imageUrl = blank[0].Id;
            }
   }
}

and I updated the apex page to this <apex:commandButton image="{!URLFOR(imageUrl)}" onClick="RatingChange()" /></apex:column>
but when saving the apext page its saying "Error: Unknown property 'Audit_Report__cStandardController.imageUrl'"