Initializing help system before first use

# Replacing the Default Overlay

The functionality covered so far in this chapter enables view developers to create their own custom execution overlay.

The example custom progress apps show the use of multiple <vdl-page> tags, one for the basic view and one for the custom overlay. By only showing one of the <vdl-page> tags at a time, it is possible to give the effect of an overlay, with a little judicious styling.

    <vdl-page class=”custom-overlay”
    vdl-if="=scenario.executionStatus.status !== 'NO_JOB_STATUS'">
    <!-- custom overlay view -->
    		<vdl-spinner></vdl-spinner>
    </vdl- page>
    <vdl-page
    vdl-if="=scenario.executionStatus.status === 'NO_JOB_STATUS'">
    		<!-- standard view -->
    </vdl- page>

Place the following CSS code into client_resources/css/application.css.

    #main {
    height: 100%;
    width: 100%;
    }

    vdl-page.custom-overlay {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: normal;
    }

    vdl-page.custom-overlay vdl-section {
    width: 100%;
    }

    vdl-page.custom-overlay .center-spinner {
    width: 100%;
    margin-top: 80px;
    }

    vdl-page.custom-overlay .center-text {
    width: 100%;
    text-align: center;
    padding: 0 24px 20px;
    }

This enables the overlay to show automatically when the scenario is executing or queued. And now, it is possible to use any of the VDL components to construct the custom overlay.

Parent Topic JS API and VDL Objects

© 2001-2026 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.