다음을 통해 공유

확장에서 모달 대화 상자 만들기

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

모달 대화 상자는 Azure DevOps 확장에서 포커스가 있는 사용자 환경을 만드는 강력한 방법을 제공합니다. 대화 상자 서비스를 사용하면 대화가 해제될 때까지 전체 Azure DevOps 인터페이스와의 사용자 상호 작용을 차단하는 모달 대화 상자를 표시할 수 있습니다. 이 작업을 수행하면 사용자가 중요한 작업을 완료하거나 필요한 정보를 제공할 수 있습니다.

확장에서 모달 대화 상자를 사용하여 다음을 수행합니다.

  • 양식을 통해 사용자 입력 수집
  • 중요한 작업에 대한 확인 메시지 표시
  • 사용자의 주의가 필요한 자세한 정보 표시
  • 다단계 프로세스를 통해 사용자 안내

중요합니다

모달 대화 상자를 만들 때 확장뿐만 아니라 전체 Azure DevOps 페이지와의 상호 작용을 차단합니다. 이 방법은 진정한 모달 환경을 제공하지만 사용자 워크플로가 중단되는 것을 방지하기 위해 신중하게 사용해야 합니다.

필수 조건

카테고리 요구 사항 세부 정보
확장 설정 작업 확장 프로젝트 유효한 vss-extension.json 매니페스트 파일
Marketplace 등록 테스트 및 배포를 위해 Visual Studio Marketplace에 등록된 확장
개발 지식 Azure DevOps 확장 개발 기본 사항 이해
개발 환경 Node.js 및 npm npm이 설치된 Node.js 버전 14 이상
코드 편집기 Visual Studio Code 또는 기타 IDE 권장
Azure DevOps 액세스 테스트를 위해 Azure DevOps 조직에 액세스
필수 패키지 확장 SDK 설치: npm install azure-devops-extension-sdk
확장 API 설치: npm install azure-devops-extension-api
확장 권한 매니페스트 범위 vss-extension.json에 적절한 범위를 포함하십시오. 예를 들어 "vso.work", "vso.project".
SDK 가져오기 필수 모듈 SDK 및 서비스 가져오기: import * as SDK from "azure-devops-extension-sdk"

대화 상자 내용

시작하려면 확장 매니페스트에서 형식 ms.vss-web.control 의 기여를 선언합니다. 이 기여는 대화 상자에 표시되는 콘텐츠를 나타냅니다.

    {
        "id": "registration-form",
        "type": "ms.vss-web.control",
        "description": "The content to be displayed in the dialog",
        "targets": [],
        "properties": {
            "uri": "registration-form.html"
        }
    }

이 속성은 uri 대화 상자의 콘텐츠 영역 내에서 렌더링되는 페이지를 참조합니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="node_modules/azure-devops-extension-sdk/lib/SDK.js"></script>
    </head>
    <body>
        <h2 id="header">Register now</h2>
        <p>
            <label>Name:</label>
            <input id="inpName" />
        </p>
        <p>
            <label>Date of birth:</label>
            <input id="inpDob" />
        </p>
        <p>
            <label>Email address:</label>
            <input id="inpEmail" />
        </p>
        <script type="module">
            import * as SDK from "azure-devops-extension-sdk";
            
            SDK.init();
            const registrationForm = (function() {
                const callbacks = [];
                
                function inputChanged() {
                    // Execute registered callbacks
                    for(let i = 0; i < callbacks.length; i++) {
                        callbacks[i](isValid());
                    }
                }
                
                function isValid() {
                    // Check whether form is valid or not
                    return !!(name.value) && !!(dateOfBirth.value) && !!(email.value);
                }
                
                function getFormData() {
                    // Get form values
                    return {
                        name: name.value,
                        dateOfBirth: dateOfBirth.value,
                        email: email.value  
                    };
                }

                const name = document.getElementById("inpName");
                const dateOfBirth = document.getElementById("inpDob");
                const email = document.getElementById("inpEmail");
                
                name.addEventListener("change", inputChanged);
                dateOfBirth.addEventListener("change", inputChanged);
                email.addEventListener("change", inputChanged);
                
                return {
                    isFormValid: function() {
                        return isValid();   
                    },
                    getFormData: function() {
                        return getFormData();
                    },
                    attachFormChanged: function(cb) {
                         callbacks.push(cb);
                    }
                };
            })();
            
            // Register form object to be used across this extension
            SDK.register("registration-form", registrationForm);
        </script>
    </body>
</html>

