# 새 대화상자 추가

## Content

디자이너 컴포넌트에 새 대화상자를 추가하고, 대화상자를 열고 닫는 명령을 매핑할 수 있습니다.

## 대화상자 열기

컨텍스트 메뉴 구성 요소에서 'Insert Signature' 옵션을 선택한 후 'Signature Dialog'를 추가하고 여는 다음 단계를 따르세요.

1. 기본 구성에 접근하세요.

    ```javascript
    // 워크북과 워크시트를 구성하세요.
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // 기본 구성에 접근하세요.
    var config = GC.Spread.Sheets.Designer.DefaultConfig;
    ```
2. contextMenu 태그에 "Insert Signature" 옵션을 추가하고 프로젝트의 commandMap에 설정하세요.

    ```javascript
    // 구성의 컨텍스트 메뉴에 항목을 추가하세요.
    if (config && config.contextMenu) {
        config.contextMenu.unshift("insertSignatureMenu");
    }
    
    // 새 컨텍스트 메뉴 항목에 대한 명령을 생성하세요.
    config.commandMap = {
        "insertSignatureMenu": {
            text: "Insert Signature",
            commandName: "insertSignatureMenu",
            visibleContext: "ClickRowHeader",
    
            // InsertSignature를 실행하세요. 다음은 간단한 데모 코드 예제입니다.
            execute: () => {
                // Add the dialog template name registered in step 4 here.
                GC.Spread.Sheets.Designer.showDialog("signature");
            }   
        }
    }
    ```
3. 사용자 정의 구성을 위해 config 매개변수를 전달하여 디자이너 인스턴스를 초기화하세요.

    ```JavaScript
    // 디자이너 인스턴스를 초기화하세요.
    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);
    ```
4. 프로젝트에 insertSignature 대화상자 템플릿을 생성하고 등록하세요. 컨텍스트 메뉴의 "Insert Signature" 옵션은 "Signature" 대화상자를 엽니다.

    ```JavaScript
    let insertSignature = {
        templateName: "insertSignature",
        title: "Signature Dialog",
        content: 
        [
            {
                type: "FlexContainer",
                children: [
                    {
                        type: "TextBlock",
                        margin: "5px -4px",
                        text: "Insert Range"
                    },
                    {
                        type: "RangeSelect",
                        title: "Select Range",
                        absoluteReference: true,
                        needSheetName: false,
                        margin: "5px -5px"
                    }
                ]
            },
        ]
    }
    
    // registerTemplate을 사용하여 대화상자 템플릿 인스턴스를 등록하세요.
    GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);
    ```

아래와 같은 결과가 생성됩니다:
![image.88c645.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.88c645.18d211.png?width=1000)

## 프로그램으로 대화상자를 닫기

Designer.closeDialog 메서드를 사용하여 프로그램으로 대화상자를 닫을 수 있습니다. 이 메서드는 등록된 템플릿 이름과 대화상자 닫기 후 값을 제출할지 여부를 매개변수로 받습니다.
위 단계를 완료한 후, "Signature Dialog"를 열고 자동으로 닫기 위해 다음과 같이 수정할 수 있습니다.

* Modify the code in Step 2 to add the `closeDialog` method in the existing `commandMap`.

    ```JavaScript
    config.commandMap = {
        "insertSignatureMenu": {
            text: "Insert Signature",
            commandName: "insertSignatureMenu",
            visibleContext: "ClickRowHeader",            
            // execute_InsertSignature를 실행하세요. 다음은 간단한 데모 코드 예제입니다.
            execute: () => {
    
                // { 기존 코드 }
    
                // 대화상자를 닫는 실행 코드를 추가하세요.
                var showTips = document.querySelector(".show-tips");
                var i = 4;
    
                var showTipsInterval = setInterval(() => {
                    showTips.innerText = "You must input valid value within " + i + " seconds!";
                    i--;
                    if (i === -1) {
                        clearInterval(showTipsInterval);
                        GC.Spread.Sheets.Designer.closeDialog("signature", false); // 시간이 초과되면 대화상자를 닫으세요.
                    }
                }, 1000);
            }   
        }
    }
    ```
* 4단계 코드를 수정하여 대화상자 템플릿에 새 텍스트 블록을 추가하세요.

    ```JavaScript
    let insertSignature = {
        templateName: "insertSignature",
        title: "Signature Dialog",
        content: 
        [
            // { 기존 코드 }
    
            // 대화상자 템플릿에 새 텍스트 블록을 추가하세요.
            {
                type: "TextBlock",
                text: "You must input valid value within 5 seconds!",
                className: "show-tips"
            },
        ]
    }
    ```

아래와 같은 결과가 생성됩니다:
![theme4.87e051.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/theme4.87e051.ca48f9.gif?width=1000)

## 대화상자 위치 제어

setData 메서드에서 dialogOpeningPosition 매개변수를 screenCenter 또는 designerCenter로 설정하여 대화상자의 열리는 위치를 조정할 수 있습니다.

* **designerCenter**는 시각 영역의 중심에 최대한 가깝게 디자이너 위치를 조정하는 기본 옵션입니다. 다만, 첫 번째 대화상자에서 열리는 두 번째 대화상자는 첫 번째 대화상자의 중앙에 표시됩니다.
<br>
* **screenCenter** 옵션은 페이지를 스크롤하지 않고 현재 보이는 영역의 중앙에 대화상자를 바로 위치시킵니다. 이때 브라우저 창 크기는 현재 열려 있는 대화상자 크기보다 커야 합니다.

> **참고**: 디자이너 컴포넌트 크기가 모든 대화상자를 열기에 부족할 경우, 대화상자들이 위치를 조정합니다. 하지만 충분한 공간이 있다면 대화상자는 리본 아래에 열리며, 워크시트 부분만 덮습니다.

아래와 같이 `setData` 메서드의 `dialogOpeningPosition` 매개변수를 사용하여 디자이너의 대화상자 위치를 설정하세요.

```javascript
designer.setData("dialogOpeningPosition", "screenCenter");
```

아래와 같은 결과가 생성됩니다:
![theme5.15fd1d.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/theme5.15fd1d.634d5e.gif?width=1200)