SpreadJS 14
SpreadJS Designer Components / Customizations / Add New Dialog
In This Topic
    Add New Dialog
    In This Topic

    Follow the below steps to add 'Signature Dialog' dialog when selecting 'Insert Signature' option in context menu component.

    1. Open and edit the config.js file to add the "Insert Signature" option in "contextMenu" tag.
      JavaScript
      Copy Code
      var config = {
          // other items contents
          "contextMenu":[
                  
                 "designer.insertSignature",
                  // other context menu items
      
                  ],
          ...
          }
      

    2. Set the command to commandMap in your project.
      JavaScript
      Copy Code
      config.commandMap = {
                      "designer.insertSignature": {
                          text: "Insert Signature",
                          commandName: "designer.insertSignature",
                          visibleContext: "ClickRowHeader",
                          execute:
                          // execute_InsertSignature, following just a simple demo code snippet
                          () =>{
                              console.log("Insert Signature");
                          }
                      }
                  }
      

    3. Initialize the designer instance by passing "config" parameter for customizable configuration.
      JavaScript
      Copy Code
      // Initialize the designer instance
      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);
      

    4. Open and edit the config.js file to add new dialog "Signature" Dialog on click of "Insert Signature" item from context menu
      JavaScript
      Copy Code
      // Initialize a dialog template instance on click of "Insert Signature" item from context menu
      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"
                                  }
                              ]
                          }
                      ]
                  }
      

       The below output will be generated: