I need to include help icon or button inside primefaces tabView header beside the tabs
<p:tabView >
<p:tab title="title1">
<p:tab title="title2">
<p:tab title="title3">
<span class="ui-icon-help" style="position: absolute; right: 6px;" id="desc" />
</p:tabView>
Related
Primefaces 7 on JBoss 7.3
I have an application which allows users to click on entries in a datatable to display details of the entity in a dialog box:
<p:column headerText="XTAMessageID" id="msgIdCol" width="350" sortBy="#{nachricht.messageId}" styleClass="column">
<p:commandLink value="#{nachricht.messageId}" id="transportReportLink"
oncomplete="PF('transportDialogDC').show()"
action="#{detailController.showTransportReport(nachricht)}"
update="#form:transportDialogDC"></p:commandLink>
<p:tooltip for="transportReportLink" value="Transport Report anzeigen" position="top"></p:tooltip>
</p:column>
<p:dialog id="transportDialogDC" widgetVar="transportDialogDC" styleClass="messageDialog">
<p:growl life="10000"></p:growl>
<p>MessageId: #{detailController.messagedId} von: #{detailController.absender} an: #{detailController.empfaenger}</p>
<p:panelGrid columns="2" style="border-width:0px !important">
<p:panel style="padding: 0px; margin: 0px; border-width:0px !important">
<h4>Transport Report</h4>
<h:inputTextarea value="#{detailController.transportReportXML}" readonly="true" styleClass="messageDialogTextArea" cols="100" rows="25"/>
</p:panel>
…..
In Chrome this works, however in Firefox (98) sometimes the dialog is displayed empty without calling the detailController.showTransportReport(nachricht) method. Nothing happens in the backend....
This behavior persists for a few trials. After reloading the pages the dialog works again for a random number of times.
Any ideas what might cause this?
Thanks,
Hans
I am developing a project using primefaces.
In that, I used one p:panel(in user.xhtml page) inside the p:dialog and I set showHeader="false" to the p:dialog.
For that, I need to drag the p:dialog when I click and drag on the p:panel, which is included inside the p:dialog.
Sample Code:
<p:dialog showHeader="false">
<ui:include src="${model.dynamicPage}"/>
</p:dialog>
user.xhtml
<h:form id="userForm">
<p:panel header="UserPanel">
.......
</p:panel>
</h:form>
Any Idea?
Use the draggable component on a panel instead of a dialog
<p:panel id="pnl" header="UserPanel">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" />
and define the panel dimensions with some css:
.ui-panel {
margin: 15px;
height: 200px;
width: 300px;
}
Edit: if there are several components in your model.dynamicPage facelet but you want the panel to be the only allowed to handle the dragging of the whole container, add a css class to it and restrict the draggable component handling with this class:
eg.
<p:panel id="pnl" showHeader="false">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" handle=".my-handle-classname" />
and
<h:form id="userForm">
<p:panel header="UserPanel" styleClass="my-handle-classname">
.......
</p:panel>
</h:form>
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! :)
How to position a commandButton on top of tabview header ?
I tried out this but failed to position the commandButton on top of tabview. Instead the commandButton gets hidden by the tabview
<h:commandButton value="View all" style=" float:right; z-index: 1000;" />
<p:tabView style=" z-index: 5;" >
<p:tab ...>
</p:tab>
<p:tab ...>
</p:tab>
</p:tabView>
If you add position:absolute; to your <h:commandButton> style it will be on top of the <p:tabView>.
I have a page named Tabview1 which composed of tabview.
Tabview1.xhtml:
<p:tabView>
<p:tab title="1">
<ui:include src="/Apanel.xhtml"/>
</p:tab>
<p:tab title="2">
</p:tab>
<p:tab title="3">
</p:tab>
</p:tabView>
I want to forward to the page Tabview2.xhtml if click on the tab named 2.
Tabview2.xhtml:
<p:tabView>
<p:tab title="1">
</p:tab>
<p:tab title="2">
<ui:include src="/Bpanel.xhtml"/>
</p:tab>
<p:tab title="3">
</p:tab>
</p:tabView>
Who can help me ?
Tabview creates a list with one element for each tab. Every <li> contains an <a href="#j_idtXXX">. Create a script on your site that changes these links to Tabview2.xhtml. For example if you set the id of your tabview to "tabview":
jQuery("#tabview ul a").first().attr("href", /MyPortal/Tabview2.jsf?tab=0);
This would cause the first tab to lead to the new page, and select the right tab on that page if you have configured a viewparam and have activeIndex="#{controllerClass.activeIndex}" set on the tabview.
I'm in a rush now, so I only had time to write a short example, but if you have some skill with javascript, it should not be too hard.
<p:tabView>
<p:tab title="Title1">
<p:panel>
<ui:include src="tabView1.xhtml" />
</p:panel>
</p:tab>
<p:tab title="Title 2">
<p:panel>
<ui:include src="tabView2.xhtml" />
</p:panel>
</p:tab>
</p:tabView>