Validating User Input and Adding Tooltips

The app is progressing, but there is currently no validation on the input field in the Return per share section.

Even without any VDL modifications, as a user types into or selects a new value from a form field it is automatically validated. By default, type validation is applied according to the data type of the base entity. When a field becomes invalid, it is highlighted until it becomes valid again.

You can use the <vdl-validate> element to apply extra validation to fields—you must provide it with a pass attribute that is either a function or a boolean expression which is evaluated every time a value is edited. For the example project, a boolean validator will ensure that the input field (i.e. the estimated ROI per share type expressed as a percentage) is greater than or equal to zero.

Add a <vdl-validate> element within the input field, so that the relevant part of foliodata.vdl now looks like:

<vdl version="4.7">
  ...
  <vdl-form>
    <vdl-field entity="changeShare"
               options-set="SHARES"
               label="Choose share"></vdl-field>
    <vdl-field entity="RET"
               indices="=scenario.entities.changeShare.value"
               label="Estimated ROI">
      <vdl-validate pass="=value >= 0">ROI must be zero or greater.
      </vdl-validate>
    </vdl-field>
  </vdl-form>
  ...
</vdl>

The boolean expression =value >= 0 is evaluated on the field's validation events, and you can provide text content for the <vdl-validate> element that forms part of a pop-up error dialogue when an invalid value is entered.

If you republish the app and enter an invalid value:

Validating User Input

This is accompanied by a Validation Error dialog that contains the text provided as content for the <vdl-validate> element:

Validation Error Dialog

There are several other validation options available, depending on your needs and their level of complexity. All are described in the main Xpress Insight documentation.

Adding Tooltips

It's easy to add informatory tooltips to elements in a VDL view. Place them inside elements and they are shown when a user hovers over that element. They can contain an optional title and body content, both of which can be static or dynamic expressions that resolve to text.

You can add a tooltip to the input field of the example app by changing foliodata.vdl so that the relevant part now reads:

<vdl version="4.7">
  ...
  <vdl-form>
    <vdl-field entity="changeShare"
               options-set="SHARES"
               label="Choose share"></vdl-field>
    <vdl-field entity="RET"
               indices="=scenario.entities.changeShare.value"
               label="Estimated ROI">
      <vdl-tooltip title="Estimated ROI" 
                   content="Specify the expected percentage return on investment">
      </vdl-tooltip>
      <vdl-validate pass="=value >= 0">ROI must be greater than zero.
      </vdl-validate>
    </vdl-field>
  </vdl-form>
  ...
</vdl>

Here, the tooltip title has been set to Estimated ROI and its content to Specify the expected percentage return on investment. Republishing the app and hovering the cursor over the input field yields:

Adding Tooltip Help

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