Context menu with Designer

Context menu with Designer

Posted by: lpagliaro on 26 May 2021, 5:01 am EST

• 

  lpagliaro

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 May 2021, 5:01 am EST

  Hi! We are using Designer on a React application and we have a config file to customize the designer by adding some options to the context menu and the ribbon. We’d like to enable/disable or hide/show some of these options in the context menu and the ribbon based on the content of the cell (or if there’s a formula in the formula box). How can we achieve this?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 26 May 2021, 5:38 pm EST

  Hi,

  For this, You may use the visible context and define the custom state, and whenever you need to hide the option you just set the value of the custom state as false. Please refer to the following code snippet and attached sample that demonstrates the same.

  
   document.getElementById('check').addEventListener('change', e => {
      designer.setData('myState', e.target.checked);
    });
    let commandMap = config.commandMap;
    if (!config.commandMap) {
      commandMap = config.commandMap = {};
    }
  
    commandMap['designer.insertSignature'] = {
      text: 'Insert Signature',
      commandName: 'designer.insertSignature',
      visibleContext: 'myState',
      execute:
        // execute_InsertSignature, following just a simple demo code snippet
        () => {
          alert('Insert Signature');
        }
    };
  
  

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

  Regards,
  
  Avinash

• 

  lpagliaro

  • Post Options:
  • Link
    Copy

  Posted 26 May 2021, 11:47 pm EST

  Thanks for the reply but this doesn’t answer my question. Let’s say that I have a SUM formula in a cell, now when I select that cell (or any cell that has a SUM formula) I want that the copy button (or any of my custom buttons) from the ribbon and the context menu disabled. How can we accomplish that?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 27 May 2021, 7:17 pm EST

  Hi,

  For this, you need to use the Selection Changed and toggle the custom State according. Please refer to the following code snippet that disables the custom button and custom context menu item when the active cell has the Sum formula.

  
    spread.bind('SelectionChanged', (e, args) => {
      let sheet = args.sheet;
      let activeCell = sheet.getCell(
        sheet.getActiveRowIndex(),
        sheet.getActiveColumnIndex()
      );
      let formula = activeCell.formula();
      console.log(formula);
      if (formula && formula.indexOf('SUM') != -1) {
        designer.setData('myState', false);
      } else {
        designer.setData('myState', true);
      }
    });
  
    //set the formulas on sheet
    spread
      .getActiveSheet()
      .getRange('B4:G4')
      .formula('SUM(5,4,5,6)');
  
  

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

  Regards,
  
  Avinash

• 

  lpagliaro

  • Post Options:
  • Link
    Copy

  Posted 27 May 2021, 11:23 pm EST

  Hi!! That looks like it could work. We’ll give it a shot. Thanks for your help!