Rules are probably best described by using examples. This chapter contains numerous real world samples.

...

Calculate a Total

You have a form with three controls and you have assigned them Names N1, N2 and T respectively. When the user enters a value in either N1 or N2 you want to set the value of T to the sum of N1 and N2. The rule would be written as

T.value = N1.value + N2.value;

...

if (!(MainTab.selected)) {
    Submit.visible = false;
    Cancel.visible = false;
} else {
   Submit.visible = true;
   Cancel.visible = true;
}

...

Show/Hide Manager Approval

...

You have a form with two controls and you have assigned them Names B and Q respectively. B is a checkbox with a single option - Yes. . If checked the user is a smoker and you wish to ask an additional question in Q. The rule would be written as

...

flow and the first form has a Section for manager approval. The Section is hidden by default. Here is an example of a rule that makes the section visible in the second step of the flow which is a linked activity assigned to the manager role. 

if (form.load) {
  var  Q.enabledan = true; 
_data.getParameter ("flow.activity.name");
  if (an === 'Manager' || an === 'VP'){
    ManagerApproval.visible = true;
  } else {
 Q.enabled   ManagerApproval.visible = false;
  }

This rule will automatically fire whenever the user checks or unchecks B and will enable/disable the question in Q. Again, you could use any legal JavaScript expression to compute the enabled property of Q as long as it evaluates to a boolean true or false value.

...

}

Enable/disable a question

You have a form with two controls and you have assigned them Names B and Q respectively. B is a checkbox with a single option - Yes. . If checked the user is a smoker and you wish to ask an additional question in Q. The rule would be written as

if (B[0].value === 'Yes') {
    Q.enabled = true; 
} else {
 Q.enabled = false; 
} 

This rule will automatically fire whenever the user checks or unchecks B and will enable/disable the question in Q. Again, you could use any legal JavaScript expression to compute the enabled property of Q as long as it evaluates to a boolean true or false value. In this example, you would typically set the checkbox B to be initially unchecked and the control Q to be initially disabled.

...

The rule would be written as:

for (var i = 0; i < S.value.length; i++) { 
  if (Q[i].value > 0) {
    S[i].value = Q[i].value * P[i].value; 
  } else { 
    S[i].value = 0; 
  } 
}   

This rule will automatically fire whenever the user enters a value in the quantity field for any item. It will compute the subtotal for each item, for which the quantity is greater than 0 and fill in the subtotal field for that item with the computed value. If a particular item does not have a quantity, the subtotal is not computed.

...

if (ExpenseRepeat.itemRemoved) {var x;} 

Textarea Max Length

...

Formatting money values to display in a Message Control

Let's say you have calculated a sum in a Number control in your form and you want to display it in a Message control and format it as a money value with commas and decimal places.  You will need a Number control named Num and a message control named Message in your form. This rule will display the number entered in the number control with commas. If the user enters 5600.44 in the number field then the result in the message control would look like this:"5,600.44".

if (Desc.value.lengthvar x, x1, x2;
if (Num.value > 5000) {
    Desc.valid = falsevar nStr = Num.value.toFixed(2);
    nStr += '';
 } else { x = Desc.validnStr.split('.');
    x1 = true;x[0];
    } 

You can even customize the error message by adding this line to your rule. Now the error message will tell the user how many characters they are over the maximum allowed.

Desc.status = 'Invalid. Max 20 chars allowed and you have ' + Desc.value.length; 

Textarea newline vs break

Users typically enter multi-line text into textarea controls. If you want to display that text in an html context, for example on a web page or in an html formatted email or in your form's Form Action display message you will need to replace newlines with html breaks. This caused by the fact that line breaks entered into a web form textarea are represented by a single newline character \n while line breaks in an html context are represented by the html break characters.

Our example has a textarea control named Description and a hidden control named DF. The user types into the visible control named Description and a business rules converts the newline characters \n into html breaks.

var x = Description.value; 
x = x.replace(/\\r/g,"");
x = x.replace(/\\n/g,"<br/>");
DF.value = x; 

Dropdown Options

This example automatically sets the option selected in one dropdown based on the option selected in another. This is often useful when you have a form with choices that were dynamically populated. For example, imagine product choices which are descriptive text. When the user selects a product, your form needs to perform an action based on a product ID rather than the descriptive product text. A nice way to do this is to have the rule that dynamically populates the product choices dropdown also populate a product ID dropdown which remains an invisible control in the form. The product choices dropdown control was named Products and the product ID dropdown control was named PID

The 1st rule "Load Products" populates both the visible and hidden dropdowns with options from a database.

/*member description productId resultSet */
var x;
 
if (form.load) { 
eval('x=' + http.get('http://localhost:8082/database/products'));   
var opts1 = []; 
var opts2 = [];   
 
for (var i=0; i < x.resultSet.length; i++) { 
  if (x.resultSet[i]) { 
    opts1[i] = x.resultSet[i].description; 
    opts2[i] = x.resultSet[i].productId; 
  } 
}    
 
Products.options = opts1; 
PID.options = opts2; 
Products.value = opts1[0]; // default to 1st product option 
PID.value = opts2[0]; 
}

Finding a Selected Options Index

The 2nd rule Select Product ID keeps the hidden PID dropdown syncronized with the visible Products dropdown.

if (Products.value.length > 0) 
{ 
    var i; 
    for (var x in Products.options) {
        if (Products.value === Products.options[x]) 
            i = Products.options.indexOf(Products.options[x]); 
}

PID.value = PID.options[i] + ''; 
}

In v4 rules using hidden dropdowns to keep descriptive option labels visible to the user while keeping cryptic database values hidden are often no longer necessary. Dropdown options have values distinct from the human visible option labels. The above can now be achieved with a single simpler rule:

/*member description productId resultSet */
var x, opts1;
 x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
 x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    Message.value = x1 + x2;
}

Textarea Max Length

In html there is no way to set a maxLength on a textarea control. This is why the textarea control does not have a maxlength property like the text control does. It is possible to do this via a business rule. This example form has a textarea control named 'Desc' where the user can enter up to a 500 character description. On this control we also set the ErrorMsg property to the string 'You must limit your description to 500 characters'. This message is automatically displayed when the description control is set to invalid by the following business rule.

if (Desc.value.length > 500) {
  Desc.valid = false;
} else {
  Desc.valid = true;
}

You can even customize the error message by adding this line to your rule. Now the error message will tell the user how many characters they are over the maximum allowed.

Desc.status = 'Invalid. Max 20 chars allowed and you have ' + Desc.value.length; 

Textarea newline vs break

Users typically enter multi-line text into textarea controls. If you want to display that text in an html context, for example on a web page or in an html formatted email or in your form's Form Action display message you will need to replace newlines with html breaks. This caused by the fact that line breaks entered into a web form textarea are represented by a single newline character \n while line breaks in an html context are represented by the html break characters.

Our example has a textarea control named Description and a hidden control named DF. The user types into the visible control named Description and a business rules converts the newline characters \n into html breaks.

var x = Description.value; 
x = x.replace(/\\r/g,"");
x = x.replace(/\\n/g,"<br/>"); DF.value = x;

Dropdown Options

This example automatically sets the option selected in one dropdown based on the option selected in another. This is often useful when you have a form with choices that were dynamically populated. For example, imagine product choices which are descriptive text. When the user selects a product, your form needs to perform an action based on a product ID rather than the descriptive product text. A nice way to do this is to have the rule that dynamically populates the product choices dropdown also populate a product ID dropdown which remains an invisible control in the form. The product choices dropdown control was named Products and the product ID dropdown control was named PID

The 1st rule "Load Products" populates both the visible and hidden dropdowns with options from a database.

/*member productCode, productName, resultSet*/
var x;
  
if (form.load) {
  eval('x=' + http.get('https://app.frevvo.com/database/BIRT/allProducts'));  
 
    var opts1 = [];
    var opts2 = [];
 
    for (var i=0; i < x.resultSet.length; i++) {
        if (x.resultSet[i]) { 
            opts1[i] = x.resultSet[i].productId+ '=' + x.resultSet[i].description;productName;
        }  }  Rdocnum.optionsopts2[i] = opts1; 

Here is another rule that dynamically populates both the product choices and product ID dropdowns. This rule calls a REST Service which returns an object rather than the resultset returned by the database connector as shown above. See the section on dynamic content for more details.

/*member ids products */
var x; 
 
if (S.value.length > 0) {
    eval('x=' + http.get('http://<webhosts>/products/?category=' + S.value)); 
    P.options = x.products; ID.options = x.ids;
}

Synchronized Selects

The Product Search example above is often used in conjunction with a hidden select control. Imagine that your database table contains a list of products. Each product has product description also a unique product ID. The user needs to select a product from a dropdown on your form. You want to populate the dropdown with the product descriptions. The users do not need to see or know the product IDs but you need to use the ID as the key into the database for other selects. To do this add another hidden dropdown to the form and populate it with the IDs. This example has a visible dropdown name Products and an invisible dropdown named PID. See the rule above that populates these dropdowns dynamically from the database.

This rule below keeps the PID selected option in sync with the selected Product.

var i, x; 
for (x.resultSet[i].productCode;
        }
    }
 
  Products.options = opts1;
  PID.options = opts2;
  Products.value = opts1[0]; // default to 1st product option
  PID.value = opts2[0];
}

Finding a Selected Options Index

