Add New Dialog

You can add a new dialog in the Designer Component and map commands to open and close the dialog.

Open Dialog

Follow the below steps to add and open a 'Signature Dialog' dialog after selecting the 'Insert Signature' option in the context menu component.

1. Access the default configuration.

   // Configure Workbook and Worksheet
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   var activeSheet = spread.getActiveSheet();
   
   // Access the default config
   var config = GC.Spread.Sheets.Designer.DefaultConfig;

2. Add the "Insert Signature" option in the contextMenu tag and set it into commandMap in your project.

   // Add context menu item in config context menu
   if (config && config.contextMenu) {
       config.contextMenu.unshift("insertSignatureMenu");
   }
   
   // Create command for the new context menu item
   config.commandMap = {
       "insertSignatureMenu": {
           text: "Insert Signature",
           commandName: "insertSignatureMenu",
           visibleContext: "ClickRowHeader",
   
           // execute InsertSignature, following just a simple demo code snippet
           execute: () => {
               // Add the dialog template name registered in step 4 here.
               GC.Spread.Sheets.Designer.showDialog("signature");
           }   
       }
   }

3. Initialize the designer instance by passing the config parameter for customizable configuration.

   // Initialize the designer instance
   var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

4. Create and register the insertSignature dialog template in your project. The "Insert Signature" option in the context menu opens the "Signature" Dialog.

   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"
                   }
               ]
           },
       ]
   }
   
   // Register dialog template instance using registerTemplate
   GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);

The below output will be generated:

Close Dialog Programmatically

You can close a dialog programmatically by using the Designer.closeDialog method. This method accepts the registered template name and whether to submit the dialog values after closing the dialog.

After the above steps, to open the "Signature Dialog", the following modifications can be made to automatically close the "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, following just a simple demo code snippet
          execute: () => {
  
              // { Existing code }
  
              // Adding execution code for closing dialog
              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); // if time is out, close the dialog.
                  }
              }, 1000);
          }   
      }
  }

• Modify the code in Step 4 to add a new text block in the dialog template.

  let insertSignature = {
      templateName: "insertSignature",
      title: "Signature Dialog",
      content: 
      [
          // { Existing code }
  
          // Adding a new text block in dialog template
          {
              type: "TextBlock",
              text: "You must input valid value within 5 seconds!",
              className: "show-tips"
          },
      ]
  }

The below output will be generated:

Control Dialog Position

You can adjust the dialog’s open area position by setting the dialogOpeningPosition parameter to screenCenter or designerCenter in the setData method.

• designerCenter is the default option that adjusts the designer as close as possible to the center of the visual area. However, the second dialog that opens from the first dialog will appear in the center of the first dialog.

  
  

• screenCenter option adjusts the dialog directly in the current visible area without scrolling the page. Here the size of the browser window must be larger than the size of the currently opened dialog.

Note: When the designer's size does not support opening all the dialogs, then the dialogs adjust their position. However, if it has enough space, the dialog will open below the ribbon, covering only the worksheet portion.

Set the designer’s dialog position using the dialogOpeningPosition parameter of setData method as shown below.

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

The below output will be generated: