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

© 2001-2024 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.