Introducing WebViewer's New Modular UI: Enhanced Accessibility and Customization

• Customization: Using modular and reusable components allows for faster customization of the WebViewer UI
• Structure and Content: Items (e.g., buttons, controls) can be placed within Containers (e.g., headers, menus) to build the UI structure.
• Flexibility: Modify the default WebViewer UI or create a new one from scratch using high-level components like Containers and Items.
• Ease of Use: In WebViewer 11, the Modular UI is enabled by default. In WebViewer v10, it is enabled by setting the UI property to 'beta' in the WebViewer constructor.
• Accessible: In WebViewer v11, the modular UI is WCAG 2.1 AA compliant, making the UI more accessible by improving contrast, keyboard navigation, and screen reader support

1. Items
2. Containers
3. Panels
4. Flyouts

Items

1. Action Buttons: Perform specific functions like saving, printing, or custom actions defined by the developer. These buttons can have icons and labels to indicate their purpose.
2. Stateful Buttons: Manage states within the application, such as toggling between different tools or modes (e.g., pan, zoom, annotation tools). They visually indicate the current state to the user.
3. Toggle Buttons: Control the visibility or activation of UI elements. For example, a toggle button might show or hide a side panel or switch a feature on and off.
4. Tool Buttons: Tool buttons are used to activate a specific tool such as the highlight tool. In the Modular UI, these are abstractions that can be used to easily add a tool button anywhere in the UI
5. Prebuilt Items: Include common actions and controls such as navigation buttons (e.g., next page, previous page), zoom controls, and other frequently used UI elements. These come with default behaviors but can be customized.

• Customization: Each item can be customized with properties like `type`, `dataElement`, `title`, `icon`, and `onClick` functions. This allows developers to define the appearance and behavior of each item precisely.
• Integration with Containers: Items are placed within containers such as headers, toolbars, or side panels. This hierarchical structure helps in organizing the UI logically and ensures that items are accessible in the right context.
• Dynamic Management: Items can be dynamically added, removed, or modified at runtime. This dynamic capability is crucial for creating responsive and adaptable interfaces that can change based on user actions or application state.

Containers

1. Modular Headers: Serve as flexible top-level containers that can house other containers and items, allowing for various placements and customization.
2. Grouped Items: Function like flex-box containers, holding multiple items and enabling complex layouts within the UI.
3. Ribbon Groups: Specialized containers that hold Ribbon Items, maintaining a consistent style for toolbars and ribbon interfaces.

Panels

1. Prebuilt Panels: Includes Thumbnails, Outline, Bookmarks, and other commonly used panels. These can be easily added to the viewer using the addPanel API.
2. Custom Panels: Developers can create custom panels using JavaScript or React, providing flexibility to meet specific needs. These panels can display any content, from custom UI elements to interactive widgets.
3. Tabbed Panels: Multiple subpanels can be organized within a single panel using tabs, effectively managing screen space and enabling users to switch between different panel views seamlessly.
4. Dynamic Management: Panels can be dynamically added, modified, or removed during runtime, allowing the interface to adapt to changing requirements or user preferences. This dynamic capability is essential for creating responsive and interactive applications.
5. Flexible Locations: Panels can be positioned on either the left or right side of the viewer, and their positions can be adjusted programmatically or through user interaction. This flexibility ensures that the UI can be tailored to provide an optimal user experience.

Flyouts

1. Customizable Content: Flyouts can include various items like buttons, toggles, and other controls, allowing for a rich and interactive user experience. Each item within a flyout can be customized with icons, labels, and actions.
2. Submenus and Nested Items: Flyouts support the creation of submenus, enabling deeper navigation and organization of options within a compact space. This feature is particularly useful for grouping related actions and controls.
3. Creation and Management: Flyouts are created using the UI.Components.Flyout class and integrated with the UI.Flyouts.addFlyouts method. This method allows for the addition, removal, and updating of flyouts dynamically, providing flexibility in managing UI components.
4. Positioning and Display: Flyouts can be positioned relative to their triggering element, ensuring they appear in an intuitive and accessible location for users. The positioning can be adjusted based on the UI layout and user interactions.
5. Event Handling: Flyouts can be linked to specific events or user actions, such as clicks or hovers, making them responsive to user behavior. This interactivity enhances the overall user experience by providing context-sensitive options.

APIs

const { Tools } = instance.Core;
const rectangleToolButton = new instance.UI.Components.ToolButton({
  dataElement: 'rectangleToolButton',
  toolName: Tools.ToolNames.RECTANGLE,
});
// This can now be added to a modular header
const defaultHeader = instance.UI.getModularHeader('default-top-header')
defaultHeader.setItems([rectangleToolButton]);

// Thumbnail Panel
instance.UI.addPanel({
  dataElement: 'thumbnailPanel',
  location: 'right',
  render: instance.UI.Panels.THUMBNAIL,
});

// Using the toggle button to open the Thumbnail panel
const thumbnailPanelToggle = new instance.UI.Components.ToggleElementButton({
 dataElement: 'thumbnailPanelToggle',
 toggleElement: 'thumbnailPanel',
 img: 'icon-header-sidebar-line',
 title: 'Thumbnail Toggle Panel',
});
// Then this button should be added to a container's item using the setItems API.
// This container can be a modular header or a grouped items container.
const defaultHeader = instance.UI.getModularHeader('default-top-header')
defaultHeader.setItems([thumbnailPanelToggle]);

UI Import/Export

• Use the UI.importModularComponents(json, functionMap) method.
• JSON defines components, headers, panels, and flyouts.
• Use function maps to handle custom functions and behavior.

• Uses the UI.exportModularComponents() method.
• Generates a JSON object with the current UI configuration.
• JSON can be edited, saved, and reused.