Validating User Input and Adding Tooltips

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.

<vdl version="4.1">
  ...
  <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>

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