Displaying checkbox list in JSF/PrimeFaces

Question

I'm displaying checkboxes using <p:selectManyCheckbox> as follows.

<p:selectManyCheckbox id="colourList" value="#{productColourManagedBean.colours}" layout="grid" columns="4">
    <f:selectItems var="colour" 
                   value="#{productColourManagedBean.colourList}" 
                   itemLabel="#{colour.colourHex}" 
                   itemValue="#{colour.colourId}"/>
</p:selectManyCheckbox>

It displays a list of checkboxes in a grid layout based on the list - List<Colour> supplied from its corresponding JSF managed bean.

It shows colourHex as checkbox label. I need to display the actual colour as checkbox label so that the list can appear something like the following.

---

This can be achieved by using a container tag like <div> something like the following.

<div style="background-color:##{colour.colourHex}" 
     title="name : #{colour.colourName} Hex : #{colour.colourHex}">

     &nbsp;&nbsp;
</div>

But how can this be achieved by using <p:selectManyCheckbox> or something else?

Answer 1

You can achieve this with a <p:selectManyMenu> with var and showCheckbox attributes set. The var attribute allows defining custom content by a nested <p:column>. The showCheckbox attribtue can be set to true to get a checkbox column. See also the "advanced" example in its showcase.

Here's a kickoff example (with hints how you should actually be naming those properties, there's no need to repeat the entity's name in the property name):

<p:selectManyMenu value="#{bean.selectedColors}" var="color" showCheckbox="true" converter="omnifaces.SelectItemsConverter">
    <f:selectItems value="#{bean.availableColors}" var="c" itemValue="#{c}" itemLabel="#{c.name}" />
    <p:column>  
        <div style="width: 100px; height: 20px; background-color:##{color.hex}; border: 1px solid black;" 
            title="Name: #{color.name} Hex: #{color.hex}" />
    </p:column>  
</p:selectManyMenu>

Bean is rather straightforward:

private List<Color> selectedColors;
private List<Color> availableColors;

// ...

Here's how it look like for me with 5 basic colors: