새 대화상자 추가

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

대화상자 열기

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

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

   // 워크북과 워크시트를 구성하세요.
   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에 설정하세요.

   // 구성의 컨텍스트 메뉴에 항목을 추가하세요.
   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 매개변수를 전달하여 디자이너 인스턴스를 초기화하세요.

   // 디자이너 인스턴스를 초기화하세요.
   var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

4. 프로젝트에 insertSignature 대화상자 템플릿을 생성하고 등록하세요. 컨텍스트 메뉴의 "Insert Signature" 옵션은 "Signature" 대화상자를 엽니다.

   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);

아래와 같은 결과가 생성됩니다:

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

Designer.closeDialog 메서드를 사용하여 프로그램으로 대화상자를 닫을 수 있습니다. 이 메서드는 등록된 템플릿 이름과 대화상자 닫기 후 값을 제출할지 여부를 매개변수로 받습니다.

위 단계를 완료한 후, "Signature Dialog"를 열고 자동으로 닫기 위해 다음과 같이 수정할 수 있습니다.

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

  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단계 코드를 수정하여 대화상자 템플릿에 새 텍스트 블록을 추가하세요.

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

아래와 같은 결과가 생성됩니다:

대화상자 위치 제어

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

• designerCenter는 시각 영역의 중심에 최대한 가깝게 디자이너 위치를 조정하는 기본 옵션입니다. 다만, 첫 번째 대화상자에서 열리는 두 번째 대화상자는 첫 번째 대화상자의 중앙에 표시됩니다.

  
  

• screenCenter 옵션은 페이지를 스크롤하지 않고 현재 보이는 영역의 중앙에 대화상자를 바로 위치시킵니다. 이때 브라우저 창 크기는 현재 열려 있는 대화상자 크기보다 커야 합니다.

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

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

아래와 같은 결과가 생성됩니다: