Open topic with navigation

TIBCO Business Studio™ - BPM Edition 5.4.0

# Changing a Control’s Background Color Based on its Value

You can customize the background color of a control using a computation action and CSS classes.

Explanation

This topic covers the case where you want to apply a background color to a given control in a form based on the control’s value.

In order to implement this task, you will need to know:

- How to specify a custom CSS document and refer it in the form.
- How to add a computation action that is targeted to a property of the control

Procedure
1. Create a form with one or more controls.
2. Add following classes to the custom CSS document and refer to the document in the form

             .normalbg,
             {
                background-color: #808080;
             }
             .warningbg,
             {
                background-color: #00FF00;
             }
             .problembg,
             {
                background-color: #FF0000;
             }

3. Add a computation action for the Style Class Name(s) property in the General Properties view for the form.

   Provide following JavaScript code for this action and select the update event of this control.

             var value = parseInt(control.textinput1.value);
             var bgclass = "normalbg";
             if ( value <= 100) {
                "normalbg";
             } else if ( value > 100 && value <= 500 ) {
                "warningbg";
             } else if ( value > 500 && value <= 1000 ) {
                "problembg";
             }

4. Preview the form.

   Provide a number value between 0 - 100 and the background color for the control is set to gray.

   Provide a number value between 101 - 500 and the background color for the control is set to green.

   Provide a number value between 501 - 1000 and the background color for the control is set to red.

Did you find this helpful?

Yes No
Great!
Thanks for taking the time to give us some feedback.
Sorry about that

Why wasn't this helpful? (check all that apply)

Could not find what I was looking for
Instructions confusing or unclear
Instructions did not work

Want to tell us more?

Please select at least one option or provide details about the issue!!

Error occurred while submitting feedback.

Error2 occurred while submitting feedback.

TIBCO Business Studio™ - BPM Edition

Copyright © 2015-2023. Cloud Software Group, Inc. All Rights Reserved.