PopupButton

PopupButton is a Button with a popup. Popup may contain a drop-down list of actions or custom content.

Component’s XML-name: popupButton.

Basics

PopupButton can contain text specified in the caption and icon attributes, or both. You can define a tooltip in the description attribute. The figure below shows different types of buttons:

Elements

actions

This element specifies the drop-down actions list.

Only the caption, enable, and visible properties are displayed. The description and shortcut properties are ignored. Handling of the icon property depends on the showActionIcons attribute of the component. By default, showActionIcons=false.

Below is an example of a PopupButton with a drop-down list containing two actions:

<popupButton id="popupButton1"
             caption="Save"
             showActionIcons="true">
    <actions>
        <action id="popupAction1"
                caption="Save as .doc"
                icon="FILE_WORD_O"/>
        <action id="popupAction2"
                caption="Save as .pdf"
                icon="FILE_PDF_O"/>
    </actions>
</popupButton>

You can create the actions from scratch or use the actions already defined for any element in the current screen. In the example below, the personsPopupButton component uses actions defined in personsTable:

<groupTable id="personsTable"
            width="100%"
            dataContainer="personsDc">
    <columns>
        <column id="name"/>
        <column id="image"/>
    </columns>
    <actions>
        <action id="create" type="create"/>
        <action id="edit" type="edit"/>
        <action id="remove" type="remove"/>
    </actions>
</groupTable>

<popupButton id="personsPopupButton"
             caption="Person">
    <actions>
        <action id="personsTable.create"/>
        <action id="personsTable.edit"/>
        <action id="personsTable.remove"/>
    </actions>
</popupButton>

This element sets custom inner content for the PopupButton. Actions are ignored if a custom popup content is set.

Below is an example of a custom popup layout:

<popupButton id="customPopupButton"
             caption="Settings"
             icon="GEARS"
             popupOpenDirection="BOTTOM_CENTER">
    <popup>
        <vbox margin="true"
              spacing="true"
              width="260px">
            <label align="MIDDLE_CENTER"
                   stylename="h2"
                   value="Settings"/>
            <progressBar caption="Progress"
                         width="100%"/>
            <textField id="textField"
                       caption="Comment"
                       width="100%"/>
            <comboBox id="comboBox"
                      caption="Status"
                      optionsEnum="ui.ex1.entity.Status"
                      width="100%"/>
            <hbox spacing="true">
                <button id="saveAndCloseButton"
                        caption="Save"
                        icon="SAVE"/>
                <button id="cancelAndCloseButton"
                        caption="Cancel"
                        icon="REMOVE"/>
            </hbox>
        </vbox>
    </popup>
</popupButton>

Attributes

autoClose - defines if the popup should be closed automatically after the action triggering.

showActionIcons - enables displaying icons for action buttons.

You can track the popup visibility changes by subscribing to the corresponding event:

@Autowired
protected Notifications notifications;

@Subscribe("popupButton")
public void onPopupButtonPopupVisibility(PopupButton.PopupVisibilityEvent event) {
    notifications.create()
            .withCaption("Popup visibility changed")
            .show();
}

Also, you can add a listener for this event using the component’s API, for example:

@Autowired
protected PopupButton popupButton;
@Autowired
protected Notifications notifications;

@Subscribe
protected void onInit(InitEvent event) {
    popupButton.addPopupVisibilityListener(popupVisibilityEvent ->
            notifications.create()
                    .withCaption("Popup visibility changed")
                    .show());
}

Appearance

The PopupButton component’s appearance can be customized using SCSS variables with $jmix-popupbutton-* prefix. You can change these variables in the visual editor after creating a theme extension or a custom theme.

All XML Attributes

align - autoClose - box.expandRatio - caption - captionAsHtml - closePopupOnOutsideClick - colspan - css - description - descriptionAsHtml - enable - height - htmlSanitizerEnabled - icon - id - menuWidth - popupOpenDirection - responsive - rowspan - showActionIcons - stylename - tabIndex - togglePopupVisibilityOnClick - visible - width