I want to create tabs with progress bar. Something like this:
<p:tabView id="tabs" dynamic="true" cache="false">
<p:tab id="tab1" title="tab1" >
<ui:include src="tab1.xhtml" />
</p:tab>
<p:tab id="tab2" title="tab2" >
<ui:include src="tab2.xhtml" />
</p:tab>
<p:blockUI block="tabs" trigger="tabs">
LOADING
</p:blockUI>
</p:tabView>
But it's not working. Can you help me to correct my mistake?
Try this:
<p:tabView id="tabs">
<p:ajax event="tabChange" onstart="BUI.show()" oncomplete="BUI.hide()" />
<p:tab id="tab1" title="tab1">
<h:outputtext value="TAB 1" />
</p:tab>
<p:tab id="tab2" title="tab2">
<h:outputtext value="TAB 2" />
</p:tab>
</p:tabView>
<p:blockUI widgetVar="BUI" block="tabs">
LOADING
</p:blockUI>
Following code works for me (Primefaces 5.2)
<p:blockUI block="tabs" widgetVar="tabsBlocker">
LOADING
</p:blockUI>
<p:tabView id="tabs" dynamic="true" cache="false"
onTabChange="PF('tabsBlocker').show()"
onTabShow="PF('tabsBlocker').hide()">
<p:tab id="tab1" title="tab1" >
<ui:include src="tab1.xhtml" />
</p:tab>
<p:tab id="tab2" title="tab2" >
<ui:include src="tab2.xhtml" />
</p:tab>
</p:tabView>
Related
I have a 3 layer tab structure in primefaces.First layer contains 2 tabs say Business and Individual.Business tab contains some other tabs.Now the issue is if I click on Individual tab then all the tabs inside Business tab also gets loaded even though there is no dependency between them.
PS : I'm using Primefaces 5.3
Here's my code:
<p:tabView id="i" widgetVar="TabV" prependId="false" cache="false" dynamic="true">
<p:tab title="Business">
<p:tabView id="Busi" prependId="false" cache="false" dynamic="true">
<p:tab title="C&I">
<p:tabView id="CI" prependId="false" cache="false" dynamic="true">
<p:tab title="Business1">
<ui:include src="CI//xyz.xhtml" />
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="CRE">
<p:tabView id="CRE" prependId="false" cache="false" dynamic="true">
<p:tab title="Business2">
<ui:include src="CRE//def.xhtml" />
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="Individual">
<p:tabView id="PFS" prependId="false" cache="false" dynamic="true">
<p:tab title="Individual">
<ui:include src="PFS//abc.xhtml" />
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
My problem is when I put <p:accordionPanel> in another <p:accordionPanel> the second <p:ajax> don't work, I like put
<p:ajax event="tabChange"
listener="#{functionWorkflow.onTabChangeWorkflow}"
update="#all" />
for the first <p:accordionPanel> and
<p:ajax event="tabChange" listener="#{functionWorkflow.onTabChangeStep}" />
for the second <p:accordionPanel> like this:
<h:form id="formFunction">
<p:accordionPanel value="#{functionWorkflow.listWorkflowTemplate}" var="workflowTemplate" activeIndex="null" id="panelWorkflow" dynamic="true">
<p:ajax event="tabChange" listener="#{functionWorkflow.onTabChangeWorkflow}" update="#all" />
<p:tab title="Workflow: #{workflowTemplate.nome}" >
<h:form>
<p:accordionPanel value="#{functionWorkflow.listWorkflowstep}" var="workflowTemplateStep" activeIndex="null" >
<p:tab title="step #{workflowTemplateStep.stepOrder} : " >
<p:accordionPanel value="#{functionWorkflow.logStepContatti}" var="stepContatti" activeIndex="null" dynamic="true" onTabShow="#{functionWorkflow.onTabChangeStep(workflowTemplateStep)}">
<p:ajax event="tabChange" listener="#{functionWorkflow.onTabChangeWorkStep}" update="#all" />
<p:tab title="Contatto: #{stepContatti.contatti.nome} : " >
</p:tab>
</p:accordionPanel>
</p:tab>
</p:accordionPanel>
</h:form>
</p:tab>
</p:accordionPanel>
</h:form>
The result like this,
Finally I would like calling different methods for only level <p:accordionPanel>.
Help me thanks.
I haven't tried to put accordion into accordion before, so there may be a bug, but firstly I would recommend to remove one of the h:forms. You should never put form into form. If this doesn't help, i will run a quick test on this.
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!
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! :)
I have the following view:
<ui:composition template="/templates/cmsLayout.xhtml">
<ui:define name="rightPane">
<div class="rightPane_header">
<p:tabMenu activeIndex="0">
<p:menuitem value="Home" url="/userHome.faces" />
...
</p:tabMenu>
</div >
<div class="rightPaneData">
<h:form>
<p:growl id="growl"/>
<p:accordionPanel activeIndex="0" dynamic="false" cache="false">
<p:tab title="My Document">
<f:event type="preRenderComponent" listener="#{documentController.getMyDocumentsForHome()}" />
<p:dataTable id="homeMyDocTable" var="myDocument" value="#{documentController.myDocuments}" rowKey="#{myDocument.docId}"
selection="#{documentController.selectedDocument}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{documentController.viewDocumentDetailPage}" />
<p:column headerText="Document Number" id="homeMyDocNumber" styleClass="FixedcolumnWidth">
<h:outputText value="#{myDocument.docId}" />
</p:column>
...
</p:dataTable>
<p:commandLink value="More.." rendered="#{documentController.myDocMoreStatus}" action="#{documentController.viewMyDocumentPage}" />
</p:tab>
</p:accordionPanel>
</h:form>
</div>
</ui:define>
</ui:composition>
The <p:commandLink> with value of "More.." works fine in IE, but not in FF/Chrome. How is this caused and how can I solve it?
I tried many things but it's not working, i have a Wizard into a dialog box and when i submit the form and reopen the dialog i found it in the last statues with the last data this is my code :
<p:wizard id="wizForNewIssue" widgetVar="wizNewIsssue"
flowListener="#{managedBeanProjects.onFlowProcess}"
style="width:100%;">
<p:tab id="personal" title="Details">
<p:panel style="width:800px;height:200px">
<h:messages errorClass="error" />
<h:panelGrid id="new0" columns="3">
...........
</h:panelGrid>
<f:facet name="footer">
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{managedBeanProjects.skip}" />
</f:facet>
</p:panel>
</p:tab>
<p:tab id="version" title="Version Details">
<p:panel style="width:800px;height:200px">
............
</p:panel>
</p:tab>
<p:tab id="goConfirm" title="Confirmation">
<p:panel style="width:800px;height:200px">
<h:panelGrid id="final" columns="4">
.............
</h:panelGrid>
<f:facet name="footer">
<p:commandButton value="Submit"
update=":form1:growl :form1:dialogNewIssue "
actionListener="#{managedBeanProjects.newIssue}"
oncomplete="newDialog.hide()" />
</f:facet>
</p:panel>
</p:tab>
</p:wizard>
</p:dialog>
Primefaces wizard has "step" attribute to set "Id of the current step in flow", you can set Id of tab you want to show:
<p:wizard step="#{managedBeanProjects.tabIndex}" id="wizForNewIssue" widgetVar="wizNewIsssue"
flowListener="#{managedBeanProjects.onFlowProcess}"
style="width:100%;">
bean:
if(true){
tabIndex = "personal";
}