Initializing help system before first use

Generating Messages and Dialog Windows with VDL

VDL Actions offer a range of on-screen dynamic alerts including 'Toast' messages (temporary panels that display at the bottom of the page and expire automatically) and alert boxes (modal dialog boxes that require a user to click on an option.)

Info Message

This example creates a button that displays a preset informational (blue) Toast message at the foot of the page when clicked. The message expires automatically.

View Designer

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="showInfo">
                <vdl-action-message text="This is an info message!"></vdl-action-message>
            </vdl-action-group>
        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-button vdl-event="click:actions.showInfo" label="Trigger Info Message"></vdl-button>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

Dynamic Info Message

This example creates a field that allows the user to edit the informational Toast message which displays at the foot of the page. The message expires automatically.

View Designer

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="showDynamicInfo">
                <vdl-action-message text="='The value of this info message is ' + value"></vdl-action-message>
            </vdl-action-group>
        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-form>
                        <vdl-field type="input" vdl-event="change:actions.showDynamicInfo"></vdl-field>
                    </vdl-form>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

Error Message

This example creates a button that displays a preset error (red) Toast message at the foot of the page when clicked. The message expires automatically.

View Designer

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="showDynamicError">
                <vdl-action-message text="=value + ' caused this error message!' " level='error'></vdl-action-message>
            </vdl-action-group>
        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-button label="Trigger Error Message" vdl-event="click:actions.showDynamicError"></vdl-button>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

Dynamic Error Message

This example creates a field that allows the user to edit the error Toast message which displays at the foot of the page. The message expires automatically.

View Designer

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="showError">
                <vdl-action-message text="This is an error message!' " level="error"></vdl-action-message>
            </vdl-action-group>
        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-form>
                        <vdl-field type="input" vdl-event="change:actions.showError"> </vdl-field>
                    </vdl-form>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

Show Value Info Message

If no text attribute is set, then vdl-action-message will create a message using the passed through value.

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="showError">
                <vdl-action-message></vdl-action-message>
            </vdl-action-group>

        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-form>
                        <vdl-field type="input" vdl-event="change:actions.showError"> </vdl-field>
                    </vdl-form>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

Show Confirm Dialog

This example generates a confirmation dialog that uses the supplied message and the standard title, and the buttons OK and CANCEL. The subsequent Actions in the Action Group, after the vdl-action-confirm Action, will run if the user selects the positive confirmation.

View Designer

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="confirm">
                <vdl-action-confirm text = "Please Confirm"></vdl-action-confirm>
                <vdl-action-message text = "Action Group Completed"></vdl-action-message>
            </vdl-action-group>

        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-form>
                        <vdl-field type="input" vdl-event="change:actions.confirm"> </vdl-field>
                    </vdl-form>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

Confirm with Custom Attributes (Trigger Execution)

You can use the Confirm dialog to trigger execution modes.

View Designer

Code editor 
    <vdl-page>
        <vdl-header draggable="true">
            <vdl-action-group draggable="true" name="confirm_Custom">
                <vdl-action-confirm text="Would you like to execute the RUN mode on the model?" 
                    ok-label="RUN" 
                    cancel-label="IGNORE" 
                    title="Confirmation needed">
                </vdl-action-confirm>
                <vdl-action-execute></vdl-action-execute>
                <vdl-action-message text="Action Group Completed"></vdl-action-message>
            </vdl-action-group>
        </vdl-header>
        <vdl-section heading="VDL Messages">
            <vdl-row>
                <vdl-column size="12">
                    <vdl-button vdl-event="click:actions.confirm_Custom"></vdl-button>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
Parent Topic VDL Actions