Initializing help system before first use

Working with Conditional VDL Attributes

You can implement conditional logic by combining expressions with a conditional VDL attribute. This is generally used to control whether content is included in the page or not, whether it is hidden, or how it is styled.

Any valid VDL expression can be used with a conditional VDL attribute if it evaluates to a value that can be interpreted as true or false.

The vdl-if Conditional

This attribute determines whether an element and its child elements are present in the rendered view.

To add an If element in the View Designer:
  1. In the Palette > Logic group, click and drag an If element onto the artboard and drop it on to the element you wish to apply the condition to. The if wizard is displayed featuring two main options:
    • Enter an expression in the top dialog box.
    • Click one of the examples in the lower pane to insert sample code which you can then edit.
  2. Click FINISH to add the if condition.
Note: You can re-open the wizard by selecting the element on the artboard and clicking the Open Wizard label above the tag in the Attributes pane.

Code editor (using the first sample code example) 
<vdl-section vdl-if="=scenarios.length > 1">
	...
</vdl-section>
The following example illustrates vdl-if used on a VDL tag, and that more complex expressions than simple booleans can be used.
Code editor 
<div vdl-if="=scenario.entities.boolScalar.value">
  <h1>Optimal return</h1>
</div>
The <div> and <h1> elements will only be shown if the value of the boolScalar scalar is true.

Conditional vdl-if expressions are evaluated once all page data is loaded, and the conditional content is not included until the evaluation.

A side-effect of this is that adding a vdl-if condition with a value of true will hide content until the view data is ready, which can be useful in avoiding the partial rendering of a page.

Code editor 
<vdl-section heading="Working with IF Conditional" vdl-if="true">
    <vdl-row>
        <span vdl-text="Displayed when the data for this view is loaded."></span>
    </vdl-row>
</vdl-section>
View Designer
Conditional statement in the View Designer

The vdl-visible Conditional

This is like vdl-if except that the element it is placed upon, and its children, are not removed from the view. When supplied with an expression which evaluates to false, vdl-visible applies a style to the element that prevents it being displayed.

The affected elements are still in the view DOM and can be manipulated even while not visible. This is convenient if there are sections of the view that need to be kept up-to-date even when they are not visible.

The vdl-css Conditional

This attribute adds a CSS class to the element it is attached to if the expression in the attribute evaluates to truthy. It is different from vdl-if and vdl-visible in that it takes an object as a value—The key entry in the object is the name of the class to add, and each value is an expression that evaluates to true or false.

The example below uses vdl-css to add a CSS class called danger if the scalar entity boolValue is true in the first instance, and to add the error class when there are no scenarios selected.

Code editor 
<div vdl-css="={danger: scenario.entities.boolValue.value, error: scenarios.length===0}">
		...
</div>
Parent Topic Using Expressions

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