Section:

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.

Apryse Docs Image

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

1const flyout = new instance.UI.Components.Flyout({
2  dataElement: 'myCustomFlyout',
3  items: [{
4    dataElement: 'customFlyoutItem',
5    label: 'Custom Flyout Item',
6    onClick: () => console.log('Custom Flyout Item Clicked'),
7    icon: 'icon-save', 
8    children: [{
9      dataElement: 'submenuItem',
10      label: 'Submenu Item',
11      onClick: () => console.log('Submenu Item Clicked'),
12      icon: 'icon-save'
13    }]
14  }],
15});
16
17// Add your flyout to the UI
18instance.UI.Flyouts.addFlyouts([ flyout ])

Related Links

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

1const flyout = new instance.UI.Components.Flyout({
2  dataElement: 'myCustomFlyout',
3  items: [{
4    dataElement: 'customFlyoutItem',
5    label: 'Custom Flyout Item',
6    onClick: () => console.log('Custom Flyout Item Clicked'),
7    icon: 'icon-save', 
8    children: [{
9      dataElement: 'submenuItem',
10      label: 'Submenu Item',
11      onClick: () => console.log('Submenu Item Clicked'),
12      icon: 'icon-save'
13    }]
14  }],
15});
16
17flyout.setItems([
18  {
19    dataElement: 'item-1',
20    label: 'New Item',
21    onClick: () => console.log('New Item clicked'),
22    icon: 'icon-add',
23    children: [
24      // Sub-menu items...
25    ]
26  }
27]);

Related Links

Example Use Case

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

JavaScript

1// Create a new Flyout instance
2const flyout = new instance.UI.Components.Flyout({
3  dataElement: 'exampleFlyout',
4  items: [
5    {
6      dataElement: 'item-1',
7      label: 'Item 1',
8      onClick: () => console.log('Item 1 clicked'),
9      icon: 'icon-first'
10    }
11  ]
12});
13
14// Add your flyout to the UI
15instance.UI.Flyouts.addFlyouts([ flyout ])
16
17// Add more items to the flyout
18flyout.setItems([
19  // Destructure the existing items array
20  ...flyout.items,
21  // Add a new item
22  {
23    dataElement: 'item-2',
24    label: 'Item 2',
25    onClick: () => console.log('Item 2 clicked'),
26    icon: 'icon-second'
27  }
28]);
29
30// Remove an item from the flyout
31flyout.setItems(flyout.items.filter(item => item.dataElement !== 'item-1'));

Related Links

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

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

Related Links

removeFlyout

Removes the flyout with the specified dataElement from the UI.

JavaScript

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

Related Links

setActiveFlyout

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

JavaScript

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

Related Links

setFlyoutPosition

Sets the position of the active flyout.

JavaScript

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

Related Links

getFlyout

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

JavaScript

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

Related Links

getAllFlyouts

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

JavaScript

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

Related Links

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.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales