Webviewer Modular UI migration

joserafael.arce · November 20, 2025, 1:51am

WebViewer Version: 11.8

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? N/A?
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? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
Migrating or retaining UI elements to Modular UI mode

Please describe your issue and provide steps to reproduce it:
We are looking into migrating our Webviewer powered application from legacy to Modular UI mode and there are certain UX elements we want to retain.

For example, the styling popup. Our end users are happier with having the styling menu as a popup when they are editing the annotation. Below is a screenshot of how it looks in legacy mode:

But in Modular UI, the styling menu comes out as a left hand panel (that also covers the Thumbnail panel which our end users like having open at all times) by default:

How do I configure the Modular UI so that it produces the same styling popup as before?

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

system · November 20, 2025, 1:51am

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.

You’re looking to migrate from the Legacy UI to the new Modular UI in WebViewer while retaining certain UI elements, such as the styling popup for annotations. The Modular UI offers greater flexibility, allowing you to customize and configure components to suit your needs.

Some things you can try:

Explore the Modular UI’s ability to configure components using JSON config files, which can allow you to customize how and where the styling menu appears.

Utilize the APIs provided to modify the behavior of the annotation styling panel, potentially overriding the default behavior to mimic the legacy popup style.

Consider creating a custom panel or component that replicates the styling popup, ensuring it doesn’t interfere with other UI elements like the Thumbnail panel.

Use the addPanel API to register custom panels and control their display based on user interactions or specific conditions.

Here are some resources that might help you:

Migrating to V11 Modular UI Overview and Philosophy: Learn how to migrate to the Modular UI and customize it to fit your needs.

Modular UI Panels: Details on adding custom panels and how to manage their properties for a tailored user experience.

Containers - Modular Header: Information on creating and customizing headers, which may include styling popups.

Build PDF forms using Javascript in WebViewer 11: Understand how to work with forms and potentially apply similar logic to styling popups.

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

darian.chen · November 20, 2025, 8:17pm

Hello Rafael,

Thank you for contacting Apryse Forums.

We don’t plan to bring the style popup to the modular UI currently, but I can submit a feature request to see if this can be added in the future. Based on your workflow, we suggest you try the following:

The style panel could be moved to the right side if you want the thumbnails panel to always be open on the left.
The style panel could alternatively be added as a tab panel in the left panel.
The style panel could alternatively be placed into a flyout menu so that it comes out from the top menu (similar to the legacy UI) or as a menu from the annotation popup.

Modular UI Panels | Apryse documentation

While we cannot guarantee the implementation of this feature, if you could provide some further information around the context of why you want the feature, this may help prioritize its development. We would be interested to know:

What is the workflow that you would use the requested feature in?
Why is the feature valuable to you and your users?
How are you coping without it right now?

Best Regards,
Darian

joserafael.arce · November 21, 2025, 12:48am

Good day, Darian.

I will bring this up to our Product Owner first and we will discuss what we want to pursue.

In the meantime, could you provide a code example of implementing the “as a menu from the annotation popup” as mentioned in #3?

Thank you!

darian.chen · November 21, 2025, 2:26pm

Hello,

This is described in the guide I sent previously.

      // Create the flyout
      const styleFlyout = new instance.UI.Components.Flyout({
        dataElement: 'styleFlyout',
        items: [{
          dataElement: 'mystylePanel',
          render: 'stylePanel'
        }],
      });

      // Add the flyout to the UI
      instance.UI.Flyouts.addFlyouts([styleFlyout]);

      // Create a toggle button to open the flyout
      const styleFlyoutToggle = new instance.UI.Components.ToggleElementButton({
        dataElement: 'styleFlyoutToggle',
        title: 'Style Panel',
        img: 'icon-style-panel-toggle',
        toggleElement: 'styleFlyout'
      });

      // Add the toggle button to a header
      const myHeader = instance.UI.getModularHeader('default-top-header');
      myHeader.setItems([...myHeader.getItems(), styleFlyoutToggle]);

Best Regards,
Darian

joserafael.arce · November 24, 2025, 12:41am

Good day, Darian.

Thank you for providing the code sample. We are currently evaluating if this approach will work for our end users.

Additionally, I would also like to ask if there is a config to bring back the 4 annotation style presets that appears in the toolbar. This element specifically below from the legacy UI:

Thank you very much!

darian.chen · November 24, 2025, 2:44pm

Hello,

When we built the Modular UI, we dropped support for that UI component (which we call the Tools Overlay) to simplify the default UI configuration and in response to how the majority of our customers were using the tools. That said, we’ve been taking in feedback and would very much appreciate your insight.

We would be interested to know:

What is the workflow that your customers use the Tool overlay in?
Why is the feature valuable to you and your users?
We don’t plan to bring the Tools Overlay back, but we are exploring expanding support for “Tool Groups.” How would you like a feature like that to operate?

