Action Group
An Action Group is the container that holds one or more VDL Actions.
It is triggered by vdl-event using the name of the Action Group prefixed with the actions namespace.
Action Group containing one action
View Designer
Code editor
<script>
function demo1Fn() {
insight.getView().showInfoMessage('demo1Fn() called.');
}
</script>
<vdl-action-group name="demo1">
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
<button class="btn-primary" vdl-event="click:actions.demo1">Demo1</button>
Action Group containing two actions
In this example, the second actions is triggered after the first one returns.
View Designer
Code editor
<script>
function demo2_1Fn() {
return insight.getView().showInfoMessage('demo2_1Fn() called.');
}
function demo2_2Fn() {
return insight.getView().showInfoMessage('demo2_2Fn() called.');
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group draggable="true" name="demo2">
<vdl-action command="demo2_1Fn"></vdl-action>
<vdl-action command="demo2_2Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section heading="ActionGroup">
<vdl-row>
<vdl-column size="12">
<vdl-button vdl-event="click:actions.demo2" label="Demo"></vdl-button>
</vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
|
Note If an error is thrown in the code that the VDL Action calls then no further Actions are triggered.
|
Calling Actions from a Separate Action Group
VDL Actions operate using an input value and return a result value. The result value can then be used as the input for a second VDL Action. The result of the first vdl action is passed to the next action as a third parameter val. In this example, the vdl actions in the action group are called in sequence; The return from the first action is used as an input in the second; The third vdl action returns the result.
View Designer
Code editor
<script>
function demo6_1Fn(val) {
return 99;
}
function demo6_2Fn(vm, evt, val) {
return val * 8;
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group draggable="true" name="demo6">
<vdl-action command="demo6_1Fn"></vdl-action>
<vdl-action command="demo6_2Fn"></vdl-action>
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section heading="ActionGroup">
<vdl-row>
<vdl-column size="12">
<vdl-button vdl-event="click:actions.demo6" label="Demo"></vdl-button>
</vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>