Dynamic form field color depending on given condition

Facebooktwitterpinterestlinkedinmail
Applies to version: 8.0.x; author: Kamil Nędza

Functionality overview:

In order to understand this article a basic knowledge of JavaScript is required.

Drawing users attention to a key data displayed on a form during document processing is usually an idea worth discussing. Using standard options it is possible to define a specific color for each form element. That is easily configurable by going to “Style and behavior” tab on an form field. But what if one color for an element is not enough and we want to make it change dynamically depending on a value of other form field? That is precisely what this article is all about. JavaScript will be used to achieve desired results.

Functionality scenario:

Let’s say there is a sales agreement workflow. Each of contracts (agreements) within this workflow, have an expiration date. Let’s assume that for “Active agreement” step we want to color “expiration date” field for all active contracts. In case the contract is valid for longer than a month, form field should have a green color; if it is valid for less than 30 days, it should be orange; if contract expired, form field will have a red color.

Configuration:

Firstly, a new form field (SQL Row) has to be created. It will calculate number of days till the expiration of a contract. Please note that it will not be displayed on the form, so mark it as “technical” in its properties.

color-p1

color-p2

Pic. 1 and 2. Technical field configuration „[tech] Days to expire”

Next we make sure that technical form field is visible on a “Fields matrix”:

color-p3

Pic 3. Fields matrix for sales agreement workflow.

At this point it is required to configure SQL row field in order to make it calculate days left to contract expiration. Number can be negative after contract is no longer valid. It is important to know that technical form fields are hidden from user but it is possible to get values from them. This behavior is executed by using JavaScript. Knowing this, let’s proceed with writing JavaScript code as follows:

if ($(“tr[id$=’sqlrow_112′]”)[0].getElementsByTagName(‘td’)[1].innerText){

var daysToExpire =$(“tr[id$=’sqlrow_112′]”)[0].getElementsByTagName(‘td’)[1].innerText;

}

if (daysToExpire > 0 && daysToExpire < 31) {

$(‘#ctl00_PlaceHolderMain_AttDateTime1’).parent(‘td’).css(‘background-color’, ‘#FF9900’); //set orange

}

else if  (daysToExpire < 0 ) {

$(‘#ctl00_PlaceHolderMain_AttDateTime1’).parent(‘td’).css(‘background-color’, ‘#FF1919’); //set red

}

else if (daysToExpire > 30) {

$(‘#ctl00_PlaceHolderMain_AttDateTime1’).parent(‘td’).css(‘background-color’, ‘#33CC33’); //set green

}

else{}

  

This script takes the value from „[tech] Days to expire” form field if it exists on a form. Based on this value it sets proper color for form field accordingly to previously mentioned rules. Form fields name can be checked using developer tools in a web browser (F12 for Internet Explorer).

color-p4

Pic 4. Form view with developer tools opened

Now, let’s have this JavaScript run always if there are valid contracts on a step. To do so, edit an appropriate step in Designer Studio and paste script into “JavaScript executed on page load and on postback” field.

color-p5

Pic 5. Editing of “Active agreements” step

Verification of configured functionality:

Open an element in “Active agreements” step and check whether script is working properly. In lower right corner you should notice a date of a screen capture – works fine!

color-p8

Pic 8. Verification of a contract valid for more than 30 days

color-p9

Pic 9. Verification of a contract soon to be expired

 color-p10

Pic 10. Verification of an expired contract

 

 

Leave a Reply

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