Html – How to conditionally render plain HTML elements like
s

conditional-renderinghtmljsf-2

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.

Best 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: