Dynamically Changing Button Colours

Requirement

You want to change a buttons colour after it is pushed or to show it has defaulted on.

Solution

These can be (1) pill buttons for radio groups or (2) regular buttons.

1. Pill buttons (radio groups)

These looks like buttons but are radio groups. The only different being one option on the template.

 

You can display colour whether on, or whether on/off as follows:

 Add this code to you "inline CSS" page property:

/* Custom On Color */
.t-Form-fieldContainer--radioButtonGroup .customOnColor.apex-item-radio input:checked + label,
.customOnColor.apex-button-group input:checked+label {
    background-color: #B3E5FC;
}

or if you prefer two colours for on/off:

/* Custom On/Off Color - No Color */
.t-Form-fieldContainer--radioButtonGroup .customOnOffColor.apex-item-radio input:checked + label,
.customOnOffColor.apex-button-group input:checked+label {
    background-color: #EF9A9A;
}

/* Custom On/Off Color - Yes Color */
.t-Form-fieldContainer--radioButtonGroup .customOnOffColor.apex-item-radio input[value=Y]:checked + label,
.customOnOffColor.apex-button-group input[value=Y]:checked+label {
    background-color:#A5D6A7

Then chage the advanced/CSS property for the affected radio group

2. Regular buttons

I want to show that a button was pressed, similar to a pill button. **Make sure that your button is not set to Hot**

In my case, I'm using the built-in classes I have, but there is nothing to stop you from creating your own and putting it in the inline CSS (as per method 1 above).

Create a dynamic action to change the class after each button press.

This is a standard class, create your own if you want.

In the same way, create an action for "Remove class" under the same dynamic action, to change the other buttons in the set.

Another method, instead of using "Remove class" under the dynamic action, execute a JS script.

$("#BTNDisplayLineChart").css('background-color', '#B3E5FC');

(You will need to give your button a static ID of BTNDisplayLineChart.

Acknowledgement

https://askmax.blog/2018/02/10/switch-and-radio-as-pill-custom-colors/

https://community.oracle.com/tech/developers/discussion/4278639/change-color-of-buttons

https://stackoverflow.com/questions/41047745/change-background-color-to-button-in-apex-oracle