Add Elements to a Tab

The SpreadJS Designer component allows you to add various elements to a tab in the Ribbon component, such as buttons, checkboxes, and dropdowns. This enables you to customize the ribbon as needed for more practical and effective usage.

To perform these tasks, you need to follow the below steps:

Initialize a workbook and access the active sheet.
Access the default configuration settings for the SpreadJS Designer component.
Define layout structure and properties for the new element.
Add the element to a tab.
Create a command associated with the new element.
Initialize the designer instance with the newly configured settings.

Let's discuss with some examples.

Add Button

The following code sample shows how to add a button, named 'Save Data', to the 'HOME' tab.

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

// Set layout of the new button
var saveData = {
    "label": "Save Data",
    "thumbnailClass": "",
    "commandGroup": {
        "children": [
            {
                "direction": "vertical",
                "commands": [
                    "cmdSaveData"
                ]
            }
        ]
    }
}

// Add new button to config ribbon tab
config.ribbon[0].buttonGroups.unshift(saveData);

// Create command for the new button
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.');
        }
    }
}

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

Additionally, you can also set styles for the new button, such as the background image, if you want.

<!-- CSS style setting for new button -->
<style>.cmdSaveData {
    background-image: url('./saveData.png');
    background-size: 35px 35px;
}
</style>

The below output will be generated.

Add Checkbox

You can add a checkbox to a tab and also toggle the state of the checkbox to be checked or unchecked.

The following code sample shows how to add a custom checkbox, named 'My Checkbox', to the 'HOME' tab.

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

// Set layout of the new checkbox
var NewCheckBox = {
     "label": "SpreadJS",
     "thumbnailClass": "",
     "commandGroup": {
         "children": [
             {
                 "direction": "vertical",
                 "commands": [
                     "MyCheckbox"
                 ]
             }
         ]
     }
}

// Add new checkbox to config ribbon tab
config.ribbon[0].buttonGroups.unshift(NewCheckBox);

// Create command for the new checkbox
config.commandMap = {
     MyCheckbox: {
         title: "Custom Checkbox",
         text: "My Checkbox",
         type: 'checkbox',
         commandName: "MyCheckbox",
         execute: async (context, propertyName) => {
             let state = context.getData("myCheckState");
             context.setData("myCheckState", !state);
         },
         getState: (context) => {
             return context.getData("myCheckState");
         }
     }
}

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

The below output will be generated.

You can add both editable and non-editable dropdowns to the ribbon tab.

The following code sample depicts how to add dropdowns to the 'HOME' tab.

// Initialize a workbook and get the active sheet
var spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getSheet(0);

// Access the default config
var config = GC.Spread.Sheets.Designer.DefaultConfig;

// Create an editable dropdown and define command objects
const customDropDownList1 = [
        { text: "10", value: 10 },
        { text: "20", value: 20 },
        { text: "30", value: 30 },
        { text: "40", value: 40 },
        { text: "50", value: 50 }
];
const customCommand1 = {
        title: "Custom Command 1",
        type: "editableSelect",
        width: 70,
        commandName: "customCommand1",
        enableContext: "true",
        dropdownList: customDropDownList1,
        execute: function (context, value) {
            let spreadObj = context.getWorkbook();
            let activeSheet = spreadObj.getActiveSheet();
            let cellTag = activeSheet.getTag(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
            let newCellTag = {
                ...cellTag,
                "customCommand1": value
            }
            activeSheet.setTag(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex(), newCellTag);
        },
        getState: function (context) {
            let spreadObj = context.getWorkbook();
            let activeSheet = spreadObj.getActiveSheet();
            let cellTag = activeSheet.getTag(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
            if (cellTag && cellTag.customCommand1) {
                const nearestValue = findNearestValue(cellTag.customCommand1, customDropDownList1);
                return nearestValue.value;
            }
            return customDropDownList1[0].value;
        }
}

// Create a non-editable dropdown and define command objects
const customDropDownList2 = [
        { text: "List 1", value: "value1" },
        { text: "List 2", value: "value2" },
        { text: "List 3", value: "value3" },
        { text: "List 4", value: "value4" }
];
const customCommand2 = {
        title: "Custom Command 2",
        type: "comboBox",
        text: "Custom Command 2",
        comboWidth: 70,
        commandName: "customCommand2",
        dropdownMaxHeight: 500,
        dropdownList: customDropDownList2,
        execute: function (context, value) {
            let spreadObj = context.getWorkbook();
            let activeSheet = spreadObj.getActiveSheet();
            let cellTag = activeSheet.getTag(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
            let newCellTag = {
                ...cellTag,
                "customCommand2": value
            }
            activeSheet.setTag(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex(), newCellTag);
        },
        getState: function (context) {
            let spreadObj = context.getWorkbook();
            let activeSheet = spreadObj.getActiveSheet();
            let cellTag = activeSheet.getTag(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
            if (cellTag && cellTag.customCommand2) {
                return cellTag.customCommand2;
            }
            return customDropDownList2[0].value;
        }
}

// Set layout of new dropdowns
var newDropDowns = {
        "label": "DropDowns",
        commandGroup: {
            children: [
                {
                    direction: "vertical",
                    commands: [
                        "customCommand1",
                        "customCommand2"
                    ]
                }
            ]
        }
}

// Add new dropdowns to HOME tab
config.ribbon[0].buttonGroups.unshift(newDropDowns);

// Create command for the new dropdowns
config.commandMap = {
        "customCommand1": customCommand1,
        "customCommand2": customCommand2
}

// Determine the closest value from a dropdown list based on user input
function findNearestValue(value, customDropDownList) {
        return customDropDownList.reduce((prev, curr) =>
            Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
        );
}

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

The below output will be generated.

AddDropdownInTab

Add Elements to a Tab

Add Button

Add Checkbox

Add Dropdown