Tips and hints about coding in JavaScript and FormCalc for Adobe Livecycle forms


Here are some tips about coding in JavaScript for dynamic forms created in Adobe Livecycle Designer:

  • Never call a function which is returning a value in the ::calculate event, as the calculation will stop working;

I will keep updating this list with every advice I will think of.

Advertisements

How to test if a checkbox is selected in Adobe Livecycle Designer dynamic form


Here is a simple way to get the status of a Check Box (to know if a Check Box is ticket or not) in a dynamic form created with Adobe Livecycle Designer.

/**
 * @param {Object} elemetToCheck The element you want to check
 * @return {Boolean} true if is ticked; false if it's not ticked
 */
function isTicked(elemetToCheck) {
    return (elemetToCheck.rawValue == elemetToCheck.items.nodes.item(0).value) ? return true : return false;
}

The first element in the condition (elemetToCheck.rawValue) gets the current value of the Check Box, which can be either the value you wrote in On value or Off value.

2014-08-28_123901

The second element in the condition (elemetToCheck.items.nodes.item(0).value) gets the value which you wrote in the On Value (in this example is “THEM-OTH”).

Usage (example)

If you have a list of Check Boxes and the last one is “Other” and you need to show a Text Field for the user to write his data, here is how you can do it:

In the ::change event of the checkbox “Other” you put the following script:

if(isTicked(this)) {
    //explainTextField is the name of the Text Field you want to show or hide
    explainTextField.presence = "visible";
} else {
    explainTextField.presence = "hidden";
}

Please check here my article on different ways of hidding and showing parts of a dynamic form.

How to get the new selected code and description of a Drop-down using JavaScript in LiveCycle Designer


If you want to get the value of a field in LiveCycle Designer using JavaScript you can just use .rawValue, but if you are working with a Drop-down, the rawValue will contain the current value or the old one before your selection and NOT the new selection you made. To get the code and description of the new selection “in real time” use the following code (on events of the drop-down):

var theNewDescription = xfa.event.newText;
var theNewCode = this.boundItem(xfa.event.newText);

How to replace all occurrences of a sub-string in a string with JavaScript


If you need to replace all the occurrences of a sub-string in a string in your JavaScript code, you have to call the built-in function replace() with a regular expression.
More info about the built-in function replace().

Here is a simple function that does that.

/**
 * Replaces all occurrences of "search" in "subject" with "replace".
 * @param {String} search The value being searched for, otherwise known as the needle.
 * @param {String} replace The replacement value that replaces found search values.
 * @param {String} subject The string being searched and replaced on, otherwise known as the haystack.
 */
function replaceAll(search, replace, subject) {
	return subject.replace(new RegExp(search, 'g'), replace);
}

How to modify the “on” value and caption of a repeated Check Box using JavaScript in LiveCycle Designer


If you are building dynamically a list of check boxes in Adobe’s LiveCycle Designer, you will have to be able to dynamically change the “on” value for each of the check boxes or else all the checked items will have the same value (default is 1).

Usually if you want some check boxes, you just drag them from Object Library and set the On Value with the value you want, but there are situations when you want to build dynamically a list of check boxes by repeating one of them.

Regular check boxes in LiveCycle Designer

Regular check boxes in LiveCycle Designer

Repeated check boxes in LiveCycle Designer

Repeated check boxes in LiveCycle Designer

To create a dynamic list of check boxes you have to use a Table (only Tables and Subforms can be set as repeaters) and repeat the row that contains the check box. Here is some example code:

for (var i = 0; i < countItems; i++) {
    // for each checkbox you want to add, create a new instance of the Row
    var rowInstance = form1.page2.Table1._Row1.addInstance(true);

    var myCheckBox = rowInstance.CheckBox1;

    // set the "on" value for the added checkbox
    myCheckBox.items.nodes.item(0).value = theDesiredCode;

    //set the caption of the added checkbox
    myCheckBox.caption.value.text.value = theDesiredCaption;
}

To better understand the code, take a look at the XML source for the repeated checkbox:

   <field name="CheckBox1" w="1.19in" h="0.236222in">
      <ui>
         <checkButton>
            <border>
               <edge stroke="lowered"/>
               <fill/>
            </border>
         </checkButton>
      </ui>
      <font typeface="Myriad Pro"/>
      <margin leftInset="1mm" rightInset="1mm"/>
      <para vAlign="middle"/>
      <value>
         <text>0</text>
      </value>
<caption placement="right" reserve="21.226mm">
         <para vAlign="middle"/>
         <value>
            <text>theDesiredCaption</text>
         </value>
      </caption>

      <items>
         <text>theDesiredCode</text>
         <text>0</text>
      </items>
      <bind match="none"/>
      <border>
         <edge>
            <color/>
         </edge>
         <corner thickness="0.1778mm"/>
      </border>
   </field>

Adobe LiveCycle Designer known restriction:
When you insert a new check box into your form, the default values (one and zero) are set in the XML as so the code above does not work when you want to change to a value other than integer. You have to change them to by modifying directly the XML, or by typing “dummy text” in the field for “on value” and change it back to 1. This will change the XML elements from 1 to 1, as shown in the XML examples below.

<field name="CheckBox1">
...
	<items>
		<integer>1</integer>
		<integer>0</integer>
		<integer>2</integer>
	</items>
...
</field>
Default XML source for a check box
<field name="CheckBox1">
...
	<items>
		<text>1</text>
		<text>0</text>
	</items>
...
</field>
Updated XML source to include strings