Windows Azure Pack 관리 포털 확장에 마법사를 표시하는 방법
적용 대상: Windows Azure Pack
포털의 마법사는 사용자가 대화 상자 간에 앞뒤로 이동할 수 있는 다중 대화 모달 창입니다. 기능에는 현재 단계에서 옵션을 선택하는 사용자에 대한 응답으로 단계를 동적으로 추가 또는 제거하고 현재 단계에 대한 입력 유효성 검사가 실패할 경우 사용자가 다음 단계로 이동하지 못하도록 하는 기능이 포함됩니다.
마법사를 표시하려면
마법사의 각 단계에 대한 템플릿을 만듭니다. 자세한 내용은 Windows Azure Pack 관리 포털 Client-Side 확장 템플릿을 참조하세요.
cdm.stepWizard를 호출합니다. 다음 예제에서는 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" });