PrimeFaces Extensions Showcase

CommandPalette

Using the selection AJAX event to handle item selection on the server side.

Right-click here to select a Node action

Nodes

▶Node1

Create Node1 Action1

Create Node1 Action2

▶Node2

Create Node2 Action1

Create Node2 Action2

Source

XHTML page
Managed bean


                <h:panelGroup id="paletteTarget" 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 select a Node action
    </h:panelGroup>

    <pe:commandPalette id="palette2" for="paletteTarget"
                        label="Nodes" filterPlaceholder="Search nodes..." width="260">
        <pe:commandPaletteItem group="Node1" value="1" label="Create Node1 Action1"
                               itemTitle="Creates a new Node1 action"/>
        <pe:commandPaletteItem group="Node1" value="2" label="Create Node1 Action2"
                               itemTitle="Creates another Node1 action"/>
        <pe:commandPaletteItem group="Node2" value="3" label="Create Node2 Action1"
                               itemTitle="Creates a new Node2 action"/>
        <pe:commandPaletteItem group="Node2" value="4" label="Create Node2 Action2"
                               itemTitle="Creates another Node2 action"/>
        <p:ajax event="select" listener="#{commandPaletteController.onItemSelect}"
                update="messages"/>
    </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.