ステート(状態)を使用したレイアウトの設定

リボンコンテナは、コマンドオプションで定義できる様々なステート(状態)を提供し、特定のレイアウトを表示することができます。

inDropdown : コマンドがドロップダウンであることを表す。
isToolbarMode : ツールバーリボンモードを表す。

designer.setDataメソッドを使用することでカスタムステート(状態)を追加することができます。

コマンドオプションに上記のステート(状態)を定義するには、IF、AND、NOTなどの数式を使用します。以下のコードでは、"text" と "bigButton" のコマンドオプションに異なる数式を使用して、ステート（状態）を設定しています

text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")'
ツールバーリボンモードの場合は「ツールバーリボン」、それ以外の場合は「デフォルトリボン」としてテキストを設定します。
bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))'
コマンドがドロップダウンでないとき、およびリボンがツールバーモードではないときに、bigButtonオプションをtrueに設定します。

注意: commandName オプションは、数式をサポートしていません。

サンプル

下図は、リボンモード（デフォルトとツールバー）のそれぞれで、コマンドのテキストとアイコンが異なることを示しています。

次のコードサンプルは、上の画像に示したコマンドオプションに コンフィグ ステート(状態)を設定する方法を示しています。

// 「Welcome」コマンドを定義します。
var command = {
    title: "Welcome",
    text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")',
    iconClass: '=IF(inDropdown, "ribbon-button-sjs","ribbon-button-hi")',
    bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))',
    direction: '=IF(isToolbarMode, "horizontal","vertical")',
    visiblePriority: 1000,
    commandName: "Welcome",
    execute: async (context, propertyName, fontItalicChecked) => {
        alert('Welcome to new designer.');
    }
};

// DefaultConfigのコマンドマップにコマンドを追加します。
window.customRibbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
        
customRibbonConfig.commandMap = {
    Welcome: command
}
        
// デフォルトのリボンにボタンを追加します。
customRibbonConfig.ribbon[0].buttonGroups.unshift({
    "label": "New Button",
    "thumbnailClass": "welcome",
    "commandGroup": {
        "children": [
            {
                "direction": "vertical",
                "commands": [
                    "Welcome"
                ]
            }
        ]
    }
});
customRibbonConfig.ribbon[0].buttonGroups[2].commandGroup.children[0].children.push('Welcome');

// ToolbarConfigにコマンドを追加します。
window.customToolbarConfig = GC.Spread.Sheets.Designer.ToolBarModeConfig;
customToolbarConfig.commandMap = {
    Welcome: command
}

// ツールバーリボンにボタンを追加します。
customToolbarConfig.ribbon.panels[0].buttonGroups.unshift({
    "buttonGroupName": "Welcome",
    "commandGroup": {
        "children": [
            "Welcome"
        ]
    }
});

// デフォルトのリボンモードでリボンコンテナを初期化します。
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer_host"));
designer.setConfig(customRibbonConfig);
        
// デフォルトモードとツールバーリボンモードを切り替えるボタンを設定します。
document.getElementById('switch').addEventListener('click', function () {
    designer.setConfig(designer.getData('isToolbarMode') ? customRibbonConfig : customToolbarConfig)
});