How to create sub-menu in view control just alike annotation and shapes

Technical Support Apryse SDK
1

Product: Web viewer

Product Version:11.4.0

Please give a brief summary of your issue: I want to create sub-menu inside the view, just like we have in annotation and shapes.
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To create a sub-menu in the view control similar to the annotation and shapes menu in Apryse’s WebViewer, you can utilize the Flyout component in the Modular UI. Flyouts allow you to create toggleable menus containing nested items, which can be used to build submenus.

Some things you can try:

  • Create a Flyout using the UI.Components.Flyout class for your view control.

  • Add items to the Flyout, including nested items for submenus using the children property.

  • Integrate the Flyout into your application using the UI.Flyouts.addFlyouts method.

  • Customize the icons and onClick behaviors for each menu item.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hello Rishu,

Thank you for contacting us.

Are you using the modular UI? You can add a new ribbon group with the following code snippet:

      instance.UI.createToolbarGroup({
        name: 'Custom',
        dataElementSuffix: 'Custom',
        children: [],
      });

      const textRibbonItem = new instance.UI.Components.RibbonItem({
        dataElement: 'customRibbonItem',
        label: 'Custom',
      });
      
      const topHeader = instance.UI.getModularHeader('default-top-header');
      let headerItem = topHeader
        .getItems('ribbonGroup')
        .find((data) => data.dataElement === 'default-ribbon-group');
      
      headerItem.items.splice(1, 0, textRibbonItem);
      topHeader.setItems([...topHeader.getItems()]);
1 Like
4

It create new custom next to view.

image
image1835×142 5.22 KB

But I want to add multiple button under view.
I want to add these button in view like we have sub-menu for annotation.

@T["Customize Settings"]

@T["Turn off Comments"]
@T["Turn off Stamps"]
@T["Turn off Annotations"]
@T["Turn off Pictures"]
@T["Save"] @T["Cancel"]

image
image1830×171 7.43 KB

I want this type of menu under view for these button.

1 Like
5

const topheader = instance.ui.getmodularheader(‘default-top-header’);

const ribbongroup = topheader
.items.find(x => x.dataelement === ‘default-ribbon-group’);

const viewgroup = ribbongroup.items.find(x => x.dataelement === ‘toolbargroup-view’);

const custombutton = {
type: ‘ribbonitem’,
label: ‘my button’,
dataelement: ‘customviewbutton’,
onclick: () => {
console.log(‘custom view button clicked!’);
},
};

if (viewgroup) {
console.log(custombutton);
viewgroup.groupeditems.push(custombutton);
console.log(viewgroup);
topheader.setitems([…topheader.getitems()]);
}

I have tried this way to add custom button in view group. But button is not visible in UI.

1 Like
6

Hello Rishu,

Basically, a header contains one or more grouped items. You should find a grouped item you want to add the new button and set it’s items.

This is an example of adding a custom button to the forms group. You can modify it to add to the new custom next to view.

// Getting the header that we want to add the button
const toolsHeader = instance.UI.getModularHeader('tools-header');
const toolsHeaderGroupedItems = toolsHeader.getGroupedItems();

// Getting the forms grouped items
const formsGroupedItems = toolsHeaderGroupedItems[8];

// Inside of this grouped item we have another grouped item with the tools:
const formToolsGroupedItems = formsGroupedItems.items[0];

// adding the "customToolButton" as the last item of the tools
// @ts-ignore
formToolsGroupedItems.setItems([...formToolsGroupedItems.items, customToolButton]);

Best Regards,
Darian

1 Like