The 2nd rule Select Product ID keeps the hidden PID dropdown syncronized with the visible Products dropdown.

if (Products.value.length > 0)
{
    var i;
    for (var x in Products.options) {
 // Determine the index of the selected product in the Products dropdown options 
if (if ((Products.value + '=' + Products.value) === Products.options[x]){
            i = Products.options.indexOf(Products.options[x]);
    }    // Changed}
the selected PID to match}
the selected
Product  PID.value = PID.options[i] + '';

Clearing Dropdown Options

This sample resets a dropdown option to the automatically added blank option. For dropdowns added from palette controls and from schema,  automatically adds a blank option so the dropdown initially shows no choice by default. To reset the dropdown, set the dropdown control's value to null not the empty string. The empty string will not work since the empty string is not a valid option. This form resets the dropdown named size whenever the value of the product option changes.

if (product.value.length > 0) {.split('=')[0];
}

In v4 rules using hidden dropdowns to keep descriptive option labels visible to the user while keeping cryptic database values hidden are often no longer necessary. Dropdown options have values distinct from the human visible option labels. The above can now be achieved with a single simpler rule:

/*member description productId resultSet */
var x, opts1;
 
for (var i=0; i < x.resultSet.length; i++) { 
    if (x.resultSet[i]) { 
          size.value  opts1[i] = null; 
} 

Default Option

When your options are set dynamically as shown below in a business rule, you cannot set a default in on the form designer. You need to set the default in the rule. If your options have <value>=<label> where value is different from label, make sure you set the <control>.value to <value> not <label> and not <value>=<label>

if (form.loadx.resultSet[i].productId+ '=' + x.resultSet[i].description; 
    } 
} 
Rdocnum.options = opts1; 

Here is another rule that dynamically populates both the product choices and product ID dropdowns. This rule calls a REST Service which returns an object rather than the resultset returned by the database connector as shown above. See the section on dynamic content for more details. 

/*member ids products */
var x;
 
if (S.value.length > 0) {
     var cc = ['R=Red', 'B=Blue', 'G=Green'];eval('x=' + http.get('http://localhost:8182/products/?category=' + S.value)); 
    ColorsP.options = ccx.products; 
   Colors ID.valueoptions = 'B'x.ids; 
}

Checkbox Options - Assigning Color to Checkbox Choices

...

Synchronized Selects

The Product Search example above is often used in conjunction with a hidden select control. Imagine that your database table contains a list of products. Each product has product description also a unique product ID. The user needs to select a product from a dropdown on your form. You want to populate the dropdown with the product descriptions. The users do not need to see or know the product IDs but you need to use the ID as the key into the database for other selects. To do this add another hidden dropdown to the form and populate it with the IDs. This example has a visible dropdown name Products and an invisible dropdown named PID. See the rule above that populates these dropdowns dynamically from the database.

This rule below keeps the PID selected option in sync with the selected Product.

var choices = ''i, x; 
for (varx i = 0; i < colorPalette.value.length; i++) 
{  
    choices = choices + colorPalette[i].value; 
} 
colorChoice.value = choices; 

Notice that similar to repeat controls, due to an internal evaluation limitation, you must collect the choices in a variable inside the for loop. And then assign that control Name.value to that variable outside the for loop.

This rule is another example showing how checkbox controls are array types.

if (colorPalette.value.length > 0) 
{ 
    colorChoice.value = 'Thank you for choosing colors'; 
} 
else 
{ 
    colorChoice.value = 'Please choose colors...'; 
} 

Checkbox Options - Making a Control Visible/Invisible Based on Checkbox Choices

This rule makes visible/invisible a control based on which checkbox options a user selects. This form contains a multi select checkbox named Structures. If the user selects the option "Detached Garage" or "House", we want to make visible a text field named Details.

Again since a checkbox is multi select, it is handled as an array. The array will contain all selected (checked) options.

It is important to note that when a checkbox is added to the form from the palette and its options are multiple words containing spaces, the option array has converted each space character to the '_' character. We must make the comparison as shown below. Checkbox controls from schema do not have space replaced with '_'.

var found = false; 
for (var i = 0; i < Structures.value.length; i++) 
{ 
    if (Structures[i].value === 'Detached_Garage' || 
        Structures[i].value === 'House')in Products.options) { 
// Determine the index of the selected product in the Products dropdown options 
if (Products.value === Products.options[x]) 
    i = Products.options.indexOf(Products.options[x]); 
}

 
// Changed the selected PID to match the selected Product 
PID.value = PID.options[i] + '';

Clearing Dropdown Options

This sample resets a dropdown option to the automatically added blank option. For dropdowns added from palette controls and from schema,  automatically adds a blank option so the dropdown initially shows no choice by default. To reset the dropdown, set the dropdown control's value to null not the empty string. The empty string will not work since the empty string is not a valid option. This form resets the dropdown named size whenever the value of the product option changes.

if (product.value.length > 0) {  
    size.value = null; 
}

Default Option

When your options are set dynamically as shown below in a business rule, you cannot set a default in on the form designer. You need to set the default in the rule. If your options have <value>=<label> where value is different from label, make sure you set the <control>.value to <value> not <label> and not <value>=<label>

if (form.load) { 
    var cc = ['R=Red', 'B=Blue', 'G=Green'];
    Colors.options = cc;
    Colors.value = 'B';
}

Checkbox Options - Assigning Color to Checkbox Choices

Checkbox controls are different from all other  palette controls in that they are multi-select. Therefore the way to write rules with checkbox controls are in many ways similar to rules with repeat controls. This rule has a checkbox controls with name colorPalette with the options: purple, green, blue, yellow, orange. The form also contains a text control with name colorChoice. This rule assigns colorChoice the choices selected from colorPalette.

var choices = ''; 
for (var i = 0; i < colorPalette.value.length; i++) 
{  
     foundchoices = true;choices + colorPalette[i].value; 
} 
colorChoice.value = break; 
    } 
} 
if (found === true) choices; 

Notice that similar to repeat controls, due to an internal evaluation limitation, you must collect the choices in a variable inside the for loop. And then assign that control Name.value to that variable outside the for loop.

This rule is another example showing how checkbox controls are array types.

if (colorPalette.value.length > 0) 
{ 
    DetailscolorChoice.visiblevalue = true 'Thank you for choosing colors'; 
} 
else 
{ 
    DetailscolorChoice.visiblevalue = false;'Please choose colors...'; 
  Details.value = null; 
} 

Note that when we hide Details we also clear its value. This is because the user may have selected one of the Structures checkboxes that made Details visible AND entered a value into Details. And then they may have changed their minds and uncheck the option that caused Details to become visible. If you don't want the value entered into Details to be in your form submission, clear the value when hiding it.

Many Checkbox Comments

This rule makes an associated comment input control visible and required when a checkbox is checked. The for loop determines which checkboxes are checked and sets an appropriately named variable to true. Depending on the value of checkbox the associated input control will be made visible and required via the if/else and will be hidden and not-required when it is un-checked again. This is a very common rule design pattern.

You can style this form so the comment input controls align with the checkbox options. See details and download a working sample form here. 

var heartProblem = false;
var foodAllergy = false;
var rashes = false;
var jointInjury = false;
var asthma = false;
var moodiness = false;

for (var i = 0; i < MedicalIssues

Checkbox Options - Making a Control Visible/Invisible Based on Checkbox Choices

This rule makes visible/invisible a control based on which checkbox options a user selects. This form contains a multi select checkbox named Structures. If the user selects the option "Detached Garage" or "House", we want to make visible a text field named Details.

Again since a checkbox is multi select, it is handled as an array. The array will contain all selected (checked) options.

It is important to note that when a checkbox is added to the form from the palette and its options are multiple words containing spaces, the option array has converted each space character to the '_' character. We must make the comparison as shown below. Checkbox controls from schema do not have space replaced with '_'.

var found = false; 
for (var i = 0; i < Structures.value.length; i++) 
{ 
    if (MedicalIssuesStructures[i].value === 'heartDetached_problemGarage') {|| 
   heartProblem = true;   } else if (MedicalIssuesStructures[i].value === 'food_allergyHouse') { 
     foodAllergy found = true; 
 } else if (MedicalIssues[i].value === 'rashes') { break; 
    rashes =} true;
  } else
if (MedicalIssues[i].valuefound === 'joint_injury'true) { 
   jointInjury Details.visible = true; 
 } else if (MedicalIssues[i].value === 'asthma') {{ 
    asthmaDetails.visible = truefalse; 
 } else if (MedicalIssues[i]Details.value === 'moodiness') {
    moodiness = true null; 
 }
}

if (heartProblem === true) {
  heartProblemDetails.visible = true;
  heartProblemDetails.required = true;
} else {
  heartProblemDetails.visible = false;
  heartProblemDetails.required = false;
  //heartProblemDetails.value = null;
}

if (foodAllergy === true) {
  foodAllergyDetails.visible = true;
  foodAllergyDetails.required = true;
} else {
  foodAllergyDetails.visible} 

Note that when we hide Details we also clear its value. This is because the user may have selected one of the Structures checkboxes that made Details visible AND entered a value into Details. And then they may have changed their minds and uncheck the option that caused Details to become visible. If you don't want the value entered into Details to be in your form submission, clear the value when hiding it.

Many Checkbox Comments

This rule makes an associated comment input control visible and required when a checkbox is checked. The for loop determines which checkboxes are checked and sets an appropriately named variable to true. Depending on the value of checkbox the associated input control will be made visible and required via the if/else and will be hidden and not-required when it is un-checked again. This is a very common rule design pattern.

You can style this form so the comment input controls align with the checkbox options. See details and download a working sample form here. 

var heartProblem = false;
var foodAllergy = false;
var rashes = false;
var jointInjury = false;
var asthma = false;
var moodiness = false;

 foodAllergyDetails.requiredfor (var i = false0; i < //foodAllergyDetailsMedicalIssues.value = null;
}.length; i++)
{
  if (rashesMedicalIssues[i].value === true'heart_problem') {
  rashesDetails.visible  heartProblem = true;
  }  rashesDetails.required = true;
} else {
  rashesDetails.visible = false;
  rashesDetails.required = false;
  //rashesDetails.value = null;
}

if (jointInjury === trueelse if (MedicalIssues[i].value === 'food_allergy') {
    foodAllergy = true;
  } else if (MedicalIssues[i].value === 'rashes') {
    rashes = true;
  } else if (MedicalIssues[i].value === 'joint_injury') {
  jointInjuryDetails.visible  jointInjury = true;
  jointInjuryDetails.required = true;
} else if (MedicalIssues[i].value === 'asthma') {
    asthma = true;
  } else if (MedicalIssues[i].value === 'moodiness') {
    moodiness = true;
  }
}

if (heartProblem === true) {
  heartProblemDetails.visible = true;
  heartProblemDetails.required = true;
} else {
  jointInjuryDetailsheartProblemDetails.visible = false;
  jointInjuryDetailsheartProblemDetails.required = false;
  //jointInjuryDetailsheartProblemDetails.value = null;
}

if (asthmafoodAllergy === true) {
  asthmaDetailsfoodAllergyDetails.visible = true;
  asthmaDetailsfoodAllergyDetails.required = true;
} else {
  asthmaDetailsfoodAllergyDetails.visible = false;
  asthmaDetailsfoodAllergyDetails.required = false;
  //asthmaDetailsfoodAllergyDetails.value = null;
}

if (moodinessrashes === true) {
  moodinessDetailsrashesDetails.visible = true;
  moodinessDetailsrashesDetails.required = true;
} else {
  moodinessDetailsrashesDetails.visible = false;
  moodinessDetailsrashesDetails.required = false;
  //moodinessDetailsrashesDetails.value = null;
}

Checkbox Initialization

Since checkbox options are multi-select, in order to select multiple options via a rule you must use this syntax. In this example CB is the name of a checkbox controls with the following options: red, green, blue. This rule selects all of the options.

CB.value = ['red', 'green', 'blue']; 

To clear all checked option in the control named CB:

CB.value = []; 

Displaying Selected Checkbox Labels

In this example, the rule displays the labels of the checkboxes the user selects.

var x;
var selectedcolors = '';

for (var i = 0; i < RGB.value.length; i++) 
{ 
    var v = RGB[i].value; 
    for (x in RGB.options) {

        var opt = RGB.options[x]; 
        var val= opt.split('=')[0]; 
        var lab= opt.split('=')[1];
        if (v === val) { 
            selectedcolors = selectedcolors + ' ' + lab; 
        } 
    } 
}

Image Removed

T/F Boolean

T/F controls are simplified checkbox controls with only a single visible option.To test if the T/F control named agree is checked and make the control s visible if checked and make s invisible if not checked.

if (agree[0].value === 'true') {
  s.visible = true;
} else {
  s.visible = false;
}

To clear a checkmark from a T/F control you must set the value to null and ensure that the control is not required as follows:

agree.required = false;
agree.value = null;

Repeating Checkboxes

