jsf:rendered in passthrough <li> has no effect, it still renders its output

Question

I am doing a page that will show some components if the Staff is an Admin.

I am using html5 with bootstrap with primefaces 5.0

Based on what I know in JSF, you can control whether to render a component by using the rendered attribute.

Since my component is in html5, I used the jsf:rendered instead.

For my code, I used jsf:rendered="#{staffBean.staff.accountStatus =='ADMIN'}" and the value inside staffBean.staff.accountStatus is not ADMIN.

I have attached part of my code below.

<li class="active" jsf:rendered="#{staffBean.staff.accountStatus =='ADMIN'}">
    <a href="index.html"><i class="fa fa-user"></i> <span class="nav-label">Account Management</span> <span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li class="active"><a href="createStaff.xhtml">Create Staff</a></li>
        <li><a href="removeStaff.xhtml">Delete Staff</a></li>
        <li><a href="updateStaff.xhtml">Update Staff</a></li>
    </ul>
</li>

Any idea on why my jsf:rendered="#{staffBean.staff.accountStatus =='ADMIN'}" still renders component's output?

Answer 1

That's because the <li> is nowhere registered as an existing JSF component. JSF passthrough elements works only on elements which also have a JSF component equivalent, such as <form>, <input>, <a>, etc (which have <h:form>, <h:inputText>, <h:xxxLink> equivalents). They are namely "under the covers" converted to true JSF components.

Better use <ui:fragment> instead.

<ui:fragment rendered="#{staffBean.staff.accountStatus eq 'ADMIN'}">
    <li class="active">
        ...
    </li>
</ui:fragment>

See also:

• Jakarta EE tutorial - Using passthrough elements - contains a table which elements have JSF component equivalents