Flyout Menus

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.

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.

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 ])

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

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.

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...
    ]
  }
]);

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

// 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'));

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:

Integrates your Flyout Menu into the UI.

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

Removes the flyout with the specified dataElement from the UI.

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

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

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

Sets the position of the active flyout.

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

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

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

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

const flyoutList = instance.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.