I can't add some buttons when migrating to Modular UI

[harada.ryosuke]

WebViewer Version: 11.4.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
(Think of this as an email subject)

I can’t add some buttons when migrating to Modular UI.

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

I update webviewer from v10.12.1 to v11.4.0 and i migrate to Modular UI with migrate guid.
I can’t add some buttons on Modular UI .

Can you tell me how to add some buttons?
(Each issues are below )

1. I can’t add dividers.
   I want to add dividers, but I have the error “Divider is not a constructor” .
   My code is below.

    const dividerItem1 = new this.viewerInstance.UI.Components.Divider({
      dataElement: 'test-divider',
    });

    defaultHeader.setItems([
      ...defaultHeader.getItems(),
      dividerItem1,
    ]);

2. I can’t add some buttons to main menu.

I want to add some custom buttons to main menu, but i don’t find them and i have no error.
My code is below.

    const downloadButton = {
      type: 'customButton',
      dataElement: 'downloadButton',
      className: 'row',
      img: Svg.Download,
      onClick: () => {
        this.clickDownload();
        return;
      },
      label: "download",
      role: 'option',
    };

    const mainMenuFlyout =
      this.viewerInstance.UI.Flyouts.getFlyout('MainMenuFlyout');
    mainMenuFlyout.setItems([downloadButton, ...mainMenuFlyout.items]);

3. I can’t add custom button to grouped item with data-element “annotateToolsGroupedItems”

I have an custom annotation and want to add its tools button to “annotateToolsGroupedItems”.
When I add my custom annotation tools button with alone , i find its button.
But when I add my custom annotation tools button with other default button , i can’t find its button.

    class CustomFileAttachmentAnnotationCreateTool extends this.viewerInstance
      .Core.Tools.GenericAnnotationCreateTool {
      constructor(documentViewer) {
        // CustomFileAttachmentAnnotation is the class (function) for our annotation we defined previously
        super(documentViewer, <any>CustomFileAttachmentAnnotation);
      }
    }

    const createTool = new CustomFileAttachmentAnnotationCreateTool(
      this.viewerInstance.Core.documentViewer,
    );

    this.viewerInstance.UI.registerTool(
      {
        toolName: 'AnnotationCreateCustomFileAttachment',
        toolObject: createTool as Core.Tools.Tool,
        buttonImage: Svg.AttachmentFile,
        buttonName: 'customFileAttachmentButton',
        tooltip: 'attachmentFile',
        ),
      },
      <any>CustomFileAttachmentAnnotation,
    );


    const customFileAttachmentToolButton =
      new this.viewerInstance.UI.Components.ToolButton({
        dataElement: 'calloutToolGroupButton',
        toolName: 'AnnotationCreateCustomFileAttachment',
      });
    
    const toolHeader = this.viewerInstance.UI.getModularHeader('tools-header');
    const groupedItemInToolHeader = toolHeader.getItems(
      'groupedItems',
    )[0] as UI.Components.GroupedItems;
    const annotationTools = groupedItemInToolHeader
      .items[0] as UI.Components.GroupedItems;


    // This is OK
    annotationTools.setItems([
      customFileAttachmentToolButton,
    ]);

    // This is NG 
    annotationTools.setItems([
      highlightToolButton,
      underlineToolButton,
      strikeoutToolButton,
      freeTextToolButton,
      stickyToolButton,
      rectangleToolButton,
      freeHandToolButton,
      ellipseToolButton,
      polygonToolButton,
      lineToolButton,
      arrowToolButton,
      calloutToolButton,
      markInsertTextToolButton,
      markReplaceTextToolButton,
      customFileAttachmentToolButton,
    ]);

Thank you and best regards.

[system]

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

It seems like you’re facing issues with adding buttons and dividers in the Modular UI of WebViewer version 11.4.0. Let’s break down the issues:

Some things you can try:

• Ensure that all components, like dividers, are properly imported from the UI library. The error “Divider is not a constructor” suggests there might be an import issue.


• For adding buttons to the main menu, verify that getFlyout returns the correct flyout instance and that you’re setting items correctly.


• When adding custom buttons to grouped items, ensure that the grouped items container is correctly identified and that all buttons are compatible with the UI structure.


• When creating custom tools, make sure they are registered properly and the tool button is instantiated with the correct parameters.

Here are some resources that might help you:

• Flyout Menus: Learn how to work with flyouts in the Modular UI.


• Getting Started with Modular UI: Understand the structure and components of the Modular UI.


• UI Import and Export: Import and export UI configurations to manage your setup more efficiently.


• Items and Custom Elements: Get details on creating and managing custom UI elements.


• Building your own UI: Learn about setting up UI and binding events for custom annotations.

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

[kkim]

Hi there,

1. The error message for the Divider is a known issue and is being investigated by the development team.

2. Using the snippet provided adds a button to the main menu:
   

   

3. SetItems will replace the items that are already in the groupedItems. You will need to get the current set of items and then set them, i.e.

class CustomFileAttachmentAnnotationCreateTool extends Core.Tools.GenericAnnotationCreateTool {
  constructor(documentViewer) {
    // CustomFileAttachmentAnnotation is the class (function) for our annotation we defined previously
    super(documentViewer, Core.Annotations.RectangleAnnotation);
  }
}

const createTool = new CustomFileAttachmentAnnotationCreateTool(
  Core.documentViewer,
);

UI.registerTool(
  {
    toolName: 'AnnotationCreateCustomFileAttachment',
    toolObject: createTool,
    buttonName: 'customFileAttachmentButton',
    tooltip: 'attachmentFile',
    buttonImage: ''
  },
);

const customFileAttachmentToolButton =
  UI.Components.ToolButton({
    dataElement: 'calloutToolGroupButton',
    toolName: 'AnnotationCreateCustomFileAttachment',
  });

const toolHeader = UI.getModularHeader('tools-header');
const groupedItemInToolHeader = toolHeader.getItems('groupedItems',)[0]
const annotationTools = groupedItemInToolHeader.items[0]

// get the default tools
const defaultAnnotationTools = annotationTools.items;

annotationTools.setItems([
  customFileAttachmentToolButton,
  ...defaultAnnotationTools
]);

Best regards,
Kevin

[harada.ryosuke]

Hi Kevin,

Thank you for replying.

1. I understood and will wait for the fix to be released.

2. This was caused by the same dataElement being specified in disableElements.

3. Based on your answer I looked into it and it was because my custom button’s data element was equal to another tool’s data element.
   Thank you for checking.

Thank you and best regards