Use the modal dialog control

Last Update: 9/26/2016

This page shows different samples about the modal dialog control.

Go to API Reference for more details.

When using this modal dialog, dialog overlay will cover only the area dedicated to the extension due to iframe limitations. If you want the modal dialog cover whole window, see Using host dialog.

Simple modal dialog

Below sample use the simplistic modal dialog usage where no button is displayed and contextText is specified.

    import Dialogs = require("VSS/Controls/Dialogs");

    $("#show").click(()=> {
        Dialogs.show(Dialogs.ModalDialog, {
            title: "My Dialog",
            contentText: "This is the simplistic modal dialog.",
            buttons: null
        });
    });

Displaying a form in a modal dialog

Below sample shows displaying a form in a modal dialog and getting the result when it is valid.

    <button id="show">Add person</button>
    <ul class="person-list"></ul>
    <div class="dialog-content">
        <h2 id="header">Registration Form</h2>
        <p>
            <label>Name:</label>
            <input id="inpName"/>
        </p>
        <p>
            <label>DOB:</label>
            <input id="inpDob" />
        </p>
        <p>
            <label>Email:</label>
            <input id="inpEmail" />
        </p>
    </div>
    .dialog-content {
        display: none;
    }

    .dialog-content input {
        border: 1px solid #ddd;
        width: 100%;
        outline: none;
        padding: 2px;
    }
    import Dialogs = require("VSS/Controls/Dialogs");

    $("#show").click(() => {
        // Display the dialog
        var dialog = Dialogs.show(Dialogs.ModalDialog, <Dialogs.IModalDialogOptions>{
            width: 300,
            title: "Register",
            content: $(".dialog-content").clone(),
            okCallback: (result: any) => {
                $("<li />").text(result).appendTo(".person-list");
            }
        });

        var dialogElement = dialog.getElement();
        // Monitor input changes
        dialogElement.on("input", "input",(e: JQueryEventObject) => {
            // Set dialog result
            dialog.setDialogResult(getValue(dialogElement));
            // Update enabled status of ok button
            dialog.updateOkButton(!isEmpty(dialogElement));
        });
    });

    function isEmpty(parent: JQuery): boolean {
        return parent.find("input").filter((index: number, el: Element) => {
            return !$(el).val();
        }).length > 0;
    }

    function getValue(parent: JQuery): string {
        return parent.find("input").map((index: number, el: Element) => {
            return $(el).val();
        }).get().join(" - ");
    }

Confirmation dialog

Below sample displays how to use modal dialgo as a confirmation dialog.

    import Dialogs = require("VSS/Controls/Dialogs");

    var filename = "File1.txt";

    function showConfirmationDialog(yesCallback: () => void) {
        var dialog = Dialogs.show(Dialogs.ModalDialog, {
            title: "Delete Confirmation",
            content: $("<p/>").addClass("confirmation-text").html(`Are you sure you want to delete <b>${filename}</b>?`),
            buttons: {
                "Yes": () => {
                    yesCallback();
                    dialog.close();
                },
                "No": () => {
                    dialog.close();
                }
            }
        });
    };

    $("#delete").click(() => {
        showConfirmationDialog(()=> {
            // Do your delete job here
            $("<p />").text(`${filename} deleted`).appendTo(".log");
        });
    });