Form rules – coloring form fields

Facebooktwittergoogle_pluspinterestlinkedinmail
Applies to version 2017.1.x; Author: Tomasz Pytlak

Introduction:

While creating a business workflow usually we want the user to be aware of what values they input into specific fields. Exceeding a certain amount of money or choosing a past date are actions that the user in the context of specific processes should sometimes not undertake. However, if we want to allow this sort of action but also make the user notices that they are exceeding the range, it is a good idea to use form rules to change the font format and background color. It also helps the user notice input mistakes while filling in the form.

 

Process and concept:

For this article, a workflow named “Order” is created and it has following fields:

  • Author (User or group)
  • Date (Date and time)
  • Order value (Floating point number)
  • Order (Items list)
    • Item (Single line of text)
    • Value (Floating point number)

Value summary from the item list is copied to the Order value field

Pic 1. Order Workflow

If the user exceeds the limit of 10 000 PLN, font size in Order value field will increase threefold and the background will turn red.

 

Configuration:

Invoking this configuration requires three steps:

  1. Setting the form field ‘Order value’ in field matrix as “Read only (cannot be modified except by JavaScript)”.

Pic 2. Field matrix

 

2. Creating form rule in Configuration -> Form rules node.

You can compare building a form rule to putting together a matryoshka doll. You build them by dragging&dropping or filling in functions inside other functions. All the methods used to change the formatting can be found in “Styling” node. Besides them, you also need: a conditional choice (IF THEN), a ‘greater than’ comparison, and ‘Order value’ form field variable.

Pic 3. Rule editing

 

 

Pic 4. Completed form rule “exceeding order value”

 

 

The created form rule can be described in the following way:

  • If order value > 10 000 then
    • Set background color of Value order form field to red
    • Set color of field text Value order to red
    • Increase form field font size to 300%
  • In other cases (value <=10 000 or null)
    • Clear background formatting of Value order form field
    • Change color of field text Value order to yellow
    • Clear font formatting of Value order form field

 

Field text is the field in which the value is inputted. In edit mode it’s white and in “Read only (cannot be modified except by JavaScript)” it’s yellow – in both cases it covers the real background. Setting field text color is a little bit different than background or font as it requires using CSS. Because of that beside the color itself, aligning in the center can be set as well. The downside is that it’s not possible to clear formatting with EMPTY function so that the default color is set manually.

 

3. Invoking the form rule

Once defined, the form rules can be used in many places, i.e. when loading the page, on postback, or when changing the form field value. In our scenario, we will tie the form rule to the Order value field – the form rule will be executed when the value of the Order value field is changed.
In the Order value field configuration, go to the Style and behavior tab, and enter the configured form rule into the ‘Rule invoked on value change’ area.

Pic 5. Form rules used on value change

 

Result:

After proceeding through all the mentioned steps and exceeding the limit, the form will look as below.

Pic 6. Form when the entered value exceeds a certain amount

Leave a Reply

Your email address will not be published. Required fields are marked *