VDL Loops
You can set up VDL Action Groups to perform all the actions in a group for a specific number of repetitions. For the latest versions of these examples, visit
the FICO VDL Online Reference.
Loop through all the Actions in a group a specified number of times
In this example, the vdl repeat command is used to create the loop.
- The first Action returns the value 2.
- The second Action multiples the value by itself; The embedded vdl-repeat command executes the calculation 3 times, so the initial value is squared 3 times.
-
The third action displays the final result in an on-screen element named logPanel.
View Designer
Code editor
<script>
function addToLog(vm, evt, value) {
var logPanel = document.getElementById('log-panel');
var logItem = document.createElement('div');
logItem.classList.add('log-item');
var date = (new Date()).getTime();
var text = document.createTextNode(date + ': ' + value);
logItem.appendChild(text);
logPanel.appendChild(logItem);
logPanel.scrollTo(0, 100000);
}
</script>
<vdl-page>
<vdl-header>
<vdl-action-group name="demo2">
<vdl-action command="=2"></vdl-action>
<vdl-action command="=value * value" vdl-repeat="=num in [1,2,3]"></vdl-action>
<vdl-action command="addToLog"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section>
<vdl-row>
<vdl-column size="12">
<div id="log-panel"></div>
<vdl-button label="Trigger log" vdl-event="click: actions.demo2"></vdl-button>
</vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
This example view uses a VDL Action to call the following JavaScript function that adds an item prefixed with a timestamp to the Log Panel.
<script>
function addToLog(vm, evt, value) {
var logPanel = document.getElementById('log-panel');
var logItem = document.createElement('div');
logItem.classList.add('log-item');
var date = (new Date()).getTime();
var text = document.createTextNode(date + ': ' + value);
logItem.appendChild(text);
logPanel.appendChild(logItem);
logPanel.scrollTo(0,100000);
}
</script>
Code editor
<vdl-action-group name="demo1">
<vdl-action command="=99"></vdl-action>
<vdl-action command="addToLog"></vdl-action>
</vdl-action-group>