PrimeFaces CommandButton: Dynamically enable/disable icon

7
votes

PrimeFaces's CommandButton allows to specify an icon:

<p:commandButton value="Press me" icon="redBall" ... />

However, I need to enable/disable the icon depending on a JSF managed bean property.

I tried

<p:commandButton value="Press me" icon="#{bean.iconClass}" ... />

This works for choosing different icons, but does not allow to disable the icon altogether (i.e. get the same rendering like without the icon= attribute). I can return an empty string in getIconClass(), but PrimeFaces will still render the extra <span> for the icon inside the button, and CSS styling causes this span to be visible with a default icon.

Is there a way to tell PrimeFaces "I want no icon at all" (other than taking out the icon= attribute altogether)?

2
jsfprimefaces
try to return null in getIconClass() - Daniel
@Daniel: That does not appear to work. If I do that, the default icon is still shown. Apparently, the null gets translated to "" inside JSF. - sleske

2 Answers

7
votes

I can think of 2 ways without duplicating the button.

  1. Supply the icon as <f:attribute> which is conditionally added by <c:if>.

    <p:commandButton ...>
    <c:if test="#{not empty bean.icon}"><f:attribute name="icon" value="#{bean.icon}" /></c:if>
</p:commandButton>

  2. Set a style class which hides the icon altogether and supply it conditionally.

    .hideicon .ui-icon { display: none; }
.hideicon .ui-button-text { padding-left: 1em; }

    with

    <p:commandButton ... icon="#{bean.icon}" styleClass="#{empty bean.icon ? 'hideicon' : ''}" />
2
votes

A lame workaround would be to have 2 commandbuttons. One with icon definition and one without. And then render the correct one.