Apryse WebViewer

Namespace: Flyouts

UI. Flyouts

Namespace used to add, remove, and interact with flyouts in the UI

Example

WebViewer(...).then(function(instance) {
 instance.UI.Flyouts.setActiveFlyout('customFlyout');
});

Methods

<static> addFlyouts(flyoutList)

Adds a list of UI.Components.Flyout instances to the UI
Parameters:
Name Type Description
flyoutList Array.<UI.Components.Flyout> Array of flyouts to add
Example
WebViewer(...).then(function(instance) {
 const flyout = new instance.UI.Components.Flyout({
   dataElement: 'customFlyout',
   draggable: true,
   items: [{
     label: 'Custom Flyout Item',
     onClick: () => console.log('Custom Flyout Item clicked'),
     icon: 'icon-save',
   }],
 });
 instance.UI.Flyouts.addFlyouts([ flyout ]);
});

<static> getAllFlyouts()

Returns:
Array of all flyouts registered with the UI
Type
Array.<UI.Components.Flyout>

<static> getFlyout(dataElement)

Parameters:
Name Type Description
dataElement string Data element of the flyout to get
Returns:
Flyout with the given data element
Type
UI.Components.Flyout

<static> removeFlyout(dataElement)

Removes flyout from the Flyout List
Parameters:
Name Type Description
dataElement string Data element of the flyout to remove
Example
WebViewer(...).then(function(instance) {
 instance.UI.Flyouts.removeFlyout('customFlyout');
});

<static> setActiveFlyout(dataElement)

Sets the active flyout, set to null to hide the flyout
Parameters:
Name Type Description
dataElement string Data element of the flyout to set as active, or null to hide the active flyout
Example
WebViewer(...).then(function(instance) {
 instance.UI.Flyouts.setActiveFlyout('customFlyout');
});

<static> setFlyoutPosition(position)

Sets the position of the active flyout, (use UI.Flyouts.setActiveFlyout to show the flyout) Position is relative to the root element of WebViewer Coordinates going out of the WebViewer UI will be clamped
Parameters:
Name Type Description
position Object Position of the flyout
Properties
Name Type Description
x number X position of the flyout
y number Y position of the flyout
Example
WebViewer(...).then(function(instance) {
 instance.UI.Flyouts.setFlyoutPosition({ x: 100, y: 100 });
 instance.UI.Flyouts.setActiveFlyout('customFlyout');
});