Custom Toolbar options

Custom Toolbar options

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

• 

  mahita.ande

  • Post Options:
  • Link
    Copy

  Posted 14 February 2021, 9:53 am EST - Updated 3 October 2022, 12:58 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
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  mahita.ande

  • Post Options:
  • Link
    Copy

  Posted 16 February 2021, 1:08 am EST - Updated 3 October 2022, 12:58 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

  

  2336×861 59 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  mahita.ande

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  mahita.ande

  • Post Options:
  • Link
    Copy

  Posted 18 February 2021, 6:48 am EST

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

  -Mahita

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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