Context menu with Designer

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

  • 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?
  • Replied 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
  • Replied 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?
  • Marked as Answer

    Replied 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
  • Replied 27 May 2021, 11:23 pm EST

    Hi!! That looks like it could work. We'll give it a shot. Thanks for your help!
Need extra support?

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

Learn More

Forum Channels