Create and Manage Flyout Menus in WebViewer

Overview

Flyout Menus in WebViewer provide a compact and versatile way to offer additional options or actions without overcrowding the interface. These hovering menus appear upon user interaction with UI elements such as buttons.

Flyout Menus can be customized and integrated seamlessly, enhancing the user experience by neatly organizing extra functionalities.

Creating Flyout Menus

To add a Flyout Menu to your application, create instances of the UI.Components.Flyout class. Each instance can be tailored with custom items, icons, and onClick behaviors, including support for submenu items for deeper navigation options.

JavaScript

const flyout = new instance.UI.Components.Flyout({
  dataElement: 'myCustomFlyout',
  items: [{
    dataElement: 'customFlyoutItem',
    label: 'Custom Flyout Item',
    onClick: () => console.log('Custom Flyout Item Clicked'),
    icon: 'icon-save', 
    children: [{
      dataElement: 'submenuItem',
      label: 'Submenu Item',
      onClick: () => console.log('Submenu Item Clicked'),
      icon: 'icon-save'
    }]
  }],
});

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

UI.Components.Flyout

After creation, use the UI.Flyouts.addFlyouts method to integrate your Flyout Menu into the UI.

Methods in the Flyout Class

setItems

setItems(items): Sets an array of item objects to the flyout. Each object in the array should follow the structure described for the options.items in the constructor. This operation replaces the existing items in the flyout.

JavaScript

const flyout = new instance.UI.Components.Flyout({
  dataElement: 'myCustomFlyout',
  items: [{
    dataElement: 'customFlyoutItem',
    label: 'Custom Flyout Item',
    onClick: () => console.log('Custom Flyout Item Clicked'),
    icon: 'icon-save', 
    children: [{
      dataElement: 'submenuItem',
      label: 'Submenu Item',
      onClick: () => console.log('Submenu Item Clicked'),
      icon: 'icon-save'
    }]
  }],
});

flyout.setItems([
  {
    dataElement: 'item-1',
    label: 'New Item',
    onClick: () => console.log('New Item clicked'),
    icon: 'icon-add',
    children: [
      // Sub-menu items...
    ]
  }
]);

UI.Components.Flyout UI.Components.Flyout#setItems

Example Use Case

Below is an example of creating a flyout, adding items to it, and then programmatically removing an item:

JavaScript

// Create a new Flyout instance
const flyout = new instance.UI.Components.Flyout({
  dataElement: 'exampleFlyout',
  items: [
    {
      dataElement: 'item-1',
      label: 'Item 1',
      onClick: () => console.log('Item 1 clicked'),
      icon: 'icon-first'
    }
  ]
});

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

// Add more items to the flyout
flyout.setItems([
  // Destructure the existing items array
  ...flyout.items,
  // Add a new item
  {
    dataElement: 'item-2',
    label: 'Item 2',
    onClick: () => console.log('Item 2 clicked'),
    icon: 'icon-second'
  }
]);

// Remove an item from the flyout
flyout.setItems(flyout.items.filter(item => item.dataElement !== 'item-1'));

UI.Components.Flyout UI.Components.Flyout#setItems

UI Components inside Flyouts

In WebViewer version 11.3+, you can add other UI components to a flyout's item list. This is particularly useful for creating a flyout containing prebuilt items such as a Zoom menu or a Preset Button. There are some exceptions, as some components wouldn't make sense to add to a flyout, such as a Panel.

Below is an example of a flyout with other nested components:

JavaScript

  const item1 = new instance.UI.Components.GroupedItems({
    dataElement: 'testGroupedItem',
    grow: 0,
    gap: 12,
    position: 'start',
    style: {},
    items: [
      new instance.UI.Components.CustomButton({
        label: 'test2',
        title: 'this is a test button2',
        onClick: () => console.log('button clicked!2'),
        img: 'icon-save',
        dataElement: 'customButton2',
      }),
      new instance.UI.Components.ToggleElementButton({
        label: 'Toggle2',
        title: 'Toggle the visibility of the element',
        img: 'icon-form-field-combobox',
        toggleElement: 'newFlyout',
      }),
    ],
    alwaysVisible: true,
  });
  const item2 = new instance.UI.Components.Flyout({
    dataElement: 'exampleFlyout',
    label: 'Flyout',
    items: [
      new instance.UI.Components.CustomButton({
        label: 'test4',
        title: 'this is a test button4',
        onClick: () => console.log('button clicked!4'),
        img: 'icon-save',
        dataElement: 'customButton4',
      }),
    ],
  });
  const item3 = new instance.UI.Components.PageControls();
  const item4 = new instance.UI.Components.PresetButton({
    buttonType: 'saveAsButton',
    dataElement: 'presetButton-save'
  });
  const item5 = new instance.UI.Components.StatefulButton({
    initialState: 'SinglePage',
    states: {
      SinglePage: {
        img: 'icon-header-page-manipulation-page-layout-single-page-line',
        onClick: (update) => {
          update('DoublePage');
        },
        title: 'Single Page',
      },
      DoublePage: {
        img: 'icon-header-page-manipulation-page-layout-double-page-line',
        onClick: (update) => {
          update('SinglePage');
        },
        title: 'Double Page',
      },
    },
    mount: () => {},
  });
  const item6 = new instance.UI.Components.ToolButton({
    label: 'Pan',
    title: 'Pan the document',
    img: 'icon-header-pan',
    toolName: 'Pan',
  });
  const item7 = new instance.UI.Components.Zoom({ dataElement: 'zoomControlComponent' });
  const newFlyout = new instance.UI.Components.Flyout({
    dataElement: 'newFlyout',
    items: [
        item1,
        item2,
        item3,
        item4,
        item5,
        item6,
        item7,
    ],
  });
  instance.UI.Flyouts.addFlyouts([newFlyout]);

Flyout Management

The UI.Flyouts namespace offers a suite of methods for comprehensive Flyout Menu management, allowing for addition, removal, activation, and positioning within the UI. Following are the available methods:

addFlyouts

Integrates your Flyout Menu into the UI.

JavaScript

instance.UI.Flyouts.addFlyouts([ flyout ]); // flyout is an instance of UI.Components.Flyout

UI.Flyouts.addFlyouts

removeFlyout

Removes the flyout with the specified dataElement from the UI.

JavaScript

instance.UI.Flyouts.removeFlyout('customFlyout');

UI.Flyouts.removeFlyout

setActiveFlyout

Displays the flyout with the specified dataElement. Set to null to hide the active flyout.

JavaScript

instance.UI.Flyouts.setActiveFlyout('customFlyout');

UI.Flyouts.setActiveFlyout

setFlyoutPosition

Sets the position of the active flyout.

JavaScript

instance.UI.Flyouts.setFlyoutPosition({ x: 100, y: 100 });

UI.Flyouts.setFlyoutPosition

getFlyout

Returns the flyout with the specified dataElement as an instance of UI.Components.Flyout.

JavaScript

const flyout = instance.UI.Flyouts.getFlyout('customFlyout');

UI.Flyouts.getFlyout

getAllFlyouts

Returns an array of all the flyouts currently in the UI as instances of UI.Components.Flyout.

JavaScript

const flyoutList = instance.UI.Flyouts.getAllFlyouts();

UI.Flyouts.getAllFlyouts

Flyout Menus are a dynamic component of WebViewer's Modular UI, offering a flexible solution to incorporate additional user actions and options neatly within the user interface.