Initializing help system before first use

Working with VDL Forms

Use the <vdl-form> element to create forms with editable fields. Add <vdl-field> elements for each entity or parameter you want the user to be able to edit.

The data types of the entities determine the type of editable control rendered - by default, boolean entities map to checkboxes, everything else maps to text fields. Labels are automatically generated for fields based on an entity's alias (or the name, if there is no alias).

You can also generate form fields from elements in an array by looping over one or more of the index sets. The following example combines several of these concepts. 
<vdl version="4.1">
  <vdl-page>
  <br/>
    <vdl-section>
      <vdl-form vdl-repeat="=s in scenario.entities.SHARES">
        <vdl-field entity="RET"
                   indices="=s.value"
                   label="=s.label">
        </vdl-field>
      </vdl-form>
    </vdl-section>
  </vdl-page>
</vdl>
Note that for array entities, you must specify the indices for the array elements that will be edited by the fields. Above, this is specified within the <vdl-form> element as a repeated assignment indices="=s.value". The label attribute has also been overridden.

A Rendered VDL Form

A Rendered VDL Form

If a user can choose from a fixed set of values for an entity, you can create a drop-down list by specifying a set entity from which the options are sourced. 
<vdl version="4.1">
  <vdl-page>
   <br/>
    <vdl-section>
      <vdl-form>
        <vdl-field entity="changeShare"
                   options-set="SHARES">
        </vdl-field>
      </vdl-form>
    </vdl-section>
  </vdl-page>
</vdl>

Rendered VDL Drop-down List

Rendered VDL Drop-down List

Instead of a select input via a drop-down list, you can present a radio group instead by setting type="radio" and including either the options-set or the options attributes.

If the entity bound to a VDL field is a string or an array, you may wish an empty option to be included to clear the string or remove the array element. In this case, set the attribute options-include-empty="true".

Fields can also be made read only by toggling the enabled attribute. By default, this is set to true, allowing user input. You can toggle the enabled state using an expression. In the following, the Goal field is disabled if the IncludeTax entity is false. 
<vdl-form>
    <vdl-field entity="IncludeTax"></vdl-field>
    <vdl-field entity="Goal"
               enabled="=scenario.entities.IncludeTax.value"
               options-set="Goals"
    </vdl-field>
</vdl-form>
Finally, it is also possible to specify control options as a plain JavaScript array or object. These options could be generated by a function. 
<script>
    function generateGoalOptions() {
        return {1: 'Option 1', 2: 'Option 2'};l
    }
</script>
<vdl-form>
    <vdl-field entity="Goal" options="=generateGoalOptions()">
    </vdl-field>
</vdl-form>
Covered Topics
  • Form Layout and Validation
    The default layout for forms is horizontal, meaning that each field is on a separate line, contains a label on the left and an input control on the right.
Parent Topic Exploring the Core VDL Components

© 2001-2019 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.