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.
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.
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.
<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
<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
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>