Class: Flyout

UI.Components. Flyout


new Flyout(options)

Parameters:
Name Type Description
options Object
Properties
Name Type Description
dataElement string A unique string that identifies the flyout.
items Array.<Object> An array of objects that represent the items in the flyout. Each object should have the following properties:
Properties
Name Type Description
dataElement string A unique string that identifies the flyout item.
label string The text title of the item.
onClick function A function that is called when the item is clicked.
icon string Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
children Array.<UI.Components.Flyout> An array of objects that represents the items in a sub-menu, has the same properties as the parent items property and can be infinitely nested.

Members


dataElement

A unique string that identifies the flyout. This property is ReadOnly.

items

An array of objects that represent the items in the flyout. This property can be used both as a getter and setter.

Methods


setItems(items)

Sets the items of the flyout.
Parameters:
Name Type Description
items Array.<Object> An array of objects that represent the items to be added to the flyout.
Properties
Name Type Description
label string The text title of the item.
onClick function A function that is called when the item is clicked.
icon string Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
children Array.<UI.Components.Flyout> An array of objects that represents the items in a sub-menu, has the same properties as the parent items property and can be infinitely nested.
Example
const flyout = new UI.Components.Flyout({
   dataElement: 'exampleFlyout',
   label: 'Flyout',
 });
 flyout.setItems([
   {
     label: 'Item 1',
     onClick: () => {
       console.log('Item 1 clicked');
     },
   },
 ]);