SpreadJS 14
SpreadJS Designer Components / Customizations / Add Button in a Tab
In This Topic
    Add Button in a Tab
    In This Topic

    Follow the below steps to add a 'Save Data' button in 'Home' tab of ribbon component.

    1. Open and edit the config.js file to add the "Save Data" button into "buttonGroups" field of "HOME" ribbon.
      JavaScript
      Copy Code
      var config = {
          "ribbon": [
              {
                "id": "home",
                "text": "HOME",
                "buttonGroups": [
                    // Custom "Save Data" button
                    {
                      "label": "Save Data",
                      "thumbnailClass": "",
                      "commandGroup": {
                          "children": [
                              {
                               "direction": "vertical",
                               "commands": [
                               "cmdSaveData"
                                ]
                              }
                            ]
                         }
                    },
      

    2. Set the above command to commandMap in your project. 
      JavaScript
      Copy Code
      config.commandMap = {
         cmdSaveData: {
            title: "Save data to server",
            text: "Save",
            iconClass: "cmdSaveData",
            bigButton: "true",
            commandName: "cmdSaveData",
            execute: async (context, propertyName, fontItalicChecked) => {
            // customize operator
               alert('Save data successfully.');
           }
         }
      }
      

    3. Add CSS style setting for "cmdSaveData" button.
      JavaScript
      Copy Code
      .cmdSaveData {
          background-image: url('./saveData.png');
          background-size: 35px 35px;
      }
      

    4. Initialize the designer instance by passing "config" parameter for customizable configuration.
      JavaScript
      Copy Code
      // Initialize the designer instance
      var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config);
      

       The below output will be generated:


    Note: You can also override the default behavior of a button/command by defining its desired commandMap in config.js or project.