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
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:
1
2
3
4
5
6
7
8
9
10
11
12
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 <integer> so the code above does not work when you want to change to a value other than integer. You have to change them to <text> by modifying directly the XML, or by typing “bla bla bla” in the field for “on value” and change it back to 1. This will change the XML elements from <integer>1</integer> to <text>1</text>, as shown in the XML examples below.
1
2
3
4
5
6
7
8
9
<field name="CheckBox1">
...
<items>
<integer>1</integer>
<integer>0</integer>
<integer>2</integer>
</items>
...
</field>
Default XML source for a check box
1
2
3
4
5
6
7
8
<field name="CheckBox1">
...
<items>
<text>1</text>
<text>0</text>
</items>
...
</field>
Updated XML source to include strings
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
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:
1
2
3
4
5
6
7
8
9
10
11
12
| 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <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 <integer> so the code above does not work when you want to change to a value other than integer. You have to change them to <text> by modifying directly the XML, or by typing “bla bla bla” in the field for “on value” and change it back to 1. This will change the XML elements from
When you insert a new check box into your form, the default values (one and zero) are set in the XML as <integer> so the code above does not work when you want to change to a value other than integer. You have to change them to <text> by modifying directly the XML, or by typing “bla bla bla” in the field for “on value” and change it back to 1. This will change the XML elements from
<integer>1</integer> to <text>1</text>, as shown in the XML examples below.
1
2
3
4
5
6
7
8
9
| <field name="CheckBox1">... <items> <integer>1</integer> <integer>0</integer> <integer>2</integer> </items>...</field> |
Default XML source for a check box
1
2
3
4
5
6
7
8
| <field name="CheckBox1">... <items> <text>1</text> <text>0</text> </items>...</field> |
Updated XML source to include strings
Changing the visual properties of an object on the client
The example demonstrates how to manipulate the visual properties of an object; in this case, a text field. For example, selecting the Make the Field Wider check box expands the fillable area of the text field to four inches.
Note: To alter the visual properties of objects on the client, you must save your form as an Acrobat Dynamic PDF Form file.
In this example, the check boxes do not have unique object names; therefore, Designer ES2 assigns an instance value to reference the object. The check box script uses an if-else statement to give the effect of selecting and deselecting.
To see this scripting example and others, visit the LiveCycle ES2 Developer Center www.adobe.com/devnet/livecycle.
When the check box is selected, the field is moved according to the x and y settings. When the check box is deselected, the field is returned to its original location.
if (CheckBox1.rawValue == true) {
TextField.x = "3.0in";
TextField.y = "3.5in";
}
else {
TextField.x = "1in";
TextField.y = "3in";
}
When the check box is selected, the field changes to 4 inches. When the check box is deselected, the field width changes to 2.5 inches.
if (CheckBox2.rawValue == true)
TextField.w = "4in";
else
TextField.w = "2.5in";
When the check box is selected, the field height changes to 1.5 inches. When the check box is deselected, the field height changes to .5 inches.
if (CheckBox3.rawValue == true)
TextField.h = "1.5in";
else
TextField.h = "0.5in";
When the check box is selected, the field border changes to red. When the check box deselected, the field border changes to white.
if (CheckBox4.rawValue == true)
TextField.border.edge.color.value = "255,0,0";
else
TextField.border.edge.color.value = "255,255,255";
When the check box is selected, the fillable area of the text field changes to green. When the check box is deselected, the fillable area of the text field changes to white.
if (CheckBox5.rawValue == true) {
xfa.resolveNode("TextField.ui.#textEdit.border.fill.color").value = "0,255,0";
}
else {
xfa.resolveNode("TextField.ui.#textEdit.border.fill.color").value = "255,255,255";
}
When the check box is selected, the fillable area of the text field adjusts to accommodate the value. When the check box is deselected, the fillable area of the text field does not adjust.
if (CheckBox6.rawValue == true)
TextField.minW = "0.25in";
else
TextField.maxW = "2.5in";
When the check box is selected, the field is hidden. When the check box is deselected, the field is visible.
if (CheckBox7.rawValue == true)
TextField.presence = "hidden";
else
TextField.presence = "visible";
When the check box is selected, the font of the value changes to Courier New. When the check box is deselected, the font of the value changes to Myriad Pro.
if (CheckBox8.rawValue == true)
TextField.font.typeface = "Courier New";
else
TextField.font.typeface = "Myriad Pro";
When the check box is selected, the font size changes to 14 pt. When the check box is deselected, the font size changes to 10 pt.
if (CheckBox9.rawValue == true)
TextField.font.size = "14pt";
else
TextField.font.size = "10pt";
When the check box is selected, the text field value is aligned to the top. When the check box is deselected, the text field value is aligned to the middle.
if (CheckBox10.rawValue == true)
TextField.para.vAlign = "top";
else
TextField.para.vAlign = "middle";
When the check box is selected, the text field value is aligned to the center. When the check box is deselected, the text field value is aligned to the left.
if (CheckBox11.rawValue == true)
TextField.para.hAlign = "center";
else
TextField.para.hAlign = "left";
When the check box is selected, the value that is defined by using a script appears in the text field. When the check box is deselected, the default value (which is also defined by using a script) appears in the text field.
if (CheckBox12.rawValue == true)
TextField.rawValue = "This is a value set using a script.";
else
TextField.rawValue = "This is a default value.";
When the check box is selected, the alternate caption text that is defined by using a script appears as the caption. When the check box is deselected, the default caption (which is also defined by using a script) appears in the text field.
if (CheckBox13.rawValue == true)
xfa.resolveNode("TextField.caption.value.#text").value = "Alternate Caption:";
else
xfa.resolveNode("TextField.caption.value.#text").value = "Caption:";
When the check box is selected, the field border changes to a solid box. When the check box is deselected, the field border changes to 3D.
if (CheckBox14.rawValue == true)
xfa.resolveNode("TextField.ui.#textEdit.border.edge").stroke = "solid";
else
xfa.resolveNode("TextField.ui.#textEdit.border.edge").stroke = "lowered";
Use the resetData method to reset all of the check boxes to their default value (Off).
xfa.host.resetData();
Use the remerge method to remerge the form design and form data. In this case, the method effectively returns the text field to its original state.
xfa.form.remerge();
No comments:
Post a Comment