Back to all How-tos

Combining record-based conditions

The Conditional Script Wizard is easy and awesome when you can base your condition on a single record field. But what if you need to combine conditions that each depend on a different record field? Or you need a condition that triggers when a value is within a range, rather than just higher/lower?

The Conditional Script Wizard is easy and awesome when you can base your condition on a single record field. But what if you need to combine conditions that each depend on a different record field? Or you need a condition that triggers when a value is within a range, rather than just higher/lower?

Enter advanced conditions. While anything beyond a single condition requires scripting, taking the time to learn even the simplest of JavaScript required will yield great reward in terms of control and power.

This assumes that:

  • The element on which the condition applies must be visible on the page
  • The Script must have the right selector for the element.

The basic formula for creating a condition is the following:

if(!condition ) { // trigger if the condition is NOT met
    results.remove(); // remove the element completely, not just hide it
}

So in this code, if() {} is the JavaScript way of creating a condition. Anything within the curly braces {} will trigger if the condition is true!condition is an inverted condition, essentially “condition is not true”. Why? Because otherwise, you would need to hide your elements first using CSS and show them with the condition. Doing this means you don’t see those elements in Design mode, and makes the condition to show them more complex. results.remove(); will completely “destroy” the object within the source code when producing output, so that it is not available to the client. Using results.hide(); would simply hide the element and looking at the source code (in Web and Email output) would still show the element and its contents.

Some real examples

So here are a couple of examples based on actual record data checks. Note that the AND operator is &&, while the OR operator is ||:

// Value is between 1.5 and 2.6 (remember the result has to be "false!")
if(record.fields.myvalue > 1.5 || record.fields.myvalue < 2.6) {
    results.remove();
}

// Field1 is not 0 (positive number) and Field2 is "true"
if(record.fields.Field1 >= 0 && record.fields.Field2 != "true") {
    results.remove();
}

// Field "Province" is within a list of accepted values
if (!/Value1|Value2|Value3/.test(record.fields.myvalue)) {
    results.remove();
}

I know all this seems a little complex but remember the basic formula, if(!condition) {}. If it makes it simpler for you, inverting a condition might make it easier to understand at a glance. You write you condition in a “positive” way and then simply invert it. Here are the first 2 examples (the third already does this):

// Value is between 1.5 and 2.6 (notice how easier it is to read this)
if(!(1.5 > record.fields.myvalue < 2.6)) {
    results.remove();
}

// Field1 is not 0 (positive number) and Field2 is "true"
if(!(record.fields.Field1 > 0 && record.fields.Field2 == "true")) {
    results.remove();
}

Of course, you’re not limited to just one or two conditions! Combining many conditions together is possible. In JavaScript conditions, the order of operation is very similar to basic mathematics: inner parenthesis are always evaluated first, going outwards. This is why in !(condition && condition) and !condition && condition are not the same. Hopefully you remember your PEMDAS!

if( (condition1 && condition2) || (condition3 && condition4) ) {
    // condition 1 and 2 are both true, OR condition 3 and 4 are both true.
}

Using conditions for other stuff

In the above examples I’m always just hiding contents. But you can do so many different things, using basic JavaScript as well as use the Designer API to modify your template.

For instance, the following would have the background of the element go red on values lower than 0 (negative values):

if(record.fields.amount < 0) {
    results.css("background-color", "red");
}

Leave a Reply

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