Initializing help system before first use

Working with Forms

Use the Form element (<vdl-form>) to create forms with editable fields.

You can display a default value in a Field element such as a model entity, a variable (stored in a vdl-var), or a value defined in an expression. This capability allows a default initial value to be added to a user–editable input on a form.
  • If a field is bound to a model entity, the value in that entity is updated when a user edits the field.
  • The change event triggered by updating an unbound field can be used to trigger a VDL Action or Action Group.

Add Field elements ( <vdl-field>) for each entity or parameter you want the user to be able to edit in the form. The data types of the entities determine the type of editable control rendered:
  • Boolean entities map to check boxes.
  • 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 these concepts.

View Designer
Code editor 
<vdl version="5.6">
    <vdl-page>
        <vdl-section>
            <vdl-row>
                <vdl-column>
                    <vdl-form vdl-repeat="=s in scenario.entities.ShareIds">
                        <vdl-field label="=s.label" 
                            options-set="ShareIds" 
                            entity="Shares_Return" 
                            indices="=s.value">
                        </vdl-field>
                    </vdl-form>
                </vdl-column>
            </vdl-row>
        </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.

In the previous code editor example, this is specified within the <vdl-form> element as a repeated assignment indices="=s.value".

In the View Designer
The label attribute has also been overridden in both examples.

A Rendered VDL Form
A Rendered VDL Form

You can create a drop-down list that can be limits the selectable options to a fixed set of values by specifying a set entity from which the options are sourced.

Code editor 
<vdl version="5.6">
    <vdl-page>
        <vdl-section>
            <vdl-row>
                <vdl-column>
                    <vdl-form>
                        <vdl-field entity="changeShare" options-set="ShareIds"></vdl-field>
                    </vdl-form>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>
View Designer

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 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 example, the Goal field is disabled if the IncludeTax entity is false.

Code editor 
<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.
Code editor 
<vdl version="5.6">
<vdl-page>
    <script>
      function generateGoalOptions() {
        return {
          1: 'Option 1', 
          2: 'Option 2'
          };
        l
      }
    </script>
    <vdl-section heading="WorkingWithForms_Goals">
      <vdl-row>
        <vdl-column size="12">
          <vdl-form>
            <vdl-field entity="IncludeTax"></vdl-field>
            <vdl-field entity="Goal"
                       enabled="=scenario.entities.IncludeTax.value"
                       options-set="Goals">
            </vdl-field>
          </vdl-form>
        </vdl-column>
      </vdl-row>
    </vdl-section>
  </vdl-page>
</vdl>
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 Components

© 2001-2024 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.