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.
Related
I am using Primefaces 6.1 and if I do this in a plain xhtml page, it actually works fine. However, my problem is that I need to adopt the corporate look and feel and I am not enough of a CSS guru to know where to start debugging the issue that results from the inherited styles that cause the carousel to render all content in a list on the first "page", clicking on the other tabs shows empty content. I am trying to have each tab contain an iframe so I though that might be the problem. So, I tried simply using a simple example, slightly modified from the primefaces showcase:
<p:carousel numVisible="1" headerText="Tabs" style="margin-bottom:0" >
<p:tab title="Content I">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText
value="content 1" />
</h:panelGrid>
</p:tab>
<p:tab title="Content II">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 2" />
</h:panelGrid>
</p:tab>
<p:tab title="Content III">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 3" />
</h:panelGrid>
</p:tab>
</p:carousel>
However, the output still gets rendered like this...
Carousel screenshot
How do I get it to use the proper style shown in the Primefaces showcase and/or debug the problematic inherited CSS from the corporate CSS templates? Is there a way to force the standard primefaces function local to my application that would override the inherited issues?
I am using primefaces 6, JSf2.0, jstl 1.2 on Weblogic server.
I have an xhtml page where i want to display panels dynamically inside a Tab. The panels should behave like a Dashboard, so i have put the panels inside a dashboard tag.
My problem is that c:forEach is not able to get values from the items I want to iterate. It is confirmed that my "items="${cg.charts}" is of List type and does have objects, but the panels dont appear in UI, as well as there are not exception raised. Any leads ?
<p:tabView id="tabViewId"
value="#{userdashboard.chartGroupsList}" var="cg" onTabShow="reflowChart()" >
<p:tab title="#{cg.groupName}" >
<p:dashboard model="#{userdashboard.model}" >
<p:ajax event="reorder" listener="#{userdashboard.handleReorder}" />
<c:forEach var="c" items="${cg.charts}">
<p:panel id="pnlDivId#{c.id}" header="#{c.name}">hello</p:panel>
</c:forEach>
</p:dashboard>
</p:tab>
</p:tabView>
I am looking for solution that p:overlayPanel content should update it self while clicking commendButton or commendLink. But its showing blank white p:overlayPanel when i click the button. The updating with the p:overlayPanel id in that button or link. I have tried many ways nothing worked out. Is my code wrong?
Please suggest some solution.
Here is my code :
<ui:repeat id="profiles" value="#{items.lstProfiles}" var="profile">
<p:commandLink id="profileLink" value="show" update="moviePanel"
actionListener="#{dashBoardController.showProfileOverlay}"/>
<p:overlayPanel id="moviePanel" for="profileLink" hideEffect="fade"
dynamic="true" style="width:300px; height: 150px;">
<h:panelGrid columns="2">
<h:outputText value="Name : "/>
<h:outputText value="#{dashBoardController.selectedProfile.name}"/>
</h:panelGrid>
</p:overlayPanel>
</ui:repeat>
Usually dynamic="true" should do the job but some times it fails.So to update the contents inside the Overlay.
There are many ways to do this by tweaking Jquery.
Simplest one I can think of is:
Since ui:repeat generates dynamic ID for p:overlayPanels you can update by providing unique css class name from every iteration.
In Primefaces you can select a component using css class also using: #(.myclass).
And so you can update that component also:- update="#(.mystyle)"
Example:
<h:form>
<ui:repeat var="patient" value="#{dataCenter.patientList}">
<p:commandLink value="#{patient.firstName}" id="patientNameLnk" update="#(.overlay-class-#{patient.patientId})"/><br/>
<p:overlayPanel for="patientNameLnk">
<h:panelGroup styleClass="overlay-class-#{patient.patientId}">
#{patient.firstName}
#{patient.lastName}
#{patient.dob}
</h:panelGroup>
</p:overlayPanel>
</ui:repeat>
</h:form>
In the above example css class name for every h:panelGroup will be generated as overlay-class-<PATIENT_ID> so every h:panelGroup will have unique class name(if patientId is unique).
Note: Note that I'm updating h:panelGroup inside p:overlayPanel because if you update p:overlayPanel then it might start flickering(it happened to me while executing above example).
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'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.