Conditionally render a <div> based on value of <h:outputText>

Question

I am using jsf primefaces. I want to display an image depending on the value of a specific outputext. If the text value is 'Alarm *' then a div will appear whith a spesific image. If the value is 'Alarm **' then a div with an other image will appear, etc. I tried the code below but it does not work for me.

<h:outputText id="alarmCriticalityValue" value="#{msg[summary.criticality.key]}" />

<c:if test="#{alarmCriticalityValue=='Alarm *'}">
   <div class="alarm1"></div>
</c:if>

How should i implement this idea?

Answer 1

You need to use binding attribute to put the UIComponent instance in the EL scope. The id attribute doesn't do that, on contrary to what you expected.

<h:outputText binding="#{alarmCriticality}" ... />

And then you need to use UIOutput#getValue() to obtain its value attribute.

<c:if test="#{alarmCriticality.value == 'Alarm *'}">

That said, you'd better use rendered attribute here, particularly if #{summary} represents the currently iterated item of a JSF iterating component like <ui:repeat> or <h:dataTable>.

<h:panelGroup layout="block" styleClass="alarm1"
    rendered="#{alarmCriticality.value == 'Alarm *'}" />

See also:

• How does the 'binding' attribute work in JSF? When and how should it be used?
• How to conditionally render plain HTML elements like <div>s?
• JSTL in JSF2 Facelets... makes sense?

---

Unrelated to the concrete problem. It's strange to see the conditional rendering depend on localized text. What if you change the locale and/or the localized text? This is very brittle. You'd better check the bundle key instead.

<h:outputText value="#{msg[summary.criticality.key]}" />
<h:panelGroup layout="block" styleClass="alarm1" 
    rendered="#{summary.criticality.key == 'some.alarm.key'}" />

This way you also don't need to bind the output text anymore.