Are we able to move icons from one ribbon tab to another?

Technical Support
1

Are we able to move icons from one ribbon tab to another? We need to set some icon in other tab.
Provide solution or documentation so i can easily integrate in our integration.

2

Hey there!

This is a bit painful, but it is possible. I wrote a function you can use to move items between ribbons.

  const moveItem = (toolName, fromRibbon, toRibbon) => {
    instance.setHeaderItems((header) => {
      const ribbon = header.getHeader(fromRibbon);
      const tool = ribbon.get(toolName)
      ribbon.delete(toolName);

      const ribbon2 = header.getHeader(toRibbon);
      ribbon2.push(tool);
      return header;
    })
  }

You can use it like so:

  // move the shape tool to from the "Annotate" ribbon to the "Shapes" ribbon
  moveItem(
    'shapeToolGroupButton',
    'toolbarGroup-Annotate',
    'toolbarGroup-Shapes'
  );

The first parameter is the name of the tool, which you can get by hovering over it in the dev console and finding the ‘data-element’ attribute.

The second parameter is the name of the ribbon you want to move FROM, and the third parameter is the name of the ribbon you want to move TO. You can find these by hovering over the ribbons as well.

Thanks!
Logan

3

Thank you so much!

I will give this a try.

1 Like