Using Editable List Controls

You can bind editable list controls to data parameters of the primitive array data type.

If you have data parameters of the primitive array data type, you can bind the editable list controls to them. You can create action scripts for adding items or for deleting items from the list control. You can also add scripts for validating the values provided in the list control.

Sample Project

To view the sample for this task, import the advanced sample projects as described in Importing the Forms Advanced Samples. The sample form and business object model for the task described in this section are contained in the forms.samples.controls project.

The form (ListControl.form) is at:

   forms.samples.controls/Forms/listControl/

You can double-click the form’s filename (as well as those of other project resources) in the Project Explorer to open it in the editor. There, you can examine it and use it as a model for your own projects.

Procedure

  1. Add new data parameters strArray, intArray, and decArray of the respective types Text, Integer, and Decimal. All of these should be of array type.
  2. Add three Text controls with labels Text List, Integer List, and Decimal List in to the form. Set the names of these controls to textList, integerList, and decimalList.

    For each of these controls:

    Go to the Properties tab and select the Edit as List check box.

    Go to the General tab and add a new binding for the Value that points to the value of the respective data parameter array.

  3. In the form preview, you will see the three editable list controls.
  4. Add a new button Add Item to the form.

    Add a new rule for this button and associate following action script for the Select event of this button. This script adds the last item into the list.

          var list = control.textList.getValue();
      list.push("New Value");
      control.textList.setValue(list);
  5. Add a new button Delete Item to the form.

    Add a new rule for this button and associate the following action script for the Select event of this button. This script deletes the last item from the list.

          var list = control.textList.getValue();
      list.pop();
      control.textList.setValue(list);
  6. For the text control named Text List, add the following validation script for the On Value Change event. This validation is successful when the item added in the list control starts with Text. Otherwise, a problem marker appears near the list control. 
          var result = true;
      var arr = this.getValue();
      if (arr instanceof Array) {
         var length = arr.length;
         for (var i=0; (i<length) && result; i++) {
            if (arr[i].indexOf("Text")==-1) {
               result = false;
               break;
            }
         }
      }
      result;

    Also add an error message to be displayed in case the validation fails:

    Provide input that starts with Text.