Popover Menu

The Popover Menu is a UI component that lets you show a contextual menu or extra options when a user clicks or hovers on the button. Unlike a regular menu, the popover menu appears as a floating panel that’s anchored to the trigger element.

Why use it?

• To provide a compact set of actions tied to a button, icon, or card.
• To display contextual options related to a selected record, row, or item.
• Improves user experience with a lightweight, floating menu instead of cluttered buttons.

Menu

Property	Value	Description
Button label	String	The text displayed on the menu trigger button.
Button type	Primary / Outline	Defines the visual style of the trigger button.
Show menu	On hover / On click	Controls how the menu opens.

Options

Allows you to add options to the Popover Menu component field. You can click on + Add new option and add options manually or enable Dynamic options and enter the options using code.

Example Code for Dynamic Options

    {{
        [
            {
                "label":"option1",
                "description":"",
                "value":"1",
                "icon":"IconBolt",
                "iconVisibility":true,
                "disable":false,
                "visible":true
            },
            {
                "label":"option2",
                "description":"",
                "value":"2",
                "icon":"IconBulb",
                "iconVisibility":false,
                "disable":true,
                "visible":true
            },
            {
                "label":"option3",
                "description":"This is an option",
                "value":"3",
                "icon":"IconTag",
                "iconVisibility":false,
                "disable":false,
                "visible":true
            }
        ]
    }}

Options Loading State allows you to add a loading state to the dynamically generated options. You can enable or disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Events

Event	Description
On select	Triggers whenever an option is selected.

info

Check Action Reference docs to get detailed information about all the Actions.

Component Specific Actions (CSA)

The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.

Action	Description	RunJS Query
setVisibility( )	Sets the visibility of the component.	components.popovermenu1.setVisibility()
setLoading( )	Sets the loading state of the component.	components.popovermenu1.setLoading()
setDisable( )	Disables the component.	components.popovermenu1.setDisable()

Exposed Variables

Variable	Description	How To Access
label	Holds the label name of the component.	{{components.popovermenu1.label}}
options	Holds all the option values of the component in array form.	{{components.popovermenu1.options}}
lastClickedOption	Holds the value of the last clicked option.	{{components.popovermenu1.lastClickedOption}}
isLoading	Indicates if the component is loading.	{{components.popovermenu1.isLoading}}
isVisible	Indicates if the component is visible.	{{components.popovermenu1.isVisible}}
isDisabled	Indicates if the component is disabled.	{{components.popovermenu1.isDisabled}}

Additional Actions

Action	Description	Configuration Options
Loading state	Enables a loading spinner, often used with isLoading to indicate progress. Toggle or set dynamically.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility	Controls component visibility. Toggle or set dynamically.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Disable	Enables or disables the component. Toggle or set dynamically.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip	Provides additional information on hover. Set a string value for display.	String (e.g., Select an option. ).

Devices

Property	Description	Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Menu

Property	Description	Configuration Options
Background	Sets the background color of the popover menu.	Color picker / HEX / RGBA / Custom Themes
Text	Defines the text color of labels inside the menu.	Color picker / HEX / RGBA / Custom Themes
Border	Customizes the border color of the menu container.	Color picker / HEX / RGBA / Custom Themes
Loader	Sets the color of the loader.	Color picker / HEX / RGBA / Custom Themes
Icon	Allows you to select an icon for the trigger button.	Select icon, enable/disable icon visibility
Icon color	Adjusts the icon color and its alignment (left or right).	Color picker / Alignment options
Border Radius	Rounds the corners of the menu container.	Pixel values / Predefined radius options
Box shadow	Adds shadow effects to the menu for depth.	Color picker / HEX / RGBA / Custom Themes

Options

Property	Description	Configuration Options
Label	Sets the color for the display text for the menu option.	Color picker / HEX / RGBA / Custom Themes
Icon color	Sets the color of the option’s icon.	Color picker / HEX / RGBA / Custom Themes
Description	Sets the color for the optional helper text shown under the main label.	Color picker / HEX / RGBA / Custom Themes