[SalesForce] Changing color of field label when Checkbox == True

I asked this question on another forum, but I guess it would make a bit of sense to ask on a SalesForce forum. My goal is to have a checkbox field named "Inactive" and whenever the checkbox == false, "Inactive" will display as the default font color. When checkbox == True, "Inactive" will display as the color red.

My previous post yielded one response, in which using JavaScript was suggested. While I'm not the best at writing Java, the concept seems simple enough to try and write on my own.

I think I'm just struggling figuring out the specific placement in SalesForce, to begin writing the code. Also, are there multiple components to writing such code, or can I develop a simple piece of script and just have it run each time the value of the checkbox is changed.

Any suggestions would be greatly appreciated.

Thank you

Best Answer

If this is inside a Visualforce (VF) Page and you are using the standard VF tags to accomplish this with CSS and the styleClass attribute.

For example:

<apex:page standardController="object">
    <style type="text/css">
        .activeStyle { color: green; }
        .inactiveStyle {color: red;}
    </style>

<apex:outputText value="{!object.Active__c}" styleClass="{!IF(object.Active__c,'inactiveStyle',activeStyle')}"/>
</apex:page>

Guide on Custom Styles for Visualforce: http://www.salesforce.com/docs/developer/pages/Content/pages_styling_custom.htm

[comic but unsupported - don't do this]

This can be pulled off, but you need to get crafty :-) here's one I prepared with pink candy polka dots:

pink candy polka dots

go to Setup > Create > Objects > [Your Object] > Custom Buttons and Links, and hit New,
create a Detail Page Button whose behaviour is to Execute JavaScript,

modify the following JavaScript, using your lowercased button name in lieu of your_button:

(function() {
  var button = document.getElementsByName('your_button')[0];
  button.style.background = 'url("https://addons.mozilla.org/_files/311357/preview_small.jpg")';
}());

use a base64 encoder to format your JavaScript, which we'll load and execute as a Data URI,

paste it into the formula, noting the data:application/javascript;base64, prefix:

{!REQUIRESCRIPT("data:application/javascript;base64,KGZ1bmN0aW9...wZyIpJzsKfSgpKTs=")}
window.location = '/apex/ns__PageName'; //button action when clicked

The usual caveat applies: using a Data URI here may be subject to future validation, but rest assured for now Salesforce support the use of REQUIRESCRIPT in a Custom Button. Your use is only cosmetic.

Further, if you wanted to separate the button click outcome from the pink candy polka dots, you could put the cosmetic JavaScript in a separate Custom Link which you place somewhere on the page layout. It's one novel way of running JavaScript in the scope of a standard page without needing to configure the sidebar or use a narrow Home Page Component.

[SalesForce] Dynamic checkbox only eveluates to true

For the "ui:inputCheckbox" I would recommend you fetch the value using event.getSource(). Although the documentation seems to indicate you can use component.get('v.value'), however, the documented method seems to return 'undefined', therefore, you might want to check Event Handling in Base Lightning Components

So, in your function you will want to do:

var checkboxVale = event.getSource().get('v.value');
 if(checkboxVale == true){
//Do something
    }
else{
//Do something else
    }

Best Answer

Related Solutions

[SalesForce] Changing the color of a custom button

[comic but unsupported - don't do this]

[SalesForce] Dynamic checkbox only eveluates to true

Related Topic