SplitButton displays a default command and additional ones in an overlay.
<style type="text/css">
.ui-splitbutton {
margin-right: .5rem;
}
</style>
<div class="card">
<h:form>
<p:growl id="messages"/>
<h5 class="p-mt-0">Basic</h5>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
<h5>Programmatic Menu</h5>
<p:splitButton value="Save" model="#{buttonView.model}" action="#{buttonView.save}"
update="messages" icon="pi pi-save"/>
<h5>Advanced</h5>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" filter="true" filterMatchMode="startsWith">
<p:submenu label="Ajax">
<p:menuitem value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{buttonView.update}" update="messages"
icon="pi pi-refresh"/>
</p:submenu>
<p:submenu label="Non-Ajax">
<p:menuitem value="Delete" action="#{buttonView.delete}" update="messages" ajax="false"
icon="pi pi-times"/>
</p:submenu>
<p:submenu label="Navigations">
<p:menuitem value="External" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:submenu>
<p:divider />
<p:menuitem value="sInternal" icon="pi pi-star"/>
</p:splitButton>
<h5>Severities</h5>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="ui-button-secondary">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="ui-button-success">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="ui-button-info">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="ui-button-warning">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="ui-button-help">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
<p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="ui-button-danger">
<p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
<p:divider />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
</p:splitButton>
</h:form>
</div>
@Named
@RequestScoped
public class ButtonView {
private MenuModel model;
@PostConstruct
public void init() {
model = new DefaultMenuModel();
//First submenu
DefaultMenuItem item = DefaultMenuItem.builder()
.value("External")
.url("http://www.primefaces.org")
.icon("pi pi-home")
.build();
DefaultSubMenu firstSubmenu = DefaultSubMenu.builder()
.label("Dynamic Submenu")
.addElement(item)
.build();
model.getElements().add(firstSubmenu);
//Second submenu
item = DefaultMenuItem.builder()
.id("mniSave")
.value("Save")
.icon("pi pi-save")
.function((i) -> save())
.update("messages")
.build();
DefaultSubMenu secondSubmenu = DefaultSubMenu.builder()
.label("Dynamic Actions")
.addElement(item)
.build();
item = DefaultMenuItem.builder()
.value("Delete")
.icon("pi pi-times")
.command("#{buttonView.delete}")
.ajax(false)
.build();
secondSubmenu.getElements().add(item);
model.getElements().add(secondSubmenu);
}
public MenuModel getModel() {
return model;
}
public String save() {
addMessage("Data saved");
return null;
}
public void update() {
addMessage("Data updated");
}
public void delete() {
addMessage("Data deleted");
}
public void buttonAction() {
addMessage("Welcome to PrimeFaces!!");
}
public void addMessage(String summary) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
FacesContext.getCurrentInstance().addMessage(null, message);
}
}