As an alternative, and using current Modular UI components, you can replicate a similar experience by mapping an icon-only ribbon item to a grouped item containing the tools you need.

   const configFour = {
    "modularComponents": {
      "toolbarGroup-View": {
        "dataElement": "toolbarGroup-View",
        "title": "View",
        "type": "ribbonItem",
        "img": "icon-view-ribbon",
        "groupedItems": [],
      },
      "toolbarGroup-Annotate": {
        "dataElement": "toolbarGroup-Annotate",
        "title": "Annotate",
        "type": "ribbonItem",
        "img": "icon-annotate-ribbon",
        "groupedItems": [
          "annotateGroupedItems"
        ],
      },
      "toolbarGroup-Shapes": {
        "dataElement": "toolbarGroup-Shapes",
        "title": "Shapes",
        "type": "ribbonItem",
        "img": "icon-tool-shape-rectangle",
        "groupedItems": [
          "shapesGroupedItems"
        ],
      },
      "toolbarGroup-Insert": {
        "dataElement": "toolbarGroup-Insert",
        "title": "Insert",
        "type": "ribbonItem",
        "img": "icon-insert-ribbon",
        "groupedItems": [
          "insertGroupedItems"
        ],
      },
      "default-ribbon-group": {
        "dataElement": "default-ribbon-group",
        "items": [
          "toolbarGroup-View",
          "toolbarGroup-Annotate",
          "toolbarGroup-Shapes",
          "toolbarGroup-Insert",
        ],
        "type": "ribbonGroup",
        "justifyContent": "start",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      },
      "underlineToolButton": {
        "dataElement": "underlineToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextUnderline"
      },
      "underlineToolButton2": {
        "dataElement": "underlineToolButton2",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextUnderline2"
      },
      "underlineToolButton3": {
        "dataElement": "underlineToolButton3",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextUnderline3"
      },
      "underlineToolButton4": {
        "dataElement": "underlineToolButton4",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextUnderline4"
      },
      "stylePanelToggle": {
        "dataElement": "stylePanelToggle",
        "title": "action.style",
        "type": "toggleButton",
        "img": "icon-style-panel-toggle",
        "toggleElement": "stylePanel"
      },
      "defaultAnnotationUtilities": {
        "dataElement": "defaultAnnotationUtilities",
        "items": [
          "stylePanelToggle",
        ],
        "type": "groupedItems",
        "grow": 1,
        "gap": 12,
        "justifyContent": "end",
        "alwaysVisible": true
      },
      "annotateToolsGroupedItems": {
        "dataElement": "annotateToolsGroupedItems",
        "items": [
          "underlineToolButton",
          "underlineToolButton2",
          "underlineToolButton3",
          "underlineToolButton4",
        ],
        "type": "groupedItems",
        "justifyContent": "center",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      },
      "annotateGroupedItems": {
        "dataElement": "annotateGroupedItems",
        "items": [
          "annotateToolsGroupedItems",
        ],
        "type": "groupedItems",
        "justifyContent": "center",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      },
      "rectangleToolButton": {
        "dataElement": "rectangleToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateRectangle"
      },
      "rectangleToolButton2": {
        "dataElement": "rectangleToolButton2",
        "type": "toolButton",
        "toolName": "AnnotationCreateRectangle2"
      },
      "rectangleToolButton3": {
        "dataElement": "rectangleToolButton3",
        "type": "toolButton",
        "toolName": "AnnotationCreateRectangle3"
      },
      "rectangleToolButton4": {
        "dataElement": "rectangleToolButton4",
        "type": "toolButton",
        "toolName": "AnnotationCreateRectangle4"
      },
      "shapesToolsGroupedItems": {
        "dataElement": "shapesToolsGroupedItems",
        "items": [
          "rectangleToolButton",
          "rectangleToolButton2",
          "rectangleToolButton3",
          "rectangleToolButton4",
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      },
      "shapesGroupedItems": {
        "dataElement": "shapesGroupedItems",
        "items": [
          "shapesToolsGroupedItems",
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      },
      "rubberStampToolButton": {
        "dataElement": "rubberStampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateRubberStamp"
      },
      "signatureCreateToolButton": {
        "dataElement": "signatureCreateToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateSignature"
      },
      "fileAttachmentButton": {
        "dataElement": "fileAttachmentButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateFileAttachment"
      },
      "stampToolButton": {
        "dataElement": "stampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateStamp"
      },
      "insertToolsGroupedItems": {
        "dataElement": "insertToolsGroupedItems",
        "items": [
          "rubberStampToolButton",
          "signatureCreateToolButton",
          "fileAttachmentButton",
          "stampToolButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      },
      "insertGroupedItems": {
        "dataElement": "insertGroupedItems",
        "items": [
          "insertToolsGroupedItems",
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
      }
    },
    "modularHeaders": {
      "top-header": {
        "dataElement": "top-header",
        "placement": "top",
        "justifyContent": "start",
        "grow": 0,
        "gap": 12,
        "float": false,
        "stroke": true,
        "dimension": {
          "paddingTop": 8,
          "paddingBottom": 8,
          "borderWidth": 1
        },
        "style": {},
        "items": [
          'default-ribbon-group',
          'annotateGroupedItems',
          'shapesGroupedItems',
          'insertGroupedItems',
          "defaultAnnotationUtilities"
        ]
      }
    },
    "panels": {
      "stylePanel": {
        "dataElement": "stylePanel",
        "render": "stylePanel",
        "location": "left"
      }
    }
  };

instance.UI.importModularComponents(configFour);