Search code examples
htmljsf-2conditional-rendering

How to conditionally render plain HTML elements like <div>s?

I'm trying to implement a composite component which either displays the information details of a user in plain text or displays them through editable input texts fields if the desired details are those of the user currently connected.

I know that al UI Components can be rendered via the rendered attribute but what about the ones which are not UI Components (for example divs)

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

I know that the div doesn't have the rendered attribute and probably I'm not taknig the right approach at all. I could very easily use an JSTL tag but I want to avoid that.

Solution

  • The right JSF component to represent a HTML <div> element is the <h:panelGroup> with the layout attribute set to block. So, this should do:

    <h:panelGroup layout="block" ... rendered="#{someCondition}">
    ...
</h:panelGroup>

    Alternatively, wrap it in an <ui:fragment>:

    <ui:fragment rendered="#{someCondition}">
    <div>
        ...
    </div>
</ui:fragment>

    Or when you're already on JSF 2.2+, make it a passthrough element:

    <div jsf:rendered="#{someCondition}">

</div>

    Do note that when you'd like to ajax-update a conditionally rendered component, then you should be ajax-updating its parent component instead.

    See also: