How to Display a Wizard in a Windows Azure Pack Management Portal Extension
Applies To: Windows Azure Pack
Wizards in the portal are multi-dialog modal windows where the user can navigate forward and back between dialogs. Features include dynamically adding or removing steps in response to the user choosing options in the current step and preventing users from moving to the next step if validation of their input for the current step fails.
To Display a Wizard
Create a template for each step in the wizard. For more information, see Windows Azure Pack Management Portal Client-Side Extension Templates.
Call cdm.stepWizard. The following example demonstrates the most common parameters and callbacks for cdm.stepWizard.
cdm.stepWizard({ extension: "DomainTenantExtension", steps: [{ template: "createStep1", data: data, // Called when the step is first created onStepCreated: function () { wizard = this; }, // Called each time the step is displayed onStepActivate: step1Activate, // Called before the wizard moves to the next step onNextStep: function () { return Shell.UI.Validation.validateContainer("#dm-create-step1"); } }], // Called when the user clicks the "Finish" button on the last step onComplete: function () { var newPassword, newResellerPortalUrl; newPassword = $("#dm-password").val(); newResellerPortalUrl = registerReseller ? $("#dm-portalUrl").val() : null; // Call whatever backend function we need to. In our example, it returns a promise promise = callback(newPassword, newResellerPortalUrl); // Create a new Progress Operation object var progressOperation = new Shell.UI.ProgressOperation( // Title of operation "Registering endpoint...", // Initial status. null = default null, // Is indeterministic? (Does it NOT provide a % complete) true); // This adds the progress operation we set up earlier to the visible list of PrOp's Shell.UI.ProgressOperations.add(progressOperation); promise .done(function() { // When the operation succeeds, complete the progress operation progressOperation.complete( "Successfully registered the endpoint.", Shell.UI.InteractionSeverity.information); }) .fail(function() { // When the operation fails, complete the progress operation progressOperation.complete( "Failed to register the endpoint.", Shell.UI.InteractionSeverity.error, Shell.UI.InteractionBehavior.ok); }); } }, { // Other supported sized include large, medium & small size: "mediumplus" });
See Also
Performing Common Tasks in a Windows Azure Pack Management Portal Extension