How to create dynamic tabs using include with PrimeFaces

Question

I try to add tabs dynamically using ui:include, but I can not get the good behavior!
If I look at the HTML response, the content is there, but does not appear in the tab.
If i try to open a 2nd tab with an other content the html result contain the same content as the 1st tab.

A tab is added with the following command:

<p:commandLink id="appC1" update=":tabview" actionListener="#{tview.sideBarAction}"
value="App 1">
    <f:param id="c1ParamId" name="pageViewId" value="App1" />
</p:commandLink>

and the tabview:

<p:tabView id="tabview" value="#{tview.tabs}" var="tab">
<p:tab title="#{tab.title}" closable="true">
    <p:panel id="myPanel">
    <ui:include src="#{tab.content}"/>
    </p:panel>
</p:tab>
</p:tabView>

I tried to do this programmatically, but I have not had best results!

user3309342 user3309342 · Accepted Answer · 2014-02-14T08:12:18

Try with c:forEach like that:

<p:tabView id="tabPanel" activeIndex="#{tabView.activeIndex}"
                       style="width: 100%; height: 100% !important;">
                <p:ajax event="tabClose" listener="#{tabView.onTabClose}"/>
                <p:ajax event="tabChange" listener="#{tabView.onTabChange}"/>
    <c:forEach items="#{tabView.tabs}" var="tab">
          <p:tab titletip="#{tab.id}" title="#{tab.label}" closable="true">
              <ui:include src="#{tab.url}"/>
          </p:tab>
    </c:forEach>

</p:tabView>

Good luck! :)

How to create dynamic tabs using include with PrimeFaces

1 Answers