PrimeFaces SelectOneMenu with icons (custom f:selectItems)

Question

I am trying to display all available FontAwesome icons in a p:selectOneMenu component.

The renderer is supposed to render the icon first, then display the icon's name. A similar example can be found here but is implemented especially for BootStrap: https://mjolnic.com/fontawesome-iconpicker/

 ----------------------------------
|- ICON - | Icon name              |
 ----------------------------------

Unfortunately, the custom columns just do not get rendered. The p:selectOneMenuappears but is rendered as by default.

My picker xhtml page looks as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"> 

<h:head></h:head> 
<body>
    <p:panel>
        <h:form id="iconPicker">
            <p:selectOneMenu id="iconSelectOneMenu"
            value="#{iconController.availableIconStrings}">
                <f:selectItem itemLabel="Choose icon"
                noSelectionOption="true" />
                <f:selectItems
                value="#{categoryController.availableIconStrings}"
                var="_icon" itemValue="#{_icon}"
                itemLabel="#{_icon}" />
                <p:column>
                    <p:button id="iconButton" icon="#{_icon}" />
                </p:column>
                <p:column>
                    <h:outputText value="#{_icon}" />
                </p:column>
            </p:selectOneMenu>
        </h:form>
    </p:panel>
</body> 
</html>

The IconController class:

public class IconController implements Serializable {

    private List<String> availableIconStrings;

    public IconController() { }

    @PostConstruct
    public void init() {
        availableIconStrings = new ArrayList<>();
        availableIconStrings.addAll(Arrays
                .asList("fa-adjust,fa-adn,fa-align-center,fa-align-justify,fa-align-left,"
                        + "fa-align-right,fa-ambulance,fa-anchor,fa-android,fa-angellist,"
                        + "fa-angle-double-down,fa-angle-double-left,fa-angle-double-right,"
                        + "fa-angle-double-up,fa-angle-down,fa-angle-left,fa-angle-right"
                        // Shortened list
                        .split(",")));
    }

    public List<String> getAvailableIconStrings() {
        return availableIconStrings;
    }

    public void setAvailableIconStrings(List<String> availableIconStrings) {
        this.availableIconStrings = availableIconStrings;
    }
}

As you can see, I am trying to render the icon using a p:button. Do I understand it correctly that I need a PrimeFaces component that is able to display icons (e.g. p:button, p:commandButton, p:commandLink) to achieve my goal?

Any help is appreciated. Thanks a lot.

P.S.: Using PrimeFaces 5.3, JSF 2.2 and Mojarra on WildFly 9.0.2

score 2 · Answer 1 · edited May 23 '17 at 11:33

For simplicity and re-usability, I decided to wrap the Strings in an Icon class and not to follow implement a different Renderer class as suggested by BalusC in the workaround (https://stackoverflow.com/a/32740430/2118909).

    public class Icon {

    private String fontIconName;

    public Icon(String fontIconName) {
        this.fontIconName = fontIconName;
    }

    public String getFontIconName() {
        return fontIconName;
    }

    public void setFontIconName(String fontIconName) {
        this.fontIconName = fontIconName;
    }
}

The JSF page looks as follows:

<p:selectOneMenu id="iconSelectOneMenu"
    value="#{iconController.selectedIcon}" var="_icon" converter="#{iconConverter}">
        <f:selectItem itemLabel="Choose icon"
        noSelectionOption="true" />
        <f:selectItems
        value="#{categoryController.availableIcons}" itemValue="#{_icon}"
        itemLabel="#{_icon.fontIconName}" />

        <p:column>
            <i class="fa fa-fw #{_icon.fontIconName}"/>
        </p:column>
        <p:column>
            <h:outputText value="#{_icon.fontIconName}" />
        </p:column>
    </p:selectOneMenu>

Please also note the following:

#{iconController.selectedIcon} now refers to an instance of the Icon class
#{iconController.availableIcons} now refers to a List<Icon> instance
I have added a Converter for the Icon class.
The icon is now rendered in an <i/> element.

Please also note the importance and role of the customContent variable in the SelectOneMenuRenderer.encodePanel(...) method which indicates that you need a var value on the p:selectOneMenu directly (not in the <f:selectItems/> element!) or the renderer will not recognize that there is custom content as it does not evaluate the <f:selectItems/> var attribute.

Why not create an issue in the PF issuelist in github with a patch (pullrequest) so this 'workaround' will not be needed in the future — Kukeltje, Jan 15 '16 at 15:58
@Kukeltje Please see: https://github.com/primefaces/primefaces/issues/1036 (created an issue at least) and hope this helps. — fatdevelops, Jan 18 '16 at 10:20

score 1 · Accepted Answer · edited May 23 '17 at 12:34

Two things:

In order to use p:column in combination with p:selectOneMenu you need to declare the var attribute on the p:selectOneMenu and reference it within your p:column. An example can be found on the PrimeFaces showcase.

So your code should be:

<p:selectOneMenu id="iconSelectOneMenu"
        value="#{iconController.availableIconStrings}" var="ic">
            <f:selectItem itemLabel="Choose icon"
            noSelectionOption="true" />
            <f:selectItems
            value="#{categoryController.availableIconStrings}"
            var="_icon" itemValue="#{_icon}"
            itemLabel="#{_icon}" />

            <p:column>
                <p:button id="iconButton" icon="#{ic}" />
            </p:column>
            <p:column>
                <h:outputText value="#{ic}" />
            </p:column>
        </p:selectOneMenu>

Now, You are facing a bug because you are using a List<String> as explained on this SO question:

So, if the item value is an instance of String, custom content via p:column is totally ignored.

You can find a workaround in the same post: https://stackoverflow.com/a/32740430/2118909

score 0 · Answer 3 · answered Nov 14 '22 at 12:55

0

Use inputGroup

   <div class="ui-inputgroup">
       <div class="ui-inputgroup-addon"><i class="pi pi-user"></i></div>
       <p:inputText placeholder="Username"/>
   </div>

https://www.primefaces.org/showcase/ui/input/inputGroup.xhtml

answered Nov 14 '22 at 12:55

utrucceh

1,076
6
11

The question is about `p:selectOneMenu` – Jasper de Vries Nov 14 '22 at 13:37
Just I add for example, ui-inputgroup compatible with all primeface components, its writed by primeface – utrucceh Nov 15 '22 at 11:03
There actually is an example for `p:selectOneMenu` in the showcase based on a workaround I've provided. See my answer for the workaround and a link to the issue. – Jasper de Vries Nov 15 '22 at 11:27

Jasper de Vries · Answer 4 · 2022-11-15T13:32:57.067

See https://www.primefaces.org/showcase/ui/input/oneMenu.xhtml for an example:

<p:outputLabel value="Icons" />
<h:panelGroup styleClass="ui-inputgroup">
    <h:panelGroup id="icon" styleClass="ui-inputgroup-addon">
        <i class="pi pi-#{selectOneMenuView.icon}"/>
    </h:panelGroup>
    <p:selectOneMenu value="#{selectOneMenuView.icon}" var="item">
        <f:selectItems value="#{['flag','wallet','map','link']}" var="item" itemLabel="#{item}"
            itemValue="#{item}" />
        <p:column><i class="pi pi-#{item}" /> #{item} </p:column>

        <p:ajax update="@parent:@parent:icon" />
    </p:selectOneMenu>
</h:panelGroup>

It is a workaround, yes, but it's the best option currently.

PrimeFaces SelectOneMenu with icons (custom f:selectItems)

4 Answers4