Popover

A Popover is a transient component that shows when the user clicks something with an On Click event handler, such as a Button. A Popover follows the rules of modality, which renders a temporary context to get the user’s attention. The Popover component is only an empty container, able to hold any other UI Component.

It is recommended to give the Popover component a descriptive name, in case of multiple Popovers in a View, to make the configuration of the Open Popover Action Node simpler. The name is used to identify the Popover in the dropdown menu in the Action Node setup.

An example setup of a Popover / Open Popover is showcased in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

Appearance

Show Backdrop

Add a dark overlay colour to the backdrop / background when the popover is open.

Anchor Origin

The point on the anchor component where the Popover will attach to.

Transform Origin

The point on the Popover that will attach to the anchor component.

Event Handlers

On Close

Run an action when the popover is closed. I.e. when having a popover open and you click outside it, the popover is closed and the On Close event handler is triggered.

Placement in the UI

You can place the Popover anywhere in the view, as long as it is not inside a hidden part of the UI. The Popover will open relative to the currently clicked component as an anchor when opened from an App. You may have several Buttons in a View, opening the same Popover when clicked.

You may offset the placement of the Popover by setting the margin in the Property Pane Styles section.

Toggle a Popover design time

The Popover is automatically opened in the UI Designer if a child component is selected in the Application Views section. You may also expand/collapse a Popover design time to reveal its content by clicking Expand/Collapse on the placeholder representing the design time placement of the Popover.

Open a Popover from an App

The Popover is opened by using the Open Popover Action Node

Close a Popover from an App

The Popover is closed by clicking outside of the popover when it's open or by using the Close Popover Action Node.

Warning when copying popovers

If you make a copy of your popover, a new popover is actually created, but with the same name. Please make sure to rename the copied popover and create new actions for opening or closing this new popover.