Dynamically updating XFDL options at runtime from within an XForms table does not invoke a table refresh

Answer

The alteration of an XFDL item does take effect in the back-end, but the presentation of the widget in the form does not update to reflect the change until the table is forced to redraw itself by adding or deleting a row (or any other method that invokes a table or page refresh, such as using the 'keypress' or 'focused' attribute to watch a change).

To ensure a localized refresh occurs within the table that reflects your dynamic update, watch the event that is invoking the change (toggle) in the option and then push/pull (set/get) the update accordingly, instead of pushing/pulling (set/get) your change to the XFDL option directly without using a toggle to watch for the change.

Note: The Webform Server by default does not register keypress or focus events. If you want to enable it to do so you can change the focusNotificationItems setting in the translator.properties. It is not recommended that you enable this setting as it will affect your systems overall performance.

This is best explained through the following example.



NOTE: This Technote requires an intermediate understanding of form design. It is not intended for novice users.

Prerequisites for Example:
- Have an understanding of XFDL keypress event.
- Understand the use of xforms.getPosInSet() function
- Understand the use of set() and get() with xforms model.
- Have a good understanding of Xforms data model and repeat structures (tables).

Example Details:
- Table fields are watching for the keypress event on the letter 'b'.

(Table A and B have the same field code)
<field sid="FIELD">
...
<custom:onkeypress xfdl:compute="toggle(keypress, '', 'b') == '1'
? ((get('instance(&quot;INSTANCE&quot;)/tablexforms/row[' +. xforms.getPosInSet() +. ']/@effect', 'option', 'xforms') == 'plain')
? set('instance(&quot;INSTANCE&quot;)/tablexforms/row[' +. xforms.getPosInSet() +. ']/@effect', 'bold', 'option', 'xforms')
: set('instance(&quot;INSTANCE&quot;)/tablexforms/row[' +. xforms.getPosInSet() +. ']/@effect', 'plain', 'option', 'xforms'))
: ''
"></custom:onkeypress>
</field>

- When 'b' is typed into a field, the corresponding label in the same row will go 'bold':
- When 'p' is typed into a field, the corresponding label in the same row will go 'plain':

The difference between Table A and Table B is in the label markup.

(Table A label code)
<label sid="LABEL">
...
<fontinfo>
<fontname>Arial</fontname>
<size>8</size>
<effect compute="get('instance(&quot;INSTANCE&quot;)/tablexforms/row[' +. xforms.getPosInSet() +. ']/@effect', 'option', 'xforms')"></effect>
</fontinfo>
</label>

(Table B label code)
<label sid="LABEL2">
...
<fontinfo>
<fontname>Arial</fontname>
<size>8</size>
<effect compute="toggle(FIELD1.keypress, '', 'b') == '1' ? get('instance(&quot;INSTANCE&quot;)/tablexforms2/row[' +. xforms.getPosInSet() +. ']/@effect', 'option', 'xforms') : get('instance(&quot;INSTANCE&quot;)/tablexforms2/row[' +. xforms.getPosInSet() +. ']/@effect', 'option', 'xforms')"></effect>
</fontinfo>
</label>

Table A depicts the deferred table refresh where the corresponding label text will change to either 'bold' or 'plain' once the focus has moved away from the field and only change the font effect to 'bold' or 'plain' once the table has been manually refreshed.

Table B on the other hand, properly reflects the toggling of the font effect and label value as the letter 'b' or 'p' is typed into the field.

NOTE: We have found that in Lotus Forms Viewer version 3.5.1, implementing the above technique has a side-effect of refreshing the whole table that it is bound to. This is a trade-off that one must be aware of and should be considered when moving forwards with this workaround.