대화 상자 표시

대화 상자를 표시하려면(예: 사용자가 도구 모음 또는 메뉴에서 작업을 선택하는 경우) 대화 상자 서비스의 인스턴스에서 함수를 호출 openDialog 합니다.

import * as SDK from "azure-devops-extension-sdk";

SDK.getService(SDK.CommonServiceIds.Dialog).then((dialogService) => {
    const extensionCtx = SDK.getExtensionContext();
    // Build absolute contribution ID for dialogContent
    const contributionId = `${extensionCtx.publisherId}.${extensionCtx.extensionId}.registration-form`;

    // Show dialog
    const dialogOptions = {
        title: "My Dialog",
        width: 800,
        height: 600
    };

    dialogService.openDialog(contributionId, dialogOptions);
});

고급 대화 상자 기능

확인 단추를 선택하면 함수를 호출할 수 있습니다. 옵션에서 getDialogResult을(를) 설정하여 대화 상자를 표시할 때 이 함수를 지정합니다.

null이 아닌 값을 반환하는 getDialogResult 호출이 있으면 이 값은 옵션에서 지정한 함수로 okCallback 전달되고 대화 상자가 닫힙니다.

이 예제에서는 폼의 입력이 attachFormChanged 변경되면 콜백이 호출됩니다. 양식이 유효한지 여부에 따라 확인 단추를 사용하도록 설정하거나 사용하지 않도록 설정합니다.

import * as SDK from "azure-devops-extension-sdk";

SDK.getService(SDK.CommonServiceIds.Dialog).then((dialogService) => {
    let registrationForm;
    const extensionCtx = SDK.getExtensionContext();
    const contributionId = `${extensionCtx.publisherId}.${extensionCtx.extensionId}.registration-form`;

    const dialogOptions = {
        title: "Registration Form",
        width: 800,
        height: 600,
        getDialogResult: () => {
            // Get the result from registrationForm object
            return registrationForm ? registrationForm.getFormData() : null;
        },
        okCallback: (result) => {
            // Log the result to the console
            console.log(JSON.stringify(result));
        }
    };

    dialogService.openDialog(contributionId, dialogOptions).then((dialog) => {
        // Get registrationForm instance which is registered in registration-form.html
        dialog.getContributionInstance("registration-form").then((registrationFormInstance) => {
        
            // Keep a reference of registration form instance (to be used previously in dialog options)
            registrationForm = registrationFormInstance;
            
            // Subscribe to form input changes and update the Ok enabled state
            registrationForm.attachFormChanged((isValid) => {
                dialog.updateOkButton(isValid);
            });
            
            // Set the initial ok enabled state
            registrationForm.isFormValid().then((isValid) => {
                dialog.updateOkButton(isValid);
            });
        });                            
    });
});

확인 단추 제어

처음에는 확인 단추를 사용할 수 없습니다. 그러나 대화 상자에서 메서드를 호출 updateOkButton 하여 이 단추를 사용하거나 사용하지 않도록 설정할 수 있습니다.

    dialogService.openDialog(contributionId, dialogOptions).then((dialog) => {
        // Set true/false to enable/disable ok button
        dialog.updateOkButton(true); 
    });

대화 상자에 값 전달

호스트 대화 상자에서 열 때 초기 값을 대화 상자 콘텐츠에 전달할 수 있습니다.

    {
        "id": "registration-form",
        "type": "ms.vss-web.control",
        "description": "The content displayed in the dialog",
        "targets": [],
        "properties": {
            "uri": "registration-form.html?id={{myId}}"
        }
    }

대화 상자가 열리면 myId를 전달하기 위해 다음 옵션을 지정해야 합니다.

    const dialogOptions = {
        title: "My Dialog Title",
        width: 800,
        height: 600,
        urlReplacementObject: { myId: new Date().getTime() }
    };

대화 상자 단추 사용자 지정

okText 및 cancelText 특성을 사용하여 확인 및 취소 단추에 대한 대체 제목을 지정할 수 있습니다.

    const dialogOptions = {
        title: "My Dialog Title",
        width: 800,
        height: 600,
        okText: "Yes",
        cancelText: "No" 
    };

대화 상자에 단추를 표시하지 않으려면 buttons 특성을 []로 설정하세요.

    const dialogOptions = {
        title: "My Dialog Title",
        width: 800,
        height: 600,
        buttons: []
    };

질문이 있거나 자세한 정보를 찾고 있는 경우 다음 영역 중 하나로 가는 것이 좋습니다.

  • Last updated on