Set Color and Background Color for Affected Elements

Business Background

Dynamically customize colors based on user action or information from Salesforce that will affect the selected elements.

How to Guide

Note:

Prerequisite:

1. Add an Affected Element node to an element such as a button.

This image has an empty alt attribute; its file name is image-95.png

2. Alternatively, configure a condition.

This image has an empty alt attribute; its file name is image-161.png

  1. Select the element/s you want to affect by clicking the relevant checkbox/es.
    • These are all the elements in your project.
    • If necessary, use the Search element/s field.
  2. Use the drop-down list to select an option:
Drop-down list
Drop-down list

Set color

This will change the font color.

  1. Use the drop-down list to select the Set color option.
  2. Use the color selector to choose a color or enter the code in the field. In this example, the Name field’s color will change.
Set color option
Set color option
  1. Click the Apply button. The tag “Set color [code]” is added to the selected element/s.
  2. Click the Next button.
Set color added
Set color added
  1. If required, change the tag and click the Insert button. The node is added to the screen.
Tag field
Tag field
  1. Click the Apply button.
Node added
Node added
  1. Save and Preview the project.

When the button is clicked, the color of the affected element changes.

Set background color

This option will change the fill of the element.

  1. Use the drop-down list to select the Set background color option.
  2. Use the color selector to choose a color or enter the code in the field. In this example, Button B’s background color will change.
Set background color option
Set background color option
  1. Click the Apply button. The tag “Set background color [code]” is added to the selected element/s.
  2. Click the Next button.
Set background color added
Set background color added
  1. If required, change the tag and click the Insert button. The node is added to the screen.
  2. Click the Apply button.
  3. Save and Preview the project.

When the top button is clicked, the bottom button’s background color changes.

Example
Example

Note:

Protip:

You can only change the background color for element variant types “Filled” and “Classic”.

Filled:

Classic:

Hidden Title

Need more help?