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

    Follow the below steps to customize the ribbon component by adding a new tab "Contact Us".

    1. Open and edit the config.js file to customize the layout structure by adding a new ribbon tab.
      JavaScript
      Copy Code
       var config = {
           "ribbon":[
                   // other ribbon items contents
                   {
                      "id" : "contactUs",
                      "text": "Contact Us",
                      "buttonGroups": [
                        { "label": "Contact sales at (+1) 412-681-4343 or us.sales@grapecity.com to request temporary deployment authorization.",
                       //"commandGroup" is a must required parameter
                       "commandGroup": {}       
               }
             ]
           }
      


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


       The below output will be generated:

    Note: Similarly, if you want to delete a built-in tab from ribbon component, remove its content from config.js and repeat step 2 from above.