Popover

Live demo

Renders a popover.

Node name : popover

Attributes

Attribute	Type	Required	Default value	Description
overlay-id	string	true if target is not defined		A unique identifier allowing the popover to be opened with a toggle overlay button or by code.
target	object	false		The object to which the popover will be attached when displayed. If not set, the popover is attached to the button that triggers its display.

Warning

If multiple popover components with the same overlay-id exist in a screen, they will all be opened at the same time when opening one of them.
This can happen when reusing UI components that contain a popover.
For this reason, in UI components, we encourage you to bind the overlay-id attribute to a field with a unique value (for example a GUID) or to open the popover by code using the target attribute.

Example

With a UI view action

The following example shows how to toggle a popover with a UI view action.

<button type="action" action="ToggleDetails" />
<popover overlay-id="DetailsPopover">
  <text>Details</text>
</popover>

The UI view action is of type ToggleOverlay and has the DetailsPopover overlay identifier.

With a button

Using a toggle-overlay button

The following example shows how to toggle a popover with a toggle-overlay button.

<button type="toggle-overlay" overlay-id="DetailsPopover" label="Open details" />
<popover overlay-id="DetailsPopover">
  <text>Details</text>
</popover>

This approach is the simplest way to toggle a popover without requiring any code.

Using a method button

The following example shows how to toggle a popover with a method button.

<button type="method" method-name="OpenDetailsPopover" label="Open details" />
<popover overlay-id="DetailsPopover">
  <text>Details</text>
</popover>

The OpenDetailsPopover UI view method is called when the button is clicked. It has the following code:

ToggleOverlay("DetailsPopover");

Note

The ToggleOverlay method with ToggleOverlayOptions argument (ToggleOverlay(new ToggleOverlayOptions("DetailsPopover"))) doesn't work in this context. Use ToggleOverlay("DetailsPopover") instead.

With an event

The following example shows how to toggle the popover with the target attribute.

<text event:click="OpenDetailsPopover">Open details</text>
<popover overlay-id="DetailsPopover">
  <text>Details</text>
</popover>

In this example, the OpenDetailsPopover UI view method is called. It has one parameter named args of type IUIEventArgs and has the following code:

ToggleOverlay(new ToggleOverlayOptions("DetailsPopover").WithTarget(args.CurrentTarget));

With a target

The following example shows how to toggle the popover with the target attribute.

<text event:click="OpenDetailsPopover">Open details</text>
<popover target="@Fields.DetailsPopoverTarget">
  <text>Details</text>
</popover>

By default, the Fields.DetailsPopoverTarget UI view field (object?) is null.

The OpenDetailsPopover UI view method is called. It has one parameter named args of type IUIEventArgs and has the following code:

Fields.DetailsPopoverTarget = Fields.DetailsPopoverTarget == null ? args.CurrentTarget : null;

When the user clicks on the text, the field is set to event.Target which triggers the opening of the popover. When the user clicks on the text a second time, the field is set to null which hides the popover. Also, when the user clicks outside of the popover, the popover is hidden and the field is automatically reset to null.