Custom Toolbar options

Posted by: mahita.ande on 14 February 2021, 9:53 am EST

  • Posted 14 February 2021, 9:53 am EST

    Hi,
    I added a custom toolbar option as follows.
    {
    "thumbnailClass": "ribbon-button-insertfunction",
    "commandGroup": {
    "commands": [
    "fxExpression"
    ]
    }
    "visibleWhen": "CellSelected"
    }
    and provided the necessary implementation for the command to open a modal. I do not have any child options/commands under this icon. However, I still see the little triangle icon which pops a tiny tooltip pop up showing the same options. (see attached). now, I have to click again on this pop up to open my modal. How can I not show this little triangle and tooltip pop up, instead open my Modal directly on clicking the icon.
    Also, I want to enable/show this icon only when single cell is selected. If a row/column/range of cells are selected I want disable/hide this icon. My attempt to use visibleWhen did not work.

    Please advise.

    Thank you,
    Mahita
  • Replied 14 February 2021, 11:12 pm EST

    Hi Mahita,

    This issue seems to be implementation-specific, could you please update the following sample and share it back so that we could investigate it further and assist you accordingly:
    https://stackblitz.com/edit/js-jsjsa5?file=index.js

    Regards
    Sharad
  • Replied 16 February 2021, 1:08 am EST

    Hi,
    The sample you provided already seems to have that behavior. The Custom command you added shows the drop down to open a tiny pop up with icon and Custom Command text. How to avoid this additional pop up. Please advise.

    Thank you,
    Mahita

  • Replied 16 February 2021, 10:47 pm EST

    Hi Mahita,

    The observed behaviour is by design, when the width of the designer/window is small then button groups are collapsed and its options are displayed as a dropdown menu, try increasing the width of the preview window in the sample and you will notice that the dropdown option is removed and custom is displayed directly in the toolbar. You may also try to move the custom option from the home tab to settings tab or new custom tab, since the home tab has a lot of options command groups are collapsed more easily than other tabs.

    Regards
  • Replied 17 February 2021, 10:09 am EST

    Thank you for the clarification. However, I have a flow up question, I want to enable/show this icon only when single cell is selected. If a row/column/range of cells are selected I want disable/hide this icon. My attempt to use visibleWhen did not work.

    Please advise.

    Thank you,
    Mahita
  • Replied 18 February 2021, 1:55 pm EST

    Hi Mahita,

    If I understand correctly you want to enable the command only when the single-cell selected. For this, you may use the internal singleCellSelected state and assign it to the enableContext property of the Command. Please refer to the following code snippet and attached sample that demonstrates the same.




    commandMap["saveDB"] = {
    title: "saveDB",
    text: "saveDB",
    iconClass: "my-image",
    enableContext: "SingleCellSelected",
    bigButton: true,
    commandName: "saveDB",
    execute: (context, propName) => {
    alert("Welcome to designer");
    }
    };

    sample: https://stackblitz.com/edit/js-hhuasa?file=index.js



    Further, If you just want to disable the icon of the command. You may modify the iconClass property on SelectionChanged. Please refer to the following code snippet and attached samplethat demonstrates the same.

    sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, (e, args) => {
    console.log(args);
    if (
    args.newSelections[0].colCount !== 1 &&
    args.newSelections[0].rowCount !== 1
    ) {
    console.log(GC.Spread.Sheets.Designer.getCommand());
    config.commandMap.saveDB.iconClass = "null";
    } else {
    config.commandMap.saveDB.iconClass = "my-image";
    }
    designer.setConfig(config);
    });


    sample: https://stackblitz.com/edit/js-ozypta?file=index.js

    Regards
    Avinash
  • Replied 18 February 2021, 6:48 am EST

    This is very helpful. Your suggestions worked. Thank you, Sharad.

    -Mahita
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels