I am currently developing an application where the user can use a picklist to make certain associations.
I would like to display the object's attributes in different columns inside the picklist, for example the object car would display its id, year and color. However, the headerText of the column is not working. The column only displays the data but PrimeFaces seems to ignore the attribute headerText among others like sortBy. Is there any workaround? What am I doing wrong? p:column seems to work fine on a DataTable but not on a PickList and I really need to use a PickList or at least something with very similar functionalities.
Below is my code:
<p:pickList id="pickListAssociacao" value="#{associacaoPickListView.carsPickListView}" var="car" itemLabel="#{car.brand}" itemValue="#{car}">
<p:column headerText="Header1">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Header2" sortBy="#{car.year}">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Header3">
<h:outputText value="#{car.year}" />
</p:column>
</p:pickList>
Thanks for your time.
<h:dataTable value="#{SearchingBeans.list}" var="entry">
<h:column>
<f:facet name="header">
<h:outputLabel>Photo</h:outputLabel>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputLabel>Pseudo</h:outputLabel>
</f:facet>
<h:outputLabel value="#{entry.pseudo}"></h:outputLabel>
</h:column>
<h:column>
<f:facet name="header">
<h:outputLabel>Description</h:outputLabel>
</f:facet>
<h:outputLabel value="#{entry.description}"></h:outputLabel>
</h:column>
<h:column>
<f:facet name="header">
<h:outputLabel>Photo</h:outputLabel>
</f:facet>
<h:outputLabel value="#{entry.photo[0].path}"></h:outputLabel> <-- this a List
</h:column>
</h:dataTable>
i got a entities member one of his property is a List photo with get/set
that property is populate
i don't know how to fetch that value in jsf i want only the first picture for each member since their have 2-3 photos. Its that possible?? any other solution will be appreciate.
Just iterate over it using <ui:repeat> or <h:dataTable> the usual way. It's perfectly valid to nest multiple iterating components in each other. In case of <h:dataTable>, you only need to make sure that you put the nested iterating component inside a <h:column>.
E.g.
<h:dataTable value="#{bean.entities}" var="entity">
<h:column>
#{entity.property}
</h:column>
<h:column>
<ui:repeat value="#{entity.subentities}" var="subentity">
#{subentity.property}
</ui:repeat>
</h:column>
</h:dataTable>
or
<h:dataTable value="#{bean.entities}" var="entity">
<h:column>
#{entity.property}
</h:column>
<h:column>
<h:dataTable value="#{entity.subentities}" var="subentity">
<h:column>
#{subentity.property}
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
You'll potentially only run into issues when you nest multiple <ui:repeat> components and use <f:ajax> in it while using an older version of Mojarra.
Only JSTL <c:forEach> wouldn't work when nested inside a JSF iterating component for the reasons explained here JSTL in JSF2 Facelets... makes sense?
Unrelated to the concrete problem, please don't abuse <h:outputLabel> for pure text presentation. It generates a HTML <label> element which is intented to label an input element by for attribute. However, you're doing that nowhere in the code. You should be using <h:outputText> instead. By the way, I'm lately seeing this more often in code of starters. There must be somewhere a bad tutorial or resource which is abusing the <h:outputLabel> this way instead of <h:outputText> or even plain EL in template text. Which tutorial/resource was you using? Then I can contact the author about this severe misinstruction. See also Purpose of the h:outputLabel and its "for" attribute
This is a clumsy question!!! :)
Can this be made possible somehow? Can <p:dataTable> (whatever lazily loaded or otherwise) be updated without updating its headers (The contents (rows) inside the table along with the footer should be updated without updating the table headers)?
Updating of <p:dataTable> may be triggered by any UICommand like <p:commandButton>, <p:commandLink> and alike.
Something like this can be visualized, when we edit/update rows using <p:cellEditor> in conjunction with <p:rowEditor/> in <p:dataTable> (not sure about single cell editing).
<p:dataTable id="dataTable" var="row" value="#{bean}" ...>
<p:column headerText="Header 1" sortBy="#{row.property1}" filterBy="#{row.property1}">
....
</p:column>
<p:column>
<!--They may be our own headers-->
<f:facet name="header">
Header 2
...
</f:facet>
....
</p:column>
...
</p:dataTable>
Easiest way is to use PrimeFaces Selectors (PFS) for this. This only requires the desired cell content being wrapped in another component with an ID and a style class — so that jQuery can find and collect them.
E.g.
<p:dataTable ...>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col1" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col2" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col3" styleClass="cell">...</h:panelGroup>
</p:column>
...
</p:dataTable>
<p:commandButton value="update" update="#(.cell)" />
That wrapping is clumsy, yes, but that's best you can get without homebrewing a custom renderer. You can always create a <my:column> tagfile to reduce the boilerplate.
See also:
How do PrimeFaces Selectors as in update="#(.myClass)" work?
I am trying to fetch the questions and the associated answers. I am able to get the questions fine but the nested datatable does not even recognize the properties each answer has, and this is also pointed out by the IDE as well. Maybe this is not the right way to go about this. How do I iterate over the answers associated with each question ?
<h:dataTable value="#{questionBacking.recentlyAskedQuestions}" var="questions"
rendered="#{questionBacking.recentlyAskedQuestions.size() > 0}"
border="1">
<h:column>
<h:outputText value="#{questions.questionTitle}" />
<br/>
<h:outputText value="#{questions.questionBody}" />
</h:column>
<h:dataTable value="#{questions.answers}" var="answers">
<tr>
<h:outputText value="#{answers.answer}" />
</tr>
</h:dataTable>
</h:dataTable>
You need to put columns inside a <h:column>.
<h:dataTable value="#{questionBacking.recentlyAskedQuestions}" var="question" rendered="#{not empty questionBacking.recentlyAskedQuestions}">
<h:column>
<h:outputText value="#{question.questionTitle}" />
<br/>
<h:outputText value="#{question.questionBody}" />
</h:column>
<h:column>
<h:dataTable value="#{question.answers}" var="answer">
<h:column>
<h:outputText value="#{answer.answer}" />
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
(note that I changed the rendered and the var attributes to be a bit more self-documenting, you might want to rename questionTitle, questionBody and answer to title, body and body respectively as well so that you don't keep duplicating the meaning)
You can do the same thing mentioned in BalusC's answer using PrimeFaces as well. Just replace <h:dataTable> with <p:dataTable> and the same goes for column tags as well. You can create nested datatable with PrimeFaces. I recommend people to use PrimeFaces as it reduces the amount of time people spend on writing/modifying css definitions.
I would like to be able to conditionally omit a footer from a PrimeFaces panel element:
<p:panel header="some text">
<f:facet name="footer">
#{message}
</f:facet>
<!-- ... -->
</p:panel>
I hoped that the rendered attribute would work:
<p:panel header="some text">
<f:facet name="footer" rendered="#{!empty message}">
#{message}
</f:facet>
<!-- ... -->
</p:panel>
But the footer is still rendered, with empty content. It appears that facet does not have the rendered attribute: http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_facet.html.
What's the right way to do this?
I was able to solve this by swapping the facet out for an attribute. To summarize:
This works
<p:panel ...>
<f:attribute name="footer" value="#{message}"/>
<!-- ... -->
</p:panel>
But this doesn't work
<p:panel footer="#{message}">
<!-- ... -->
</p:panel>
Neither does this
<p:panel ...>
<f:facet name="footer">#{message}</f:facet>
<!-- ... -->
</p:panel>
Nor this
<p:panel ...>
<f:facet name="footer">
<h:outputText value="#{message}" rendered="#{!empty message}"/>
</f:facet>
<!-- ... -->
</p:panel>
by "works" I mean:
"renders no footer — not just an empty footer — when #{message} is empty or null; otherwise, correctly renders the footer with the specified text."
PrimeFaces forum thread on this issue
You could declare a ui:param and let the template check the param while renderring.
The facet in the template could then be declared as:
<f:facet name="#{hideFooter == null or not hideFooter ? 'footer' : ''}">
#{message}
</f:facet>
Any page can then declare this param
<ui:param name='hideFooter' value='#{some rule}' />
and set the appropriate rule for the param. For any page that does not declare the param, the footer will be displayed.
Here's what I did in trying to conditionally render a facet within a composite component.
<composite:interface>
<composite:facet name="header" required="false" />
</composite:interface>
<composite:implementation>
<p:panel>
<c:if test="#{empty component.facets.header}" >
<f:facet id="#{cc.attrs.id}_default_header" name="header">
all sorts of stuff here
</f:facet>
</c:if>
<c:if test="#{not empty component.facets.header}">
<composite:insertFacet id="#{cc.attrs.id}_custom_header" name="header" />
</c:if>
<composite:insertChildren id="#{cc.attrs.id}_content"/>
</p:panel>
</composite:implementation>
This let's the user of the composite component supply the header facet if they want, and if they don't, we supply a default. Obviously, instead of providing a default, you could simply not do anything.
This mixes c:if in jsf controls, but we didn't see any adverse effects.
I have come across a similar issue with plain JSF. I am not sure how a <p:panel> is rendered, but if it is rendered as a table, you can try this:
First, declare a CSS-class like this:
.HideFooter tfoot {
display: none;
}
Then set that class conditionally on the panel:
<p:panel styleClass="#{renderFooterCondition ? null : 'HideFooter'}">
The footer is still rendered in the JSF-sense, but it is not displayed and does not take up any space in the page when viewed by the user-agent.
I successfully solved this problem using ui:fragment
<ui:fragment rendered="...Test...">
<f:facet name="footer">
...
</f:facet>
</ui:fragment>
works for example to conditionnaly render the footer of a primefaces datatable (the rendered attribute of the facet does not work).
Not sure how well this would work for your footer, but I had the same issue with a legend I was trying to conditionally render. I fixed it by using the rendered on anything inside the facet tag.
<p:fieldset>
<f:facet name="legend">
<h:outputText value="#{header1}" rendered="#{header1.exists}"/>
<h:outputText value="#{header2}" rendered="#{not header1.exists}"/>
</f:facet>
content
</p:fieldset>
I had difficulty trying c:if with my ui:repeat, so this was my solution. Not quite the same as your problem, but similar.
Facets are not intended to render HTML, which is why it doesn't have the rendered attribute. Facets add functionality to a page. The term facet is probably a poor choice of name. It's very ambiguous.
..if the list compiled by ITworld's Phil Johnson has it right, the
single hardest thing developers do is name things.
ie.
JSF facets
A project facet is a specific unit of functionality that you can add to a project when that functionality is required. When a project facet is added to a project, it can add natures, builders, classpath entries, and resources to a project, depending on the characteristics of the particular project. JSF facets define the characteristics of your JSF enabled web application. The JSF facets specify the requirements and constraints that apply to your JSF project.
The JSF facets supply a set behaviors and capabilities to your web application.
This is a counter-answer to the answer from Ludovic Pénet.
This worked for me in <f:facet name="footer"> in selected p:column items of a p:dataTable (Primefaces 5.3):
...
Note how I have the ui:fragment inside the f:facet, not outside (not wrapping) it. It definitely completely removes the entire row when every footer facet is tested to NOT render (as far as I can tell, independent of the content within the ui:fragment).
Try with this, from primefaces web page
<p:columnGroup type="footer">
<p:row>
<p:column colspan="3" style="text-align:right" footerText="Totals:" />
<p:column footerText="your value in ajax" />
<p:column footerText="your value in ajax" />
</p:row>
</p:columnGroup>
clik here, to view primefaces' webpage
For those who landed here trying to hide the footer, instead of header, but the syntax component.facets.footer didn't work, should try this:
<p:panel id="panelContent">
<c:if test="#{not empty cc.facets.footer}">
<f:facet name="footer" height="100%">
your content
</f:facet>
</c:if>
</panel>
Why don't you enclose the content of the footer into a panelGroup which has the rendered attribute?
This way:
<p:panel header="some text">
<f:facet name="footer">
<h:panelGroup rendered="#{!empty message}">
#{message}
</h:panelGroup>
</f:facet>
<!-- ... -->
</p:panel>
I do it in my weapp and it works, no footer is rendered.
I don't use primefaces though, I do it with h:datatable, but I think that it must works with p:panel too.
I try this solution and ok. (http://www.coderanch.com/t/431222/JSF/java/dynamically-set-panel-header-condition)
<rich:dataGrid value="#{myMB.student.list}" rendered="#{!empty myMB.student and !empty myMB.student.list}" var="st" rowKeyVar="row">
<rich:panel>
<f:facet name="header">
<h:panelGroup id="panelHeader">
<h:outputText value="Just one student" id="header1" required="true" rendered="#{!myMB.manyStudents}"/>
<h:outputText value="#{row+1}º Student" id="header2" required="true" rendered="#{myMB.manyStudents}"/>
</h:panelGroup>
</f:facet>
<rich:panel>