Checkboxes inside repeat controls must be treated as an array (each checkbox control's values) of checkbox option values which is inside another array (the repeating checkbox control itself). This form example has a repeating section containing two controls -- Message which is a text control and AreYouAttending which is a checkbox control with a single option 'yes'. To access the selected options the syntax is:

AreYouAttending[i].value[0] === 'yes'

for (var i = 0; i < AreYouAttending.value.length; i++) 
{ 
    if (AreYouAttending[i].value[0] === 'yes') {

if (jointInjury === true) {
  jointInjuryDetails.visible = true;
  jointInjuryDetails.required = true;
} else {
  jointInjuryDetails.visible = false;
  jointInjuryDetails.required = false;
  //jointInjuryDetails.value = null;
}

if (asthma === true) {
  asthmaDetails.visible = true;
  asthmaDetails.required = true;
} else {
  asthmaDetails.visible = false;
  asthmaDetails.required = false;
  //asthmaDetails.value = null;
}

if (moodiness === true) {
  moodinessDetails.visible = true;
  moodinessDetails.required = true;
} else {
  moodinessDetails.visible = false;
  moodinessDetails.required = false;
  //moodinessDetails.value = null;
}

Checkbox Initialization

Since checkbox options are multi-select, in order to select multiple options via a rule you must use this syntax. The correct way to initialize the checkbox control value is to collect all required options in an array and then assign that array as the value of your checkbox control.  

In this example CB is the name of a checkbox controls with the following options: red, green, blue. This rule selects all of the options.

CB.value = ['red', 'green', 'blue']; 

To clear all checked options in the control named CB:

CB.value = []; 

Displaying Selected Checkbox Labels

In this example, the rule displays the labels of the checkboxes the user selects.

var x;
var selectedcolors = '';

for (var i = 0; i < RGB.value.length; i++) 
{ 
    var v = RGB[i].value; 
    for (x in RGB.options) {

        var opt = RGB.options[x]; 
        var val= opt.split('=')[0]; 
        Message[i].value var lab= Name.value +opt.split('=')[1];
        if (v === val)   { 
 ' is attending event #' + i;      } 
} 

String Concatenation

Message controls can be used in business rules to create summary information on your form from values entered into earlier form fields. This rule uses javascript variables to concatenate form field values, text strings and html to format a nice summary page:

var totalAssets = TotalAutoValue.value + TotalBankValue.value + TotalRealEstateValue.value;

BasicSummaryMsg.value =  
"<b>Name:</b> " + FirstName.value + " " + LastName.value + "<br/>" + 
"<b>Phone:</b> " + Phone.value + "<br/>" + 
"<b>Email:</b> " + EmailAddress.value;

if (MilitaryOrCivilianselectedcolors = selectedcolors + ' ' + lab; 
        } 
    } 
}

Image Added

T/F Boolean

T/F controls are simplified checkbox controls with only a single visible option.To test if the T/F control named agree is checked and make the control s visible if checked and make s invisible if not checked.

if (agree[0].value === 'Militarytrue') {
 //Military 
DetailedSummaryMsgs.valuevisible = true;
} else {
"<b>Military Info:</b><br/>" +  "Military ID: " + MilitaryID.value + "<br/>" + 
"Rank: " + Rank.value + "<br/>" + 
"CurrentTitle: " + CurrentTitle.value + "<br/>" + 
"Years of Service: " + YearsOfService.value + "<br/>"; 
} else if (MilitaryOrCivilian.value === 'Civilian') { 
//Civilian 
DetailedSummaryMsg.value =  
"<b>Civilian Info:</b><br/>" +  
"SSN: " + SSN.value + "<br/>" + 
"Current Employer: " + CurrentEmployer.value + "<br/>" + 
"Current Title: " + CurrentTitle2.value + "<br/>" + 
"Start Date: " + StartDate.value + "<br/>"; 
}

FinancialSummaryMsg.value = 
"<b>Total Assets:</b> $" + totalAssets + 
"<br/>" + "Total Bank Assets: $" + TotalBankValue s.visible = false;
}

To clear a checkmark from a T/F control you must set the value to null and ensure that the control is not required as follows:

agree.required = false;
agree.value = null;

Repeating Checkboxes

Checkboxes inside repeat controls must be treated as an array (each checkbox control's values) of checkbox option values which is inside another array (the repeating checkbox control itself). This form example has a repeating section containing two controls -- Message which is a text control and AreYouAttending which is a checkbox control with a single option 'yes'. To access the selected options the syntax is:

AreYouAttending[i].value[0] === 'yes'

for (var i = 0; i < AreYouAttending.value.length; i++) 
{ 
    if (AreYouAttending[i].value[0] === 'yes') {
        Message[i].value = Name.value + 
               ' is attending event #' + i; 
    } 
} 

String Concatenation

Message controls can be used in business rules to create summary information on your form from values entered into earlier form fields. This rule uses javascript variables to concatenate form field values, text strings and html to format a nice summary page:

var totalAssets = TotalAutoValue.value + TotalBankValue.value + TotalRealEstateValue.value;

BasicSummaryMsg.value =  
"<b>Name:</b> " + FirstName.value + " " + LastName.value + "<br/>" + 
"Total Real Estate Value: $<b>Phone:</b> " + TotalRealEstateValuePhone.value + "<br/>" + 
"Total Auto Value: $<b>Email:</b> " + TotalAutoValue.value + "<br/>";

Note when using field values from repeat controls you must use a javascript var and assign the concatenation to the var and then the var to the  message control value. For example imagine you have a message control named Summary and a repeat control named Account:

var acctSummary = ''; 
for (var i = 0; i < Account.value.length; i++) { 
    if (Q[i].value > 0) { 
        acctSummary = acctSummary + 'Account #' + i + ': ' + Account[i].value + '<br/>'; 
    } 
} 
Summary.value = acctSummary; 

Dynamic Labels, Help, Hints

You can set the value of control labels, help and hint dynamically in a rule. For example imagine you do not know the label, help or hint at design time but would rather set it dynamically when a user opens your form.

if (form.load) 
{ 
  Text99.label = 'New Label'; 
  Text99.hint = 'New Hint'; 
  Text99.help = 'New Help'; 
}

In the above example the label, help and hint is still hard-coded. It's just being set from the rule rather than in the form designer controls' properties. To make this more useful you can initialize these properties from _data parameters:

if (form.load)
{ 
   Text99.label = _data.getParameter('label'); 
   Text99.hint = _data.getParameter('hint'); 
   Text99.help = _data.getParameter('help'); 
}

Since _data.getParameter enables access to values passed to the form that are not bound to actual controls this is often a very useful pattern.

Visible/Invisible

This rule makes the message control nickNameThankYou visible when the user enters a value into the nickName input text control. And then hides the message control if the user deletes the value in nickName.

if (nickName.value.length > 0 ) 
{ 
    nickNameThankYou.visible = true; 
} 
else 
{  
    nickNameThankYou.visible = false; 
} 

Visible/Invisible Section

Often section controls contain many inner controls. For example imagine a form that contains a person's medical history. One of the questions on the form asks if the patient uses a hearing aid. If they answer yes, then you want to collect more details on their hearing aid usage such as left ear, right ear, bilateral; hearing aid brand; etc. If they answer no then you want to hide all the questions specific to hearing aids. Also when the answer is yes you want to require them to answer all the hearing aid detailed questions.

Imagine this example form has a section named HearingAid. By default HearingAid visible is set to false in the form designer.

When they answer yes, you must set HearingAid.visible=true AND also each required field inside the section to field.required = true. If they then change the answer to no then another rule makes the HearingAid.visible=false AND all the field.required=false. If the HearingAid section contains many child controls this rule becomes very long and tedious to write

We can simplify this by using the required property for sections. In the designer default all controls that must be answered inside HearingAid to required. Default the HearingAid section to not required and not visisble. Your rule can be much simpler. By setting HearingAid.required=false all the inner controls recursively also become required=false.

if (useAid.value === 'no') {
    // Hide 
    HearingAid.visible = false; 
    HearingAid.required = false; 
} else { 
    // Show 
    HearingAid.visible = true; 
    HearingAid.required = true; 
} 

Select Tab

This rule makes a specific tab the selected tab based on the choice of a radio control. The radio is named SelectTab and has three options: person, auto, home. The tabs are named personTab, autoTab and homeTab. Tabs also can be selected based on trigger controls or other input controls using the same method show here. 

if (SelectTab.value.length > 0)
{ 
    autoTab.selected = false; 
    homeTab.selected = false; 
    personTab.selected = false;

    if (SelectTab.value === 'Auto') 
        autoTab.selected = true; 
    } else if (SelectTab.value === 'Home') {
        homeTab.selected = true;
    } else {
        personTab.selected = true;
    }
}

Next Tab

This form contains a trigger control at the bottom of each tab labeled "Next". When "Next" is clicked the trigger rule executes and makes the next tab the selected tab. This assists the user in navigating through the form. The Tabs are named T1, T2, T3, T4. The trigger controls are named C1, C2, C3

// Navigate Tabs 
if (C1.clicked) { 
    T2.selected = true; 
} else if (C2.clicked) {
    T3.selected = true; 
} else if (C3.clicked) { 
    T4.selected = true; 
} 

Expand/Collapse Section

This form has three sections. The first section is expanded and the 2nd and 3rd are collapsed. When the user files in the 1st section they click a "Next" trigger control which causes that section to collapse and the next section to expand. The trigger controls are named next1 and next2. And the sections are named: step1, step2, step3. 

if(next1.clicked) 
{ 
    step1.expanded = false; 
    step2.expanded = true; 
}

if(next2.clicked) 
{ 
    step2.expanded = false; 
    step3.expanded = true; 
}

Security Subject Information

You can use a form.load rule to pre-populate fields in your form with information about the currently logged in user. For example, if you have controls in your form named Id, FirstName, LastName, Email and Roles, the following rule will prefill those fields as indicated below.

var x;
if (form.load) { 
    // User Information 
    Id.value = _data.getParameter('subject.id'); // Username 
    FirstName.value = _data.getParameter('subject.first.name'); 
    LastName.value = _data.getParameter('subject.last.name'); 
    Email.value = _data.getParameter('subject.email'); 
 
    var roles = _data.getParameter ("subject.roles"); 
    if (roles) { 
        eval ('x=' + roles); 
        Roles.options = x; 
    } 
}

This rule is useful in a workflow where you want to make a the tab named Review visible only for the workflow activity named Manager Review.

EmailAddress.value;

if (MilitaryOrCivilian.value === 'Military') { 

 
//Military 
DetailedSummaryMsg.value =  
"<b>Military Info:</b><br/>" +  "Military ID: " + MilitaryID.value + "<br/>" + 
"Rank: " + Rank.value + "<br/>" + 
"CurrentTitle: " + CurrentTitle.value + "<br/>" + 
"Years of Service: " + YearsOfService.value + "<br/>"; 
} else if (MilitaryOrCivilian.value === 'Civilian') { 

 
//Civilian 
DetailedSummaryMsg.value =  
"<b>Civilian Info:</b><br/>" +  
"SSN: " + SSN.value + "<br/>" + 
"Current Employer: " + CurrentEmployer.value + "<br/>" + 
"Current Title: " + CurrentTitle2.value + "<br/>" + 
"Start Date: " + StartDate.value + "<br/>"; 
}

FinancialSummaryMsg.value = 
"<b>Total Assets:</b> $" + totalAssets + 
"<br/>" + "Total Bank Assets: $" + TotalBankValue.value + "<br/>" + 
"Total Real Estate Value: $" + TotalRealEstateValue.value + "<br/>" + 
"Total Auto Value: $" + TotalAutoValue.value + "<br/>";

Note when using field values from repeat controls you must use a javascript var and assign the concatenation to the var and then the var to the  message control value. For example imagine you have a message control named Summary and a repeat control named Account:

var acctSummary = ''; 
for (var i = 0; i < Account.value.length; i++) { 
    if (Q[i].value > 0) { 
        acctSummary = acctSummary + 'Account #' + i + ': ' + Account[i].value + '<br/>'; 
    } 
} 
Summary.value = acctSummary;

Dynamic Labels, Help, Hints

You can set the value of control labels, help and hint dynamically in a rule. For example imagine you do not know the label, help or hint at design time but would rather set it dynamically when a user opens your form.

if (form.load) 
{ 
  Text99.label = 'New Label'; 
  Text99.hint = 'New Hint'; 
  Text99.help = 'New Help'; 
}

In the above example the label, help and hint is still hard-coded. It's just being set from the rule rather than in the form designer controls' properties. To make this more useful you can initialize these properties from _data parameters:

if (form.load)
{ 
   Text99.label = _data.getParameter('label'); 
   Text99.hint = _data.getParameter('hint'); 
   Text99.help = _data.getParameter('help'); 
}

Since _data.getParameter enables access to values passed to the form that are not bound to actual controls this is often a very useful pattern.

Visible/Invisible

This rule makes the message control nickNameThankYou visible when the user enters a value into the nickName input text control. And then hides the message control if the user deletes the value in nickName.

if (nickName.value.length > 0 ) 
{ 
    nickNameThankYou.visible = true; 
} 
else 
{  
    nickNameThankYou.visible = false; 
}

Visible/Invisible Section

Often section controls contain many inner controls. For example imagine a form that contains a person's medical history. One of the questions on the form asks if the patient uses a hearing aid. If they answer yes, then you want to collect more details on their hearing aid usage such as left ear, right ear, bilateral; hearing aid brand; etc. If they answer no then you want to hide all the questions specific to hearing aids. Also when the answer is yes you want to require them to answer all the hearing aid detailed questions.

Imagine this example form has a section named HearingAid. By default HearingAid visible is set to false in the form designer.

When they answer yes, you must set HearingAid.visible=true AND also each required field inside the section to field.required = true. If they then change the answer to no then another rule makes the HearingAid.visible=false AND all the field.required=false. If the HearingAid section contains many child controls this rule becomes very long and tedious to write

We can simplify this by using the required property for sections. In the designer default all controls that must be answered inside HearingAid to required. Default the HearingAid section to not required and not visisble. Your rule can be much simpler. By setting HearingAid.required=false all the inner controls recursively also become required=false.

if (useAid.value === 'no') {
    // Hide 
    HearingAid.visible = false; 
    HearingAid.required = false; 
} else { 
    // Show 
    HearingAid.visible = true; 
    HearingAid.required = true; 
} 

Select Tab

This rule makes a specific tab the selected tab based on the choice of a radio control. The radio is named SelectTab and has three options: person, auto, home. The tabs are named personTab, autoTab and homeTab. Tabs also can be selected based on trigger controls or other input controls using the same method show here. 

if (SelectTab.value.length > 0) { 
  autoTab.selected = false; 
  homeTab.selected = false; 
  personTab.selected = false; 
 
if (SelectTab.value === 'Auto') 
  autoTab.selected = true; 
else if (SelectTab.value === 'Home') 
  homeTab.selected = true; 
else personTab.selected = true;                                         
}

Next Tab

This form contains a trigger control at the bottom of each tab labeled "Next". When "Next" is clicked the trigger rule executes and makes the next tab the selected tab. This assists the user in navigating through the form. The Tabs are named T1, T2, T3, T4. The trigger controls are named C1, C2, C3

// Navigate Tabs 
if (C1.clicked) { 
    T2.selected = true; 
} else if (C2.clicked) {
    T3.selected = true; 
} else if (C3.clicked) { 
    T4.selected = true; 
} 

Expand/Collapse Section

This form has three sections. The first section is expanded and the 2nd and 3rd are collapsed. When the user files in the 1st section they click a "Next" trigger control which causes that section to collapse and the next section to expand. The trigger controls are named next1 and next2. And the sections are named: step1, step2, step3. 

if(next1.clicked) 
{ 
    step1.expanded = false; 
    step2.expanded = true; 
}

if(next2.clicked) 
{ 
    step2.expanded = false; 
    step3.expanded = true; 
}

Security Subject Information

You can use a form.load rule to pre-populate fields in your form with information about the currently logged in user. For example, if you have controls in your form named Id, FirstName, LastName, Email and Roles, the following rule will prefill those fields as indicated below.

var x;
if (form.load) { 
    if (// User Information 
    Id.value = _data.getParameter('flowsubject.activity.nameid'); === 'Manager Review')// Username 
 {   FirstName.value = _data.getParameter('subject.first.name'); 
    ReviewLastName.visiblevalue = true_data.getParameter('subject.last.name'); 
    } 
}

Multiple Choice

This rule makes the appropriate input text controls visible depending on the choice a user makes in a radio option controls searchChoice.

if (searchChoiceEmail.value === 'Organizations_data.getParameter('subject.email'); 
 
{    var orgname.visibleroles = true; _data.getParameter ("subject.roles"); 
     firstname.visible = false;if (roles) { 
     lastname.visible = false;  eval ('x=' + roles); 
       clientId Roles.visibleoptions = falsex; 
    } 
else }

This rule is useful in a workflow where you want to make a the tab named Review visible only for the workflow activity named Manager Review.

if (searchChoice.value === 'Individuals'form.load) { {
     orgname.visible = false; 
    firstname.visible = true;if (_data.getParameter('flow.activity.name') === 'Manager Review')  {
         lastnameReview.visible = true; 
    clientId.visible = false; 
} else } 
}

Multiple Choice

This rule makes the appropriate input text controls visible depending on the choice a user makes in a radio option controls searchChoice.

if (searchChoice.value === 'Client IDOrganizations') 
{ 
    orgname.visible = falsetrue; 
    firstname.visible = false; 
    lastname.visible = false; 
    clientId.visible = truefalse; 
} 

Dynamic Options

Selection controls' (radios, checkboxes, dropdowns, T/F) options can be set dynamically via rules rather than statically via the control's options property. However if the control comes from an XSD schema data source rather than one of the standard palette controls, then the designer must take care to not set the options to something outside of what is valid for that schema element. For example if your XSD has a string enumeration and list valid options as 'red', 'green', and 'blue', then you should not use a rule to dynamically set the options to 'small', 'medium', 'large'. If you do then then your form will not work correctly in use mode. If a user selects the option 'small' they will get a validation error on the form. This is because 'small' is not one of the options allowed by your underlying XSD schema.

Triggers & Dynamic Options

This rule is executed when the user clicks the trigger controls with Name ''search''. It then dynamically sets options on a dropdown list control with Name coffeeShopList.

if (search.clicked) 
{
else if (searchChoice.value === 'Individuals') 
{ 
    orgname.visible = false; 
    firstname.visible = true; 
    lastname.visible = true; 
    coffeeShopListclientId.optionsvisible = ['Koffee', 'Starbucks', 'Willoughbys', 'Dunkin Donuts'];
} 

Now replace the hard coded list of coffee shops with a rule that invokes an http.get. This must return an X-JSON header which contains a JSON object. The object is evaluated and assigned to the variable x. In this case the JSON object contains an options field of type array. See the section on dynamic content for more details.

var x;
if (search.clicked) 
{ 
    eval('x=' + http.get('http://<webhost>/getCoffeeShopList')); coffeeShopList.options = x.options; }

Value Change & Dynamic Options

This rule dynamically sets the options in a dropdown list based on the value selected in another form field. This form contains three fields named Products, Series and Model. The series options are set dynamically based on the product selection. Also when a new product is selected we enable the series dropdown and both clear and disable the model dropdown. This form contains other rules which set the models based on the selected series. 

if (product.value === 'Laserjet Printers' false; 
} else if (searchChoice.value === 'Client ID') 
{ 
    orgname.visible = false; 
    firstname.visible = false; 
    lastname.visible = false; 
    clientId.visible = true; 
} 

Dynamic Options

Selection controls' (radios, checkboxes, dropdowns, T/F) options can be set dynamically via rules rather than statically via the control's options property. However if the control comes from an XSD schema data source rather than one of the standard palette controls, then the designer must take care to not set the options to something outside of what is valid for that schema element. For example if your XSD has a string enumeration and list valid options as 'red', 'green', and 'blue', then you should not use a rule to dynamically set the options to 'small', 'medium', 'large'. If you do then then your form will not work correctly in use mode. If a user selects the option 'small' they will get a validation error on the form. This is because 'small' is not one of the options allowed by your underlying XSD schema.

Triggers & Dynamic Options

This rule is executed when the user clicks the trigger controls with Name ''search''. It then dynamically sets options on a dropdown list control with Name coffeeShopList.

if (search.clicked) 
{ 
    seriescoffeeShopList.options = ['Koffee', 'Starbucks', 'Laserjet5 seriesWilloughbys', 'Laserjet6Dunkin seriesDonuts'];

    series.enabled = true;} 

Now replace the hard coded list of coffee shops with a rule that invokes an http.get. This must return an X-JSON header which contains a JSON object. The object is evaluated and assigned to the variable x. In this case the JSON object contains an options field of type array. See the section on dynamic content for more details.

var x;
if (search.clicked) 
{ 
     model.options = [];eval('x=' + http.get('http://(your webhost)/getCoffeeShopList'));  
    modelcoffeeShopList.enabledoptions = falsex.options; 
} 

...

Value Change & Dynamic Options

This rule handles the case of initializing multiple control values based on the selection of a dropdown control. It handles this case better than using a long if/else construct by using a JSON string. First add options to the dropdown named SalesRep in the format <value>=<label> where <value> will be used as an index key into a JSON array of details about each person.

Megan=Megan Smith 
Jim=Jim Brown 
Nancy=Nancy Jones 
Brian=Brian Jones 

Then write a rule that first sets up a javascript JSON syntax array with the contact information for each person. The rules then uses the dropdown value to index into the contantInfo array to set the details for the selected person into four other form controls.

...

...

dynamically sets the options in a dropdown list based on the value selected in another form field. This form contains three fields named Products, Series and Model. The series options are set dynamically based on the product selection. Also when a new product is selected we enable the series dropdown and both clear and disable the model dropdown. This form contains other rules which set the models based on the selected series. 

if (product.value === 'Laserjet Printers') 
{ 
    series.options = [' ', 'Laserjet5 series', 'Laserjet6 series']; 
    series.enabled = true; 
    model.options = []; 
    model.enabled = false; 
} 

Dynamic Control Initialization using JSON

This rule handles the case of initializing multiple control values based on the selection of a dropdown control. It handles this case better than using a long if/else construct by using a JSON string. First add options to the dropdown named SalesRep in the format <value>=<label> where <value> will be used as an index key into a JSON array of details about each person.

Megan=Megan Smith 
Jim=Jim Brown 
Nancy=Nancy Jones 
Brian=Brian Jones 

Then write a rule that first sets up a javascript JSON syntax array with the contact information for each person. The rules then uses the dropdown value to index into the contantInfo array to set the details for the selected person into four other form controls.

/*member '' Brian Jim Megan Nancy cell email phone */
 
var contactInfo = { 
    "" : {  
        name : "Jim Brown", 
        email : jim@comcast.net"", 
        phone : "203-208-2999", 
        cell : "" 
    }, 
    "NancyMegan" : {  
         name : "NancyMegan JonesSmith", 
         email : nancy@snetMSmith@mycompany.netcom, 
         phone : "(203-208-2991) 694-2439 Ext. 516", 
         cell : "(203) 337-3242" 
    }, 
    "BrianJim" : {  
        name : "BrianJim JonesBrown", 
        email : BJones@mycompanyjim@comcast.comnet, 
        phone : "203-748208-65022999", 
        cell : "" 
    }, 
};    var repId"Nancy" = SalesRep.value;
SalesRepName.value = contactInfo[repId].name; 
SalesRepEmail.value = contactInfo[repId].email; 
SalesRepPhone.value = contactInfo[repId].phone; 
SalesRepCell.value = contactInfo[repId].cell;

Try this simple Clinic Location form which uses this approach to initialize its controls.

Verify User

This rule executes when the user enters a value into the Username text field. It uses the built-in isUniqueUserId() method that returns false if the user already exists. If the user already exists this rule then sets the value of a message control, makes that message control visible on the form and sets the Username valid property to false so that Username field displays as invalid to guide the user to make a correction. See the section on dynamic content for more details.

if (U.value.length > 0) { : {  
        name : "Nancy Jones", 
        email : nancy@snet.net, 
        phone : "203-208-2991",  
        cell : "" 
    }, 
    "Brian" : {  
        name : "Brian Jones", 
    if (frevvo.isUniqueUserId(user.value, tenant.value) === false)email {: BJones@mycompany.com, 
       M.value =phone 'User: ' + U.value + ' already exists';"203-748-6502", 
        cell : "" 
  M.visible = true;} 
};
 
var repId =    U.validSalesRep.value;
SalesRepName.value = falsecontactInfo[repId].name; 
SalesRepEmail.value = contactInfo[repId].email; 
}SalesRepPhone.value else { 
        M.visible = false; 
    } 
} 

Digital Signature

This form uses a rule to pass a username and password to a LDAP Active Directory authentication service. If authentication fails the form makes an error message control visible. If authentication succeeds the form disables the username form field and replaces the password field with a date field set to the current date. The form contains a trigger control named sign, username and password fields named u and p respectively, a date field named d and a message field named m.

Image Removed

/*member auth */
var x;
 
if (sign.clicked= contactInfo[repId].phone; 
SalesRepCell.value = contactInfo[repId].cell;

Try this simple Clinic Location form which uses this approach to initialize its controls.

Verify User

This rule executes when the user enters a value into the Username text field. It uses the built-in isUniqueUserId() method that returns false if the user already exists. If the user already exists this rule then sets the value of a message control, makes that message control visible on the form and sets the Username valid property to false so that Username field displays as invalid to guide the user to make a correction. See the section on dynamic content for more details.

if (U.value.length > 0) {  
   // passwords may contain characters that need url encodingif (frevvo.isUniqueUserId(user.value, tenant.value) === false) { 
      var p_encode = encodeURIComponent(pM.value); 
    eval('x=' + http.get('http://<webhost>/authServices/signForm?username='User: ' +  uU.value + '&password=' + p_encode))already exists'; if
(x.auth) { var dt = new Date(); var dayM.visible = dt.getDate()true; var
month = dt.getMonth() + 1; var year = dt.getFullYear(); d.value U.valid = monthfalse; +
'-' + day + '-'} +else year;{ d.visible
= true; u.enabled = false; p.visible = false; sign.visible = false; mM.visible = false; }
else { m.visible = true;} }
}

The authService is an example HTTP servlet that returns a JSON response.

public void doGet (HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException {
 
    try { 

Digital Signature

This form uses a rule to pass a username and password to a LDAP Active Directory authentication service. If authentication fails the form makes an error message control visible. If authentication succeeds the form disables the username form field and replaces the password field with a date field set to the current date. The form contains a trigger control named sign, username and password fields named u and p respectively, a date field named d and a message field named m.

Image Added

/*member auth */
var x;
 
if (sign.clicked) { 
    // passwords may contain characters that need url encoding 
       String username = request.getParameter(REQUEST_SIG_USERNAMEvar p_encode = encodeURIComponent(p.value);

        String password = request.getParameter(REQUEST_SIG_PASSWORD); eval('x=' + http.get('http://(your webhost)/authServices/signForm?username=' + 
       password = URLDecoder.decode(password, "UTF-8");          // Authenticate Signature    u.value + '&password='    authenticateUser(response, username, password+ p_encode));

     }if catch (Exception e(x.auth) { 
        var dt throw= new ServletExceptionDate(e); 
    }  }  privatevar day void= authenticateUser(HttpServletResponse response, String u, String p) {dt.getDate(); 
        var month if= (realmdt.authenticate(u, p) === null)getMonth() + 1; 
        var year = responsedt.addHeader(RESPONSE_JSON_HEADER, "{auth:false}")getFullYear(); 
        d.value = month + '-' + day + '-' + year;

        d.visible = true; 
        u.enabled = false; 
        p.visible = false; 
    else    sign.visible = false 
        response.addHeader(RESPONSE_JSON_HEADER, "{auth:true}");m.visible = false; 
    } else { 
    m.visible = true; 
    } 

Here's another example form that requires a doctor's signature. This shows how the form works in use mode. The first image contains a dropdown to select one of the doctor's authorized to sign the form and a text control where they enter their PIN code.

Image Removed

This image shows the case where the doctor entered an invalid PIN and the error message becomes visible.

Image Removed

This image shows the case of a valid PIN. Today's date is entered into the date control via the rule and made visible and disabled from edit. The username dropdown is disabled and the PIN and Sign controls are hidden.

Image Removed

Calculate Net Worth

This form contains two rules. One is adding values entered into a column of assets and a column of liabilities and calculatng netWorth. The 2nd rule is checking the value of netWorth and displaying an error message and marking netWorth invalid if liabilities exceed assets since the form designer does not want the form to be submitted in that state.

if (netWorth.value < 0) 
{ 
    assetsExceedLiabilitiesMsg.visible = true; 
    netWorth.valid = false; 
} 
else 
{ 
    assetsExceedLiabilitiesMsg.visible = false; 
    netWorth.valid = true; 
} 

When a rule sets <control>.invalid the control background turns red and the submit button greys out just as if the user had entered an invalid value into a phone control.  treats it exactly the same way. This is a good way to dynamically control your form's valid state.

Dates and Times

Working with dates and times is very common in most forms. The samples below show you how to create the most common business logic with dates and times. 

The Date/Time control uses a "T" to separate the date and time when initializing from a business rule. For example, the syntax shown below will initialize a Date/Time control named DtTm to May 15, 2012 at 4:20 am.

DtTm.value = "5/15/2012T4:20";

Date controls will successfully initialize via a rule or an xml document when the data provided has a single digit for the month and/or the day. The rule below can be used to initialize a form with a date and date/time control. Notice the Date.Value and Date+Time.value rule identifiers have a single digit for the month.  

if(form.load)
{
Date.value = "2011-2-10";
Date_Time.value = "2011-1-23T20:20:20";
}

The Date/Time control will display an "Invalid Value" error if single digits for the month and/or day are used .

Image Removed

 Change the Date_Time.value = "2011-1-23T20:20:20"; to Date_Time.value = "2011-01-23T20:20:20"; in the rule or the xml document for successful initialization.

Duration

This form initializes the hospital discharge date using a rule, and when the user enters the admission date a 2nd rule calculates the number of days the patient stayed in the hospital.

Image Removed

if (A.value !== '' && D.value !== '') 
{
  var da = A.value.split('-');
  var Ams = new Date(da[0],da[1],da[2]);
  da = D.value.split('-');
  var Dms = new Date(da[0],da[1],da[2]);
  var oneDay = 24*60*60*1000;

  if (Ams > Dms)
  {
    Days.value = 'Discharge date must be after Admission Date';
  } 
  else 
  {
    var diffDays = Math.round(Math.abs((Ams.getTime() - Dms.getTime())/(oneDay)));      
    Days.value = diffDays + ' days';
  }
  }

}

The authService is an example HTTP servlet that returns a JSON response.

public void doGet (HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException {
 
    try { 
        String username = request.getParameter(REQUEST_SIG_USERNAME); 
        String password = request.getParameter(REQUEST_SIG_PASSWORD); 
        password = URLDecoder.decode(password, "UTF-8"); 
        // Authenticate Signature 
        authenticateUser(response, username, password);  
    } catch (Exception e) { 
        throw new ServletException(e); 
    } 
}

private void authenticateUser(HttpServletResponse response, String u, String p) { 
    if (realm.authenticate(u, p) === null) 
        response.addHeader(RESPONSE_JSON_HEADER, "{auth:false}"); 
    else 
        response.addHeader(RESPONSE_JSON_HEADER, "{auth:true}"); 
} 

Here's another example form that requires a doctor's signature. This shows how the form works in use mode. The first image contains a dropdown to select one of the doctor's authorized to sign the form and a text control where they enter their PIN code.

Image Added

This image shows the case where the doctor entered an invalid PIN and the error message becomes visible.

Image Added

This image shows the case of a valid PIN. Today's date is entered into the date control via the rule and made visible and disabled from edit. The username dropdown is disabled and the PIN and Sign controls are hidden.

Image Added

Calculate Net Worth

This form contains two rules. One is adding values entered into a column of assets and a column of liabilities and calculatng netWorth. The 2nd rule is checking the value of netWorth and displaying an error message and marking netWorth invalid if liabilities exceed assets since the form designer does not want the form to be submitted in that state.

if (netWorth.value < 0) 
{ 
    assetsExceedLiabilitiesMsg.visible = true; 
    netWorth.valid = false; 
} 
else 
{ 
    assetsExceedLiabilitiesMsg.visible = false; 
    netWorth.valid = true; 
} 

When a rule sets <control>.invalid the control background turns red and the submit button greys out just as if the user had entered an invalid value into a phone control.  treats it exactly the same way. This is a good way to dynamically control your form's valid state.

Dates and Times

Working with dates and times is very common in most forms. The samples below show you how to create the most common business logic with dates and times. 

The Date/Time control uses a "T" to separate the date and time when initializing from a business rule. For example, the syntax shown below will initialize a Date/Time control named DtTm to May 15, 2012 at 4:20 am.

DtTm.value = "5/15/2012T4:20";

Date controls will successfully initialize via a rule or an xml document when the data provided has a single digit for the month and/or the day. The rule below can be used to initialize a form with a date and date/time control. Notice the Date.Value and Date+Time.value rule identifiers have a single digit for the month.  

if(form.load)
{
Date.value = "2011-2-10";
Date_Time.value = "2011-1-23T20:20:20";
}

The Date/Time control will display an "Invalid Value" error if single digits for the month and/or day are used .

Image Added

 Change the Date_Time.value = "2011-1-23T20:20:20"; to Date_Time.value = "2011-01-23T20:20:20"; in the rule or the xml document for successful initialization. 

Age

This example form automatically determines today's date and then calculates the person's age in the control named 'Age' when they enter their birth date into the control named 'BirthDate'.

Image Added

if (BirthDate.value.length > 0) {
  var today = new Date();
  var dob = BirthDate.value.split('-'); 
  var dob2 = new Date(dob[0],dob[1]-1,dob[2]);
  var age = today.getFullYear() - dob2.getFullYear();
  if (today.getMonth() < dob2.getMonth() || 
     (today.getMonth() === dob2.getMonth() &&
      today.getDate() < dob2.getDate())) {
    age -= 1;
  }
  if (age >= 0) {
     Age.value = age;
  } else {
     Age.value = null;
  }
}

Duration

This form initializes the hospital discharge date using a rule, and when the user enters the admission date a 2nd rule calculates the number of days the patient stayed in the hospital.

Image Added

/ Calculate Hospital Stay Duration 
if (A.value !== '' && D.value !== '') { 
    var da = A.value.split('-'); 
    var Ams = new Date(da[0],da[1],da[2]); 
    da = D.value.split('-'); 
    var Dms = new Date(da[0],da[1],da[2]);
 
    if (Ams > Dms) { 
        Days.value = 'Discharge date must be after Admission Date'; 
    } else { 
        Days.value = (Dms - Ams) / (1000*60*60*24) + ' days'; 
    } 
}

Duration Between Date and Time

Here is a rule example to calculate the time difference between two Date/Time values in hours:minutes format :  

 if (StartDateTime.value !== '' && EndDateTime.value !== '') {
 
    var d = StartDateTime.value.split('-');
    var d1 = d[2].split('T');
    var t = d1[1].split('Z')[0];
    var t1 = t.split(':');
    var startDate = new Date(d[0],d[1],d1[0], t1[0], t1[1], t1[2]);
 
    d = EndDateTime.value.split('-');
    d1 = d[2].split('T');
    t = d1[1].split('Z')[0];
    var t1 = t.split(':');
    var endDate = new Date(d[0],d[1],d1[0], t1[0], t1[1], t1[2]);
 
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);
 
    TimeToComplete.value = (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
 
}

Today's Date and Time

Use 's built-in date and time methods to set your date, time, and date/time controls to the current date and time in the user's local timezone.

...

var today = new Date(); 
var m = today.getMonth() + 1; 
var d = today.getDate(); 
var y = today.getFullYear(); 
var h = today.getHours(); var min = today.getMinutes(); var todayStr = m + '-' + d + '-' + y + ' ' + h + ':' + min; Signature.value = 'Signed by ' + Name.value + ' on ' + todayStr;

...

This rule checks that the date entered into a control named AppointmentDate is no more than 14 days greater than today's date. 

var date1 = DateUtil.today(); 
var date2 = Appointment.value; 
date1 = date1.split("-"); 
date2 = date2.split("-"); 
var sDate = new Date(date1[0]+"/"+date1[1]+"/"+date1[2]); 
var eDate = new Date(date2[0]+"/"+date2[1]+"/"+date2[2]); 
var DaysApart = Math.round((eDate-sDate)/86400000);
  
if (DaysApart > 14) { 
    Appointment.status = "Date should be within 14 days from today's date."; 
} else if (DaysApart < 0) { 
    Appointment.status = "Date should not be earlier to today's date."; 
} 

...

// Converts UTC to either CST or CDT 
if (form.load) 
{ 
    var today = new Date(); 
    var DST = 1; // If today falls outside DST period, 1 extra hr offset 
    var Central = 5; // Minimum 5 hr offset from UTC 
    // Is it Daylight Savings Time? 
    // 
    var yr = today.getFullYear(); 
    // 2nd Sunday in March can't occur after the 14th 
    var dst_start = new Date("March 14, "+yr+" 02:00:00"); 
    // 1st Sunday in November can't occur after the 7th 
    var dst_end = new Date("November 07, "+yr+" 02:00:00"); 
    var day = dst_start.getDay(); // day of week of 14th 
    // Calculate 2nd Sunday in March of this year 
    dst_start.setDate(14-day); day = dst_end.getDay(); // day of the week of 7th 
    // Calculate first Sunday in November of this year dst_end.setDate(7-day); 
    // Does today fall inside of DST period? 
    if (today >= dst_start && today < dst_end) { DST = 0; 
} 
 
    // Adjust Date for Central Timezone 
    today.setHours(today.getHours() - Central - DST);   
 
    var m = today.getMonth() + 1; 
    var d = today.getDate(); 
    var da = today.getDay(); 
    var y = today.getFullYear(); 
    var h = today.getHours(); 
    var min = today.getMinutes(); 
    if (min < 10) { min = '0' + min;} 
    var timezone = ['CDT', 'CST']; 
    var dom = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
               'Thursday', 'Friday', 'Saturday']; 
    var todayStr = dom[da] + ' ' + m + '-' + d + '-' + y + ' ' + h + ':' + min + ' ' + timezone[DST];  
 
    DateTime.value = todayStr; 
}

Hours >= 4 and <= 6 Apart

...

/*member tenants ids */

if(form.load)
{
  TA.value = frevvo.listTenants();
  var x;
  eval('x=' + frevvo.listTenants());
  var opts = [];
  for (var i = 0; i < x.tenants.length; i++) {
    opts[i] = x.ids[i] + '=' + x.tenants[i];
  }
  // Initialize dropdown of all tenants on the form server 
  TenantList.options = opts;
}

Repeat Item Added

This rule executes when a new item is added to a repeat. Imagine your form contains a repeating section named Employee with name Erepeat. NOTE: that the name Erepeat is set on the Repeat control and not on the Section control. The Employee section control contains many controls such as Name, Phone, etc.. and a dropdown control labeled Manager and named M. It also contains a radio control labeled Employee Shift named ES whose options have been set to 'Day' and 'Evening'.

...

/*member firstname lastname options resultSet value */
var x;
 
if (form.load) 
{ 
    var baseURL = 'http://www.myhost.com:8080/database/';
 
    // Manager Dropdown 
    eval('x=' + http.get(baseURL + 'Manager'));
    var opts = ['']; // default 1st option to blank 
    for (var i=0; i < x.resultSet.length; i++) { 
        if (x.resultSet[i]) { 
            opts[i+1] = x.resultSet[i].lastname+ ", " + x.resultSet[i].firstname; 
        } 
    }
 
 } // Repeat item index 0 is on the form by default 
  M[0].options = opts; 
  ES[0].value = 'Day'; // default the employee shift to day 
}

Now when a new item gets added when a user clicks the "+" icon we can save the overhead of going back to the database to retrieve dynamic options.

...

if (Medrepeat.itemAdded) 
{ 
    var index = Medrepeat.itemIndex; 
    for (var i = 0; i < Medication.value.length; i++) { 
        if (i !== index) {
            Medication[i].expanded = false; 
        }
        else {
            Medication[i].expanded = true;  
        }
    } 
} 

Repeat Dynamic Min/Max

It is not currently possible to change a repeat control's min and max properties in a business rule. This feature may be added in a future release. One solution is to use hidden section controls rather than a repeat control. For example imagine an airline reservation form where the number of traveler detail rows displayed and required is based on the number of airline tickets purchased. This example form allows a maximum of 3 ticket purchases. So, first add 3 section controls for traveler details. It is important to make sure that you name the travel detail section controls uniquely -- Traveler1 is the name of the first section, Traveler2 is the name of the second section, etc.. Next uncheck the visible and required property on all 3 section controls. Then add a business rule that makes the number of sections visible and required based on the number of purchased airline tickets.

Traveler1.visible = false;
Traveler2.visible = false;
Traveler3.visible = false;
Traveler1.required = false;
Traveler2.required = false;
Traveler3.required = false;

for (var i=0; i < NumTickets.value; i++) {
 if (i >= 0) {
  Traveler1.visible = true;
  Traveler1.required = true;
 }
 if (i >= 1) {
  Traveler2.visible = true;
  Traveler2.required = true;
 }
 if (i >= 2) {
  Traveler3.visible = true;
  Traveler3.required = true;
 }
}

Tables

Tables are identical to repeat controls when referenced in business rules. Tables are a grid layout of repeating items. All the rule examples in this chapter that discuss repeats apply also to tables. The one important note is that you cannot explicitly name the repeat control inside your table. The repeat control inside a table is automatically named as <TableName>Repeat. For example a table named Expense automatically has a repeat named ExpenseRepeat. The rule ExpenseRepeat.itemAdded and ExpenseRepeat.itemIndex references an item added to your table and that item's index respectively.

One special consideration for tables is that rules which dynamically set the column header label, hint and help mesages must use the array syntax. This is somewhat counter-intuitive since each column appears to have only a single label, help and hint. Here is the rule to dynamically set these three properties: 

FirstName[0].label = 'blah label';
FirstName[0].hint = 'blah hint';
FirstName[0].help = 'blah help';[0].label = 'blah label';
FirstName[0].hint = 'blah hint';
FirstName[0].help = 'blah help';

Clearing Values in a Table

This rule clears the values from all rows in a table. Notice the For loop that iterates over all the rows. Inside the loop a null value is assigned to all the columns in the table row.

for (var i = 0; i < Col0.value.length; i++) { 
    Col0[i].value = null;
    Col1[i].value = null;
    Col2[i].value = null;
  } 

You cannot clear an entire table from a rule.

if(form.load){
 S[0].valid = false;
 TItem[0].valid = false;
}

...

/*member num */
var x;
 
if (form.unload) 
{ 
    eval('x=' + http.get('http://<webhost>(your webhost)/json/getNextOrdernum'));  
    OrderNum.value = x.num;
}

...

Checking the Detailed Loc checkbox in the Form Property pane and implementing a rule like the one shown will go to Google Maps to get additional information and a map associated with the location.

...

/*member nextid results */
var x;
 
if (form.load) { 
    var readmethod = 
'http://www.frevvo.com/google/spreadsheets/query/u/<google username>/p/<google password>/s/SequentialNumberGenerator/w/Sheet1?media=json&query=formname="Checkbook"';
 
    var updatemethod = 
'http://www.frevvo.com/google/spreadsheets/update/u/<google username>/p/<google password>/s/SequentialNumberGenerator/w/Sheet1?media=json&query=formname="Checkbook"';
 
 
    eval('x=' + http.get(readmethod)); 
 
    var id = 'unknown'; 
 
    if (x.results === null) 
        { CheckNum.value = 'error'; 
    } else if (x.results.length === 0) { 
        CheckNum.value = 'No Match'; 
    } else { 
    id = x.results[0].nextid; 
    CheckNum.value = id; 
    id = id*1 + 1; 
    } 
 
    if (id !== 'unknown') { 
    eval('x=' + http.get(updatemethod + '&updates=nextid=' + id + '&_method=put')); 
    } 
}

Unique ID

Forms such as invoices, bills of lading, etc often need to be stamped with a unique ID. The Sequential Number example is one approach, however it has some limitations. One is that you must guarantee that only one person at a time is filling out your form. This is because there is no mutex around the read and update of the Google spreadsheet cell.

...

if (form.load) 
{ 
    InvoiceNum.value = _data.getParameter('form.id'); 
} 

Repeat Item Initialization

...

Again, to initialize repeat items already on your form in the Form Designer by default, either enter your initial default values directly into the in the Form Designer or add this rule.

if (form.load) 
{ 
    for (var i=0; i < albumOnly.value.length; i++) { 
         i++) { albumOnly[i].value = 0; 
    } 
} 

This rule takes into account a repeat where min > 1. If min is 0 or 1, you can simplify this further by removing the for loop and simply have albumOnly[0].value = 0 inside the if (form.load).

...

if (MLrepeat.itemAdded)
{
  var index = MLrepeat.itemIndex;

 
   // This rule is fired both when the user clicks "+" 
   // and when frevvo adds items found in the init doc. 
   // Need to assign new mid only when user clicks "+" 
 
  // New items added via "+" will have a zero length value. 
  if (MLmid[index].value.length === 0) { 
    // Assign unique ID to label so it can be referenced 
    // in RI Mailing Labels field 
 
    // Count the number of existing mailing labels on the form 
    var maxId = 0; 
    for (var i=0; i < MLmid.value.length; i++) 
    { 
     if (MLmid[i].value > maxId) { 
       maxId = MLmid[i].value; 
     } 
   } 
   var next = parseInt(maxId, 10) + 1; 
   MLmid[index].value = next.toFixed(0).toFixed(0); 
 } 
}

Repeat Item Increment

You can easily auto populate incremental items numbers in repeats using a business rule. In this example Erepeat is the name of the repeat control and Item is the name of the item control inside the repeat. You also need to set 1 as the default value of first repeating Item control directly into your form field via the form designer as shown here.

Image Added

if (Erepeat.itemAdded || Erepeat.itemRemoved){
  for(var i = 0; i < Item.value.length; i++) {
    Item[i].value = i+1;
  }

}

 Image Added

Display Uploaded Image

A rule can dynamically display an image uploaded to your form via the upload control. In this example the upload control is named 'u'. The form also must contain a message control as a place holder for displaying the uploaded image. The rule dynamically creates a URL to the uploaded image in the temporary attachment repository. The upload control's value 'u.value' is a GUID that uniquely identifies the attachment. The uploaded image is included in the submissions pdf.

if (u.value.length > 0) {
  var baseUrl = _data.getParameter('_frevvo_base_url') + 
      ""/frevvo/web/tn/" +
      _data.getParameter('tn.id') +
      "/user/"+_data.getParameter('user.id') +
      "/app/"+_data.getParameter('app.id') +
      "/form/"+_data.getParameter('form.id');
 
  im.value = "'<img src="'" +
         baseUrl + "'/attachment/"' + u.value+"'/does_not_matter'"/>"';
} 

Here is the example form before and after the user has upload uploaded the orangegrove.png image:

...

//Show Employee Search Criteria 
if (FindEmployee.clicked) 
{ 
    EmployeeSearch_s1.visible = true; 
    EmployeeSearch_s1.expanded = true; 
} 

The section control contains controls that are the search critiera for finding a RACF ID based on other pieces of information you may know about an employee such as name, type, email address. The values entered into the search criteria can be partial values. For instance entering a name "Smith" will find all employees whose name contains the letters "Smith". If you also select email, it will find all employees whose name contains "Smith" and have an email address containing the string "frevvo".

...

/*member clicked racfid resultSet type */
var x;
 
if (Search.clicked) {
   
 eval('x=' + 
http.get('database/myqset/findEmployee?name={name_s1}&type={type_s1}&racfid={id_s1}&email={email_s1}'));
 
    var opts= []; 
    for (var i=0; i < x.resultSet.length; i++) { 
        if (x.resultSet[i]) { 
            opts[i] = x.resultSet[i].racfid + "=" + 
                      x.resultSet[i].name + ", " +name + ", " +  
                      x.resultSet[i].type;    
        } 
}
    SearchMsg.value = x.resultSet.length +  
    ' Matches Found. Change your criteria and click "search" to try again.'; 
    SearchMsg.visible = true; 
    SearchResults.options = opts; 
    SearchResults.visible = true; 
}

The Search returns one or more matches and dynamically populates a dropdown control named SearchResults. You can change the search criteria to narrow or expand you search. When you select one of the matches from the SearchResults dropdown this 3rd rule executes to copy the selection into the RACF ID control.

...

/*member lastname resultSet */
var x;
 
if (getCustomerList.value === 'Yes') 
{ 
  eval('x=' + http.get('http://<webhost>(your webhost)/database/lastnames'));
 
  var opts= []; 
  for (var i=0; i < x.resultSet.length; i++) { 
    if (x.resultSet[i]) { 
        opts[i] = x.resultSet[i].lastname; 
    }
  } 
  customerLastNames.options = opts; 
}

...

This example is similar except the URI uses the names query names query which returns both first and last names for each row in the customer table.

/*member firstname lastname resultSet */
var x;
 
if (getCustomerList.value === 'Yes') 
{
eval('x=' + http.get('http://<webhost>(your webhost)/database/names'));
 
var opts= []; 
for (var i=0; i < x.resultSet.length; i++) { 
    if (x.resultSet[i]) { 
        opts[i] = x.resultSet[i].firstname + " " + x.resultSet[i].lastname;
    } 
} 
customerFullNames.options = opts; 
}

This example is similar except the event that triggers the execution of the rule is an initial instance document loaded into the form when it opens. See the section on Document URIs for details on configuring your form to load an instance document. This rule executes before the form becomes visible in the browser. Thus the dynamic options are populated prior to the user seeing the form.

...

http://<host>/database/DocMgmt?docId={docId} 

The database configuration.xml contains the following <query> element.

<query name="DocMgmt" autocreate="true"> 
    <create> 
        <!-- Maps to the HTTP POST method --> 
        INSERT into documents SET docId='{docId}' 
    </create> 
    <retrieve> 
        <!-- Maps to the HTTP GET method --> 
        SELECT docname,docId FROM documents WHERE docId='{docId}'    
    </retrieve> 
    <update> 
        <!-- Maps to the HTTP PUT method --> 
        UPDATE documents SET docId='{docId}',docname='{docname}' WHERE docId='{docId}' 
    </update> 
    <delete> 
        <!-- Maps to the HTTP DELETE method --> 
        DELETE from documents WHERE docId='{docId}' 
    </delete> 
</query> 

First, the URL  http://<host>/database/DocMgmt/schema  was opened in the browser to automatically generate an XSD describing the resultset returned from the DocMgmt <retrieve> method. This XSD was then uploaded into the  application and the resultSet type added to the form. The docname control from that schema was edited and renamed 'docname'.

...

/*member firstname resultSet */
var x;
 
if (docname.value.length > 0) 
{
  eval('x=' + http.get('http://<webhost>(your webhost)/database/firstnames'));
 
  var opts= []; 
  for (var i=0; i < x.resultSet.length; i++) {  
    if (x.resultSet[i]) {  
        opts[i] = x.resultSet[i].firstname;  
    } 
  } 
  customerFirstNames.options = opts; 
}