Pass Input Values
Text Input
This example code generates a text input field, the value added to the field is shown in a message box.
View Designer
Code editor
<script>
function demo1Fn(vm, evt, val) {
insight.getView().showInfoMessage('Passed through: ' + val);
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group name="demo1" draggable="true">
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section>
<vdl-row>
<vdl-column><input type="text" vdl-event="change:actions.demo1"></vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
Checkbox
This example registers when the checkbox is edited and displays the result in a message.
View Designer
Code editor
<script>
function demo1Fn(vm, evt, val) {
insight.getView().showInfoMessage('Passed through: ' + val);
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group name="demo1" draggable="true">
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section>
<vdl-row>
<vdl-column>
<label>
<input type="checkbox" vdl-event="change:actions.demo1"/>
Toggle
</label>
</vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
Color Selector
This example displays the color picker dialog and updates the field with the selected color. The hex code of the selected color is displayed in a message box.
View Designer
Code editor
<script>
function demo1Fn(vm, evt, val) {
insight.getView().showInfoMessage('Passed through: ' + val);
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group name="demo1" draggable="true">
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section>
<vdl-row>
<vdl-column><input type="color" vdl-event="change:actions.demo1"/></vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
Date Selector
This example displays the date picker dialog and updates the field with the selected value; It also displays the selected value in a message box.
View Designer
Code editor
<script>
function demo1Fn(vm, evt, val) {
insight.getView().showInfoMessage('Passed through: ' + val);
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group name="demo1" draggable="true">
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section>
<vdl-row>
<vdl-column><input type="date" vdl-event="change:actions.demo1"/></vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
Slider Input
This example displays a slider dialog and sends the selected value to a message box.
View Designer
Code editor
<script>
function demo1Fn(vm, evt, val) {
insight.getView().showInfoMessage('Passed through: ' + val);
}
</script>
<vdl-page>
<vdl-header draggable="true">
<vdl-action-group name="demo1" draggable="true">
<vdl-action command="demo1Fn"></vdl-action>
</vdl-action-group>
</vdl-header>
<vdl-section>
<vdl-row>
<vdl-column><input type="range" min="10" max="100" step="10" value="50" vdl-event="change:actions.demo1"/></vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>