Add a Tab

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

1. Access the default configuration.

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

2. Create the layout structure for the new tab and add it to the config.

   // Layout structure of a new tab
   var newTab = {
    "id" : "contactUs",
    "text": "Contact Us",
    "buttonGroups": [
      {
        commandGroup: {
          children: [
            {
             type: "textBlock",
             text: "Contact sales at (+1) 412-681-4343 or us.sales@mescius.com to request temporary deployment authorization.",
            }
          ]
        }
      }
    ]
   }
   
   // Add new tab to config ribbon
   config.ribbon.push(newTab);

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

The below output will be generated:

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