Some test text!

Search
Hamburger Icon

Web / Guides / Flyouts

Flyout Menus

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

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.

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.

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.

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

Example Use Case

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

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.

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

removeFlyout

Removes the flyout with the specified dataElement from the UI.

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

setActiveFlyout

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

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

setFlyoutPosition

Sets the position of the active flyout.

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

getFlyout

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

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

getAllFlyouts

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.

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales