New rules for cell coloring of the item list

Applies to version: 2021.1.x and above; author: Józef Cyran

Introduction

In the 2021 WEBCON BPS version, business rules were added that make it easier to work with item lists and allow you to color and dynamic style modification of the selected cells. The coloring of the item lists is shown on the example of a process for handling orders in a restaurant.

Operation of the application

Fig. 1 - The appearance of the application

The process has two form fields – Total number of orders and Orders – delivered, and one item list – Orders (that contains all orders). For each order, the Status field is set that informs the employee about the current status of the order.

Fig. 2 - An example of a list of orders

Workflow diagram

Fig. 3. The workflow diagram

The workflow diagram consists of three steps – Start, In progress, End. The Update path allows the employee to save the current order status after each change.   

Each process instance corresponds to one business day.

Process configuration

Apart from two form fields visible in the application, there are two technical form fields: _oldest order time and _oldest order.

Fig. 4. Configuration of the application

The Orders item list has six columns, the Status column is supplied with the “Fixed values list” data source type.

Fig. 5. Data source used in the “Status” column

To dynamically color the item list, go to the advanced configuration of this form field and enter the appropriate rule in the “Form rule invoked after callback” field.

It is important to copy all rules from this window to the “Form rule to be executed on page load” field (Workflow -> Main form -> Behavior tab).

Fig. 6. Form rule to run after value change - the same rules should be set at page startup

At the beginning, the _oldest order time technical form field is set to its present value - it will later be set with the value from the Order time column  - only if the value from this column is lower (i.e. earlier) than the current value of the _oldest order time form field. This allows you to find the earliest priority order, mark its number in red, and bold it.

To make it easy to count all orders, the Orders – delivered form field is reset before the execution of the rule that counts delivered orders. The Total number of orders form field is set with the new Item list count rule.

To count the number of delivered orders, use the new For each row function. This function allows you to perform operations on each row of the item list and refer to the current value of the columns in that row. The Get row value function is used for this, where you select the item list and column you want to read.

Fig. 7. The rule increasing the value of the Orders - delivered counter for each row where the ID of the status field is the value of the Delivered ID constant

Fig. 8. Rules for making the oldest order number bold and red

To select the oldest order, use the For each row function, if the _oldest order time value is lower (and therefore the date-time is "older") than the Order time value in the current row, then the _oldest order time value is set to the one in the current row and the _oldest order form field is filled with the “Order nr.“ value in this row.

For each row, function is used to color the appropriate cells - for the oldest row (determined earlier) use the Set cell font color and Set cell font decoration rules. For cells, the color can be given in various formats, both with the name (red, blue, green) and with the hex code which allows you to select any values. For decorations, you can select between normal, bold, underlined, and italic text.

Fig. 9. The rule coloring the background of the Status column

For each row function was used again - to color the status according to its value. The SET CELL BACKGROUND function allows you to set the cell background - this time the color was given in hex values.

Below are all functions of influencing the cell appearance:

• SET CELL FONT COLOR - sets the font color
• SET CELL BACKGROUND - sets the background color of the cell
• SET CELL FONT DECORATION - sets bold, italic, underline
• SET CELL FONT SIZE - sets the font size
• SET CELL FONT FAMILY - sets the text font
• SET CELL STYLE - allows you to select the CSS styling of the cell

Note: These functions should only be used inside the FOR EACH ROW function - otherwise the system does not know to whom to refer row.