Use the modal dialog control

This page shows different samples about the modal dialog control.

Go to API Reference for more details.

Tip

Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

When using this modal dialog, dialog overlay covers 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 dialog 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");
		});
	});