I'm using the PrimeFaces TabView and would like to know if there is a way to make the tabs appear vertically on the side (left or right, preferably left) instead of horizontally across the top.
If anyone knows of any other way to achieve the desired effect using PrimeFaces or plain JSF, I'll take that too.
Yes its possible. You can use the orientation attribute
PrimeFaces TabView is implemented using jQuery UI Tabs. Have a look at this question Vertical Tabs with jQuery. You could try to over ride the PrimeFaces tab CSS with the answer provided in that question to give you vertical tabs.
This code shows how to manage tabs in TOP-DOWN order (vertically):
<p:tabView orientation="left">
<p:tab title="Tab#1">
Tab#1
</p:tab>
<p:tab title="Tab#2">
Tab#2
</p:tab>
<p:tab title="Tab#3">
Tab#3
</p:tab>
<p:tab title="Tab#4">
Tab#4
</p:tab>
</p:tabView>
And, this code shows how to manage tabs in LEFT-RIGHT or vise-versa order (horizontally):
<p:tabView scrollable="true">
<p:tab title="Tab#1">
Tab#1
</p:tab>
<p:tab title="Tab#2">
Tab#2
</p:tab>
<p:tab title="Tab#3">
Tab#3
</p:tab>
<p:tab title="Tab#4">
Tab#4
</p:tab>
<p:tab title="Tab#5">
Tab#5
</p:tab>
<p:tab title="Tab#6">
Tab#6
</p:tab>
<p:tab title="Tab#7">
Tab#7
</p:tab>
<p:tab title="Tab#8">
Tab#8
</p:tab>
</p:tabView>
I do not believe it is possible according to the documentation, however perhaps you can utilize the Menu component to your advantage?
http://www.primefaces.org/showcase/ui/menu.jsf
I have used the Menu within a Master page to load content into the master page body. Clicking on a specific menu will load the appropriate child page.
Related
I have a requirement, where I have to create tabs. First two tabs are static tabs, next tabs are dynamic based on the records in database table.
When I try to create, only first tabs are coming, remaining tabs are not coming.
Here is my work
<p:tabView id="view1" value="#{bean.values}" var="tab" dynamic="true">
<p:tab id="view11" title="${msgs.ckd_title}">
// first tab content
</p:tab>
<p:tab id="view12" title="${msgs.pc_qsys_title_material}">
// second tab content
</p:tab>
<p:tabView id="view13" value="#{bean.values}" var="tab">
<p:tab id="view3" title="#{tab.label}">
//dynamic tab content
</p:tab>
</p:tabView>
</p:tabView>
I tried with ui:repeat, still no luck
<p:tabView id="supersetTabs"value="#{pcSuperSetReportBean.plantSuperSets}" var="tab">
<p:tab id="provisioninReportBySupplier" title="#{tab.label}">
//dynamic tab content
</p:tab>
</p:tabView>
"Dynamic" implies that bean logic is going to generate variable tab content. So your bean will have to populate the model referred to by value and
something (either an update parameter on a page component, or bean code) will have to tell the page to refresh the tabview supersetTabs.
I'm using PrimeFaces 5.2 and JSF for developing pages but I couldn't add search icon and other links in Accordion panel header?
<p:accordionPanel dynamic="true" cache="true">
<p:tab title="Sample Accordion Panel1 for ABC_UX My Chronical">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText styleClass="UX_FontClass" value="The Story Begins with ABC_UX R and D Works My Chronicle..." />
</h:panelGrid>
</p:tab>
</p:accordionPanel>
How can I use the search and help icons in <p:accordionPanel> header?
I'm almost 100% sure there was an answer here (otherwise it could not be marked as being the target of a duplicate)
No this is not possible. Your best bet is to take the PrimeFaces source. Add an option facet to the tab like the normal panel has and use that.
I'm trying to create multiple accordionPanels.
I tried to include this tag inside repeat elements (e.g. c:forEach).
The accordionPanel is well rendered, but I'm unable to switch from one tab to another.
These are some codes I tried:
<ui:repeat value="#{myBackingBean.myList}" var="o">
<p:accordionPanel dynamic="true" cache="true" multiple="true" widgetVar="accordion">
<p:tab title="Title 1">
#{o.data_one}
</p:tab>
<p:tab title="Title 2">
#{o.data_two}
</p:tab>
</p:accordionPanel>
</ui:repeat>
And also
<c:forEach items"${myBackingBean.myList}" var="o">
<p:accordionPanel dynamic="true" cache="true" multiple="true" widgetVar="accordion">
<p:tab title="Title 1">
#{o.data_one}
</p:tab>
<p:tab title="Title 2">
#{o.data_two}
</p:tab>
</p:accordionPanel>
</ui:repeat>
Both of these codes produces a list of accordionPanels, each with two tabs.
But I'm unable to switch from one tab to another: If I click one tab it does not open nor close (except for the last accordionPanel).
Noteworthy, if I put two or more accordionPanels by hand (without JSF loops) they works.
Also, I've checked the requests the browser sends when I try to open/close a tab. The requests I intercept are like:
<?xml version="1.0" encoding="utf-8"?><partial-response><changes><update id="mainForm:tabView"><![CDATA[
// something that always use the id of the HTML tag of the _last_ accordionPanel
</update></changes></partial-response>
How can I put an <accordionPanel> inside an <ui:repeat> or <c:forEach> so that I can still switch the accordionPanel's tab?
Its the problem with the widgetVar when you put p:accordion in ui:repeat, it will generate Accordion Panel components with different/dynamic Ids but not with different/dynamic widgetVar when you explicitly specify widgetVar like you're doing in your code.
Which is basically name to Javascript Object to access the Client side Api functions of p:accordion.
So If you are not using that widgetVar of p:accordions anywhere, Remove widgetVar attribute, then the widgetVar will be generated dynamically.
If you still want to use widgetVar, give dynamic name yourself, for example:
widgetVar="accordion_#{o.data_one}"
Note: I tried the above strategy with only on ui:repeat.
Using:Primefaces 3.5 and JSF 2.1.13 and its working for me.
I have next code:
<p:layoutUnit position="center" size="50%" styleClass="nestedUnit">
<p:tabView id="tableTabView>
<p:tab title="Inbox">
<h:form id="tableForm">
<p:dataTable id="tableMsg">
//data
</p:dataTable>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layout>
Also I have some button, which removing element from table and update It. But how I can update this table? Which arguments should be in update? I'm tried update=":tableForm" and update=":tableTabView:tableForm" and update=":tableTabView" but not results. Where I was wrong?
Open firebug or developer tools in your web browser. See what value is the component aquiring at client side and put that id in your update attribute.
I'm using Primefaces 3.4 (also tried 3.3) and Mojarra 2.1.7. But I have a problem updating my dynamical tabs within a p:tabView.
I have 2 buttons which should add an additional tab. The first button is outside the p:tabView. When clicking this button, the backing bean is called, the p:tabView is updated, and the new tab is shown. But when I click the second button, which is inside a tab of that tabView, the backing bean is called, but the tabView is NOT updated.
This lack of updating occures only in dynamic tabs. When I modify the given example to have only one tab, and displaying a value which changes when clicking the buttons, the tabView is updated by both buttons, and the new Value is shown. So it is an problem only occuring in dynamic tabs.
Here is my code.
<f:view contentType="text/html">
<h:form>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update=":ApplicationTab"/>
</h:form>
<p:tabView id="ApplicationTab" cache="false" dynamic="false" var="tab" value="#{idTestBean.tabList}">
<p:tab title="tab" closable="false" >
<p:panel>
<h:form>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update=":ApplicationTab"/>
</h:form>
#{idTestBean.count}
</p:panel>
</p:tab>
</p:tabView>
</f:view>
The different tabs contains separate forms that needed to be submitted separate. therefore I had the approach of more than one form.
Well this must do the trick:
<f:view contentType="text/html">
<h:form>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update="#form"/>
<p:tabView id="ApplicationTab" cache="false" dynamic="false" var="tab" value="#{idTestBean.tabList}">
<p:tab title="tab" closable="false" >
<p:panel>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update="#form"/>
#{idTestBean.count}
</p:panel>
</p:tab>
</p:tabView>
</h:form>
</f:view>
Today i did the same problem too, I had a dynamic tabview, and inside tabs, there're some panels that needed to be updated when tab changes, so what i did was, i added the p:ajax on event TabChange, and in the update attribute, i added the form id and tabviewId like this:
:formID:tabViewID
and it worked at last.
Just so you know.