PrimeFaces Extensions Showcase

CommandPalette

Basic usage with right-click trigger and grouped items.

Right-click here to open the CommandPalette

Actions

▶File

New File

Open File

Save

Save As...

▶Edit

Undo

Redo

Cut

Copy

Paste

▶View

Zoom In

Zoom Out

Fullscreen

Source

XHTML page
Managed bean


                <h:panelGroup id="commandPaletteTarget" layout="block"
                  style="border:2px solid #c8c8c8; border-radius:3px; padding:40px; text-align:center; cursor:context-menu;
                         background:#f9f9f9; font-size:14px; color:#555; user-select:none;">
        Right-click here to open the CommandPalette
    </h:panelGroup>

    <pe:commandPalette id="palette" for="commandPaletteTarget"
                        label="Actions" filterPlaceholder="Search actions..." width="260" height="350">
        <pe:commandPaletteItem group="File" value="new" label="New File"/>
        <pe:commandPaletteItem group="File" value="open" label="Open File"/>
        <pe:commandPaletteItem group="File" value="save" label="Save"/>
        <pe:commandPaletteItem group="File" value="saveAs" label="Save As..."/>
        <pe:commandPaletteItem group="Edit" value="undo" label="Undo"/>
        <pe:commandPaletteItem group="Edit" value="redo" label="Redo"/>
        <pe:commandPaletteItem group="Edit" value="cut" label="Cut"/>
        <pe:commandPaletteItem group="Edit" value="copy" label="Copy"/>
        <pe:commandPaletteItem group="Edit" value="paste" label="Paste"/>
        <pe:commandPaletteItem group="View" value="zoomIn" label="Zoom In"/>
        <pe:commandPaletteItem group="View" value="zoomOut" label="Zoom Out"/>
        <pe:commandPaletteItem group="View" value="fullscreen" label="Fullscreen"/>
    </pe:commandPalette>


                @Named
@ViewScoped
public class CommandPaletteController implements Serializable {

    private static final long serialVersionUID = 1L;

    public void onItemSelect(final SelectEvent<CommandPaletteSelection> event) {
        final CommandPaletteSelection selection = event.getObject();
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
                    "Item Selected",
                    "Group: " + selection.getGroup()
                                + ", Value: " + selection.getValue()
                                + ", Label: " + selection.getLabel());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

}

Use Cases

Documentation pe:commandPalette

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when Set false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
for	ID of the target component that triggers the command palette on right-click.
label	Header label text displayed at the top of the palette.
filterPlaceholder	Placeholder text for the search/filter input. Default is "Search...".
showHeader	Whether to show the header section. Default is true.
showFilter	Whether to show the filter/search input. Default is true.
onSelect	Client-side callback to execute when an item is selected. Signature: function(option).
width	Width of the palette in pixels or a CSS value. Default is 280.
height	Maximum height of the palette in pixels or a CSS value. Default is 400.
triggerEvent	Event type that triggers the palette. Default is contextmenu (right-click).
style	Inline style of the component.
styleClass	Style class of the component.