Initializing help system before first use

Variable Editing with VDL Actions

Variables can be incremented using a button.

Set a Value Using a Dynamic Expression Increment a Value

This example shows a VDL Action that increments a counter value, held in a vdl-var, by 1 each time a button is clicked—The button calls the increment.counter VDL Action group.

View Designer

Code editor 
    <vdl-page>
        <vdl-section heading="Execute Button">
            <vdl-row>
                <vdl-column>
                    <vdl-var name="counter" value="=1"></vdl-var>
                    <vdl-action-group name="incrementCounter">
                        <vdl-action-set-var var="counter" value="=vars.counter + 1"></vdl-action-set-var>
                    </vdl-action-group>
                    <button vdl-event="click:actions.incrementCounter">Increment Counter</button>
                    <span vdl-text="=vars.counter"></span>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

The action attached to this button changes the text value attached to the ButtonValue var, which is used as the label for the Button. 

    <vdl-page>
        <vdl-section heading="Increment">
            <vdl-row>
                <vdl-column>
                    <vdl-var name="ButtonValue" value="Initial"></vdl-var>
                    <vdl-action-group name="updateButtonValue">
                        <vdl-action-set-var var="ButtonValue" value="=value"></vdl-action-set-var>
                    </vdl-action-group>
                    <button vdl-event="click:actions.updateButtonValue" value="Updated">Update</button>
                    <button vdl-event="click:actions.updateButtonValue" value="Initial">Reset</button>
                    <span vdl-text="=vars.ButtonValue"></span>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
Parent Topic VDL Actions