Use the wait control
This page shows different samples about the wait control.
Go to API Reference for more details.
Tip
Check out our newest documentation on extension development using the Azure DevOps Extension SDK.
Start and end
This sample shows basic start and end operations for the wait control.
import Controls = require("VSS/Controls");
import StatusIndicator = require("VSS/Controls/StatusIndicator");
var container = $(".sample-container");
var waitControlOptions: StatusIndicator.IWaitControlOptions = {
target: $("#target"),
cancellable: true
};
var waitControl = Controls.create(StatusIndicator.WaitControl, container, waitControlOptions);
// Start operation when the start button is clicked
$("#start").click(function() { waitControl.startWait(); });
// End operation when the end button is clicked
$("#end").click(function() { waitControl.endWait(); });
Long running operation
This sample shows a cancellable long running operation which simulates 10 steps. This operation can be cancelled at any time using cancel link or ESC key.
import Controls = require("VSS/Controls");
import StatusIndicator = require("VSS/Controls/StatusIndicator");
var container = $(".sample-container");
var waitControlOptions: StatusIndicator.IWaitControlOptions = {
target: $("#target"),
cancellable: true,
cancelTextFormat: "{0} to cancel",
cancelCallback: function() {
console.log("cancelled");
}
};
var opCount: number;
var currentOp: number;
function nextOp() {
currentOp += 1;
// Check the operation is cancelled
if (!waitControl.isCancelled()) {
if (currentOp <= opCount) {
var message = `Processing ${currentOp} of ${opCount}`;
waitControl.setMessage(message);
window.setTimeout(nextOp, Math.ceil(Math.random() * 5000));
} else {
waitControl.endWait();
}
}
}
// Operation starts when long-op button is clicked
$("#long-op").click(function() {
opCount = 10;
currentOp = 0;
waitControl.startWait();
nextOp();
});