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

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

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オプションは、数式をサポートしていません。

サンプル

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

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

JavaScript	コードのコピー
// 「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) });

JavaScript

コードのコピー

// 「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)
});