0

I'm using <ui:composition, but was wondering if there would be a way for me to edit a small part of one of my layout components without doing <ui:define> on every individual page. In my case I am creating a sidebar, and just want to change the active class of an li.

commonlayout.xhtml

...
<h:body>
    <ui:insert name="sidebar">
        <ui:include src="commonsidebar.xhtml"/>
    </ui:insert>
</h:body>
...

commonsidebar.xhtml

...
<ui:composition>
    <div id="sidebar">
        <a href="#" class="visible-phone">
            <i class="icon icon-home"></i> Dashboard
        </a>
        <ul>
            <li class="active">
                <a href="index.xhtml">
                    <i class="icon icon-home"></i> <span>Dashboard</span>
                </a> 
            </li>
            <li>
                <a href="seconpage.xhtml">
                    <i class="icon icon-def"></i> <span>Second Page</span>
                </a>
            </li>
        </ul>
    <div id="sidebar">
</ui:composition>
...

secondpage.xhtml

...
<ui:composition template="commonlayout.xhtml">
    ?
</ui:composition>
...

I would like to keep my sidebar the same in my second page, but just change the set the correct <li> to active, and as far as I am aware, <ui:define name="sidebar"> would make me rewrite the entire thing. Is there any way in JSF for me to do this?

Thanks in advance!

Defa1t
  • 141
  • 2
  • 10

1 Answers1

0

Try something like this:

<li class="#{view.viewId eq '/seconpage.xhtml' ? 'active' : ''}">

Highlighting current page as active link in included navigation menu

Community
  • 1
  • 1
Alan Rusnak
  • 201
  • 1
  • 4