So I am attempting to pass object values from a bean into a primefaces datatable (using primefaces 3.4 currently), howevever I'm facing two problems with this.
1. I cannot seem to find any way to display (or represent) a boolean value within a column in a datatable. Every time I attempt this, the table returns back totally empty (even though without the boolean column the other columns are populated with data from the bean).
2. The other bigger problem (more to do with java I think than primefaces) is that I have currently 26 different Objects I get from Siebels CRM ONDemand cloud solution, each containing their own datatypes and attribute values. I cannot for the life of me figure out how to, based on a drop down selection of a specific object display that objects fields dynamically within a primefaces datatable. So far I have just managed to display some of the fields for 1 of these objects as a sort of prototype but I am having the problem with the boolean value being display also its a nightmare.
Anybody have any sort of similar experiences ? or suggestions? I've been puzzled by this for over 2 weeks now and I am going absolutely crazy!
I can provide code examples or other details if needed :)
Thanks a lot I really appreciate any help !
Reggie
Html code:
<p:panel header ="Source Environment" style="margin-bottom:5px;">
<p:dataTable draggableColumns="true" id="tableFieldSet1" value="#{ODComBean.fields}" var="tableFieldSet1" rowKey="#{ODComBean.fields}" selectionMode ="multiple" style="font-family:sans-serif; width:max-content;">
<p:panel header="OD Object Selection" style="margin-bottom:5px;">
<h:panelGrid columns="2" cellpadding="5">
<p:selectOneMenu immediate ="true" id="pickList" value="#{ODComBean.fieldSetData}" effect="fade" style="font-size: 12px; font-family:sans-serif;" >
<f:selectItems value="#{ODComBean.fieldSet}" itemLabel="#{fieldSet.objectName}" var="fieldSet"/>
<p:ajax event="change" update="#form" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
<p:panel header ="Source Environment" style="margin-bottom:5px;">
<p:dataTable draggableColumns="true" id="tableFieldSet1" value="#{ODComBean.fields}" var="tableFieldSet1" rowKey="#{ODComBean.fields}" selectionMode ="multiple" style="font-family:sans-serif; width:max-content;">
<p:column headerText="Type" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.fieldType}"/>
</p:column>
<p:column headerText="Required">
<p:graphicImage value="/resources/images/tick.png" rendered="#{tableFieldSet1.readOnly}"/>
<p:graphicImage value="/resources/images/red-cross.png" rendered="#{not tableFieldSet1.readOnly}"/>
</p:column>
<p:column headerText="Name" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.name}"/>
</p:column>
<p:column headerText ="Display Name" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.displayName}"/>
</p:column>
<p:column headerText="Default Value" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.defaultValue}"/>
</p:column>
<p:column headerText="Generic Integration Tag" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.genericIntegrationTag}"/>
</p:column>
<p:column headerText ="Integration Tag" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.integrationTag}"/>
</p:column>
<p:column headerText ="Translations" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.listOfFieldTranslations}"/>
</p:column>
<p:column headerText ="Validation Error" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.validationErrorMsg}"/>
</p:column>
<!-- When I add the next Column it will only show data for the first line, and display a <div half tag in the last column... strange... !-->
</p:dataTable>
</p:panel>
if you want to use a h:outputText, you can set its converter to something that you implemented and inside that converter, decide about the display value.
Otherwise, if you like to view an icon according to the value,
you can do like this :
<p:column headerText="My Boolean Value">
<p:graphicImage value="/resources/images/tick.png" rendered="#{MODEL.boolean}"/>
<p:graphicImage value="/resources/images/red-cross.png" rendered="#{not MODEL.boolean}"/>
</p:column>
I hope this is helpful :)
Output panel with layout set to inline produce a <span> tag with the style class you provide.
You can for example use the jquery-ui icons provided by the framework. Like this:
<p:outputPanel layout="inline" styleClass="ui-icon ui-icon-circle-check" rendered="#{project.inBudget}" />
<p:outputPanel layout="inline" styleClass="ui-icon ui-icon-circle-close" rendered="#{!project.inBudget}" />
You could simply use a check mark symbol for true and empty String, or x symbol for false.
<p:column headerText="Required" style="text-align: center">
<h:outputText value="#{tableFieldSet1.readOnly ? '✓' : ''}"/>
</p:column>
Related
I'm trying to filter a column using backing bean function.
<p:dataTable id="cars"
var="car"
value="#{manageAllCoursesBean.courses}"
filteredValue="#{manageAllCoursesBean.filteredCourse1}">
<f:facet name="header">
<p:outputPanel>
<p:inputText id="globalFilter"
onkeyup="PF('carsTable1').filter()"
style="width:250px"
placeholder="Entrer un mot clé"/>
</p:outputPanel>
</f:facet>
<p:column headerText="Name"
filterBy="#{car.name}"
sortBy="#{car.name}"
style="color: #400040; font-size: 10px; width: 150px; text-align:center">
<h:outputText value="#{car.name}" />
</p:column>
<p:column headerText="Teacher"
filteredBy="#{manageAllCoursesBean.findTeacherByIdCourse(car.id)}"
sortBy="#{manageAllCoursesBean.findTeacherByIdCourse(car.id)}"
style="color: #400040; font-size: 10px; width: 175px; text-align:center">
<h:outputText value="#{manageAllCoursesBean.findTeacherByIdCourse(car.id)}" />
</p:column>
</p:dataTable>
the backing bean method is:
public String findTeacherByIdCourse(String courseId) throws IOException
{
return serviceManager.findTeacherByCourseId(courseId);
}
the filter with Name is working as well.
However, is not the case with Teacher.
Have you please any idea about solving that ?.
Big thanks.
As described on Primefaces showcase, there's no way to use managed bean method with filterBy under p:column.
I proposed that solution:
You can convert your entity Course to a courseModel and then add teachers as a list of strings.
then in your managed bean will be :
List<CourrierModel> lacmss = new ArrayList<CourrierModel>();
DataModel allDatasAssociatedCE = new ListDataModel();
//...
allDatasAssociatedCE.setWrappedData(lacmes);
for(Course c: courses)
{
CourseModel cme = new CourseModel();
cme.setCourse(c);
cme.setTeachers(findTeacherByIdCourse(c));
lacmss.add(cme);
}
HTH.
I am trying to create OrderList with Primefaces.
This list would make possible changing order of items and allow setting some boolean with a checkbox. Changing the order is fine.
The problem is that every checkbox gets the same id.
When I am clicking on one of them, then the value of all of them change.
Here is my snippet:
<p:orderList id="OrderList" value="#{editBean.visibleitem}" var="item"
itemValue="#{item}" controlsLocation="left" responsive="true"
converter="converter">
<f:facet name="caption">
<div>
<div style="float: left">label</div>
<div style="text-align: right; padding-right: 15px">checkbox</div>
</div>
</f:facet>
<p:column style="width:80%">
<h:outputText value="item" styleClass="bst-text"/>
</p:column>
<p:column style="width:20%; text-align: center">
<p:selectBooleanCheckbox id="id_item"
valueChangeListener="editBean"
value="#{item.object.booleanObj}">
</p:selectBooleanCheckbox>
</p:column>
</p:orderList>
I will be happy if you could help me.
Greetings :)
It is an open enhancement request currently in PrimeFaces 6.2 found here:
https://github.com/primefaces/primefaces/issues/3781
I will see if we can get it implemented before the 7.0 release.
Thank you for your responses. I decided to redesign my UI and now I don't display checkboxes in OrderList Component.
I am getting the following Error:
Cannot find component with identifier "myForm:display" referenced from "myForm_j_idt32".
my xhtml File :
<div id="divScreen" align="center">
<div id="divPage">
<ui:insert>
<ui:include src="/banner.xhtml"></ui:include>
</ui:insert>
<h:form id="menuBarForm">
<div id="menubar_link">
<p:commandLink value="Home" action="#{loginAct.homeNavigation}" style="color: #ffffff;margin-left: 10px;" ajax="false"></p:commandLink>
<p:commandLink action="#{loginAct.dologout}" style="color: #ffffff;margin-left: 10px;" value="Logout" ajax="false"></p:commandLink>
</div>
</h:form>
<div id="divMnuAndFrm">
<div id="divMnuContnr">
<h:form id="menuForm">
<p:menu style="width: 94%;" model="#{authMenuModel.model}"></p:menu>
</h:form>
</div>
<div id="divFrmContnrwithmenu">
<div style="height: 400px; margin: 10px 0px 0px 0px;width: 100%;">
<h:form id="myForm">
<p:dataTable
var="filem"
value="#{fileViewManagementPnation.data}"
rowKey="#{filem.ftype}"
paginator="true" rows="10"
selection="#{fileViewManagementPnation.selectedFile}"
selectionMode="single"
emptyMessage="No Files Found"
>
<p:ajax event="rowSelect" update="myForm:display" oncomplete="fileDialog.show()"/>
<f:facet name="header">
:: File Management ::
</f:facet>
<p:column sortBy="#{filem.ftype}" filterBy="#{filem.ftype}" headerText="FileType">
#{filem.ftype}
</p:column>
<p:column headerText="Version" sortBy="#{filem.version}">
#{filem.version}
</p:column>
<p:column headerText="Size">
#{filem.fsize}
</p:column>
<p:column headerText="File">
Action
</p:column>
</p:dataTable>
<p:dialog header="File Details" widgetVar="fileDialog" resizable="false" width="400"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header_det">
<p:graphicImage value="/images/gep_logo.gif" />
</f:facet>
<h:outputText value="File Name : " />
<h:outputText value="#{fileViewManagementPnation.selectedFile.ftype}" id="ftype"/>
<h:outputText value="Size" />
<h:outputText value="#{fileViewManagementPnation.selectedFile.fsize}" id="size"/>
<h:outputText value="File Type :" />
<h:outputText value="#{fileViewManagementPnation.selectedFile.version}" id="version"/>
</h:panelGrid>
</p:dialog>
</h:form>
</div>
</div>
</div>
<div id="divFooter">
<p>Developed and Maintained by National Informatics Centre</p>
</div>
</div>
I am trying last two weeks to make it work but still am not getting any answers.
Please kindly help me in this issue.
You should be able to use update=":myForm:display" or update="display" instead of update="myForm:display".
Take a look at NamingContainer in JSF2/Primefaces, it'll give you a bit more background information. It's because myForm:display refers to nested NamingContainer within myForm which is called myForm, but you don't have that. The component you want to update is directly witin the same NamingContainer, namely myForm. So simply call one of the above mentioned and you should be fine.
You are not calling the right component.
You are calling a component withing the same form.
calling myForm:display will look for a component with id myForm inside the current form myForm as in :myForm:myForm:display which you do not have.
So you do not need to specify the full qualified name of the form. You can use the id of the component directly as in:
Both components (the calling component, and the called component) are inside the same form so use: update="display"
So instead you can either call the component directly as in the example above, or call it using its full qualified name update =":myForm:display"
How can I align a graphicImage which will come as an element as a column in the middle .Now It is left aligned. I tried a lot but it will not work.
<p:column>
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:graphicImage value="../resources/images/Yellow_button.png"
style="float:center;height: 18px; width: 20px"
rendered="#{categorey.status == 1}" title="READY TO ZIP"/>
<p:column>
You can align the table cell content for the whole column:
<p:column style="text-align: center">
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:graphicImage value="../resources/images/Yellow_button.png" />
</p:column>
In order to separate the layout you can use the styleClass attribute referencing a class from a css resource as well.
In JSF is it possible to have a datatable displays records as follows?
[Name ][Last Name][Age]
1. John Doe 20
Extra info on record 1
2. John Smith 20
Extra info on record 2
Thank you
I'm sure there are a number of ways you could do this.
If you don't mind nesting tables, you can use the panelGrid tag and CSS.
View:
<f:view>
<h:dataTable value="#{peopleBean.people}" var="row">
<h:column id="column1">
<f:facet name="header">
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="First Name" />
<h:outputText value="Last Name" />
<h:outputText value="Age" />
</h:panelGrid>
</f:facet>
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="#{row.firstname}" />
<h:outputText value="#{row.lastname}" />
<h:outputText value="#{row.age}" />
</h:panelGrid>
<h:outputText styleClass="extra" value="#{row.extraInfo}" />
</h:column>
</h:dataTable>
</f:view>
Stylesheet:
TABLE {
width: 100%;
}
TABLE TR TD {
text-align: left;
}
.cell {
width: 40%;
}
.age {
width: 20%;
}
.extra {
background-color: silver;
padding: 4px;
display: block;
width: 100%;
}
Third libraries, such as RichFaces, allow you to do that with the principle of subTable.
You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...