How can I export image from every row of a dataTable to pdf using PrimeFaces DataExporter? - primefaces

I have a XHTML displaying rows from a dataTable having few texts columns and one image column. I have been able to export the text columns for all the records in pdf, but I am not able to export the images in the rows. I searched in lots of posts to find out a way to export the images from the rows, but failed. Please note that I am not looking for exporting a single image for header or footer, which can be handled by preProcessor attribute in the p:dataExporter tag. I found good hints/examples for exporting single image using PreProcessor in dataExport tag. The hints are working fine for me. But I was unable to find any hint/example for row-wise image export. Please help!
My technology stack:
JSF2, PrimeFaces 4.0, itext-1.1.4, JDK1.8, GlassFish Server 4
My current xhtml output given below. I need to export the green ticks and red crosses to pdf.
My current xhtml output
My JSF/XHTML code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/templates/common.xhtml">
<ui:define name="content">
<h:panelGroup id="formTitle" layout="block">
<h:outputText value="#{bundle.ListUsersTitle}"></h:outputText>
</h:panelGroup>
<h:form styleClass="jsfcrud_list_form">
<h:panelGroup id="messagePanel" layout="block">
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGroup>
<h:outputText escape="false" value="#{bundle.ListUsersEmpty}" rendered="#{usersController.items.rowCount == 0}"/>
<h:panelGroup rendered="#{usersController.items.rowCount > 0}">
<p:dataTable id="dtUsers" value="#{usersController.items}" var="item" scrollable="true" scrollHeight="500">
<p:column sortBy="#{item.id}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}" />
</p:column>
<p:column sortBy="#{item.userName}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userName}"/>
</f:facet>
<h:outputText value="#{item.userName}" />
</p:column>
<p:column sortBy="#{item.userPassword}" exportable="false">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userPassword}"/>
</f:facet>
<h:outputText value="#{item.userPassword}" />
</p:column>
<p:column id="userActiveCol" sortBy="#{item.userActive}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userActive}"/>
</f:facet>
<h:graphicImage id="yesId" value="/img/Yes.png" alt="Yes" rendered="#{item.userActive == 'Y'}"/>
<h:graphicImage id="noId" value="/img/No.png" alt="No" rendered="#{item.userActive == 'N'}"/>
</p:column>
<p:column sortBy="#{item.userSource}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userSource}"/>
</f:facet>
<h:outputText value="#{(item.userSource == 'ORGANIZATION')?'Organization':
(item.userSource == 'VENDOR')?'Vendor':
(item.userSource == 'VENDORRESOURCE')?'Vendor Resource':
(item.userSource == 'CUSTOMER')?'Customer':'Not Known'}" />
</p:column>
<p:column sortBy="#{item.resourceId}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_resourceId}"/>
</f:facet>
<h:outputText value="#{item.resourceId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_resourceName}"/>
</f:facet>
<h:outputText value="#{usersController.getResourceName(item)}" />
</p:column>
<p:column headerText=" " exportable="false">
<h:panelGroup styleClass="formRowAction">
<p:commandLink action="#{usersController.prepareView}" value="#{bundle.ListUsersViewLink}"/>
</h:panelGroup>
<h:panelGroup styleClass="formRowAction">
<p:commandLink action="#{usersController.prepareEdit}" value="#{bundle.ListUsersEditLink}"/>
</h:panelGroup>
<h:panelGroup styleClass="formRowAction">
<p:commandLink action="#{usersController.destroy}"
value="#{bundle.ListUsersDestroyLink}" />
</h:panelGroup>
</p:column>
</p:dataTable>
</h:panelGroup>
<br />
<h:panelGroup styleClass="formBottomActions">
<h:panelGroup>
<h:commandLink action="#{usersController.prepareCreate}" value="#{bundle.ListUsersCreateLink}"/>
</h:panelGroup>
<h:panelGroup>
<p:commandLink value="#{bundle.ExportPDF}" immediate="true" id="generatePDFId" ajax="false">
<p:dataExporter type="pdf" target="dtUsers" fileName="Users"/>
</p:commandLink>
</h:panelGroup>
<h:panelGroup>
<h:link outcome="/subMenu" value="#{bundle.SubMenuLink}"/>
</h:panelGroup>
<h:panelGroup>
<h:commandLink action="#{menuHandler.returnToMainMenu}" value="#{bundle.mainMenuLink}"/>
</h:panelGroup>
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
</html>
PDF that is currently getting generated. The green ticks and red crosses should appear in the column "User Active".
PDF that is currently getting generated

The PrimeFaces exporter does not export images from cells only text. You will have to write a custom PDF exporter to meet your needs.

Related

Primefaces Drag&Drop drags and drops only one element from dataTable

So, I've used example from showcase of PrimeFaces https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml. That's my code:
<div class="page_content">
<div class="header">Очередь рассылок</div>
<script type="text/javascript">
function handleDrop(event, ui) {
var droppedEmail = ui.draggable;
droppedEmail.fadeOut('fast');
}
</script>
<h:form>
<p:fieldset id="availableEmailsField" legend="Доступные рассылки">
<p:dataTable id="availableEmails" var="email" value="#{emailingQueueUI.customEmails}">
<p:column style="width: 20px;">
<h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/>
<p:draggable for="dragIcon" revert="true" helper="clone"/>
</p:column>
<p:column headerText="ID">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:fieldset>
<p:outputPanel id="selectedEmailsField">
<p:outputPanel id="dropArea">
<h:outputText value="Переместите сюда c доступных рассылок" rendered="#{empty emailingQueueUI.customEmailQueue}" style="font-size:16px;" />
<p:dataTable id="selectedEmails" var="email" value="#{emailingQueueUI.customEmailQueue}" rendered="#{not empty emailingQueueUI.customEmailQueue}"
rowIndexVar="index">
<!--<p:ajax event="rowReorder" listener="#{emailingQueueUI.onQueueReorder}" update=":form" />-->
<p:column headerText="Номер в очереди">
<h:outputText value="#{index}"/>
</p:column>
<p:column headerText="Рассылка">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:outputPanel>
<p:droppable for="selectedEmailsField" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableEmails" onDrop="handleDrop">
<p:ajax listener="#{emailingQueueUI.onEmailDrop}" update="dropArea availableEmails" />
</p:droppable>
</h:form>
</div>
There is a problem with d&d, I can drag and drop only one element from "availableEmailsField". When I try to drop another element it removes previous element and adds the dropped one.
I think the problem is in your bean.
Make sure that you initialize customEmailQueue inside #PostConstruct method and use the proper bean scope. In this case #ViewScoped.
It seems that an update function must be setted correctly in order to work properly. I faced the same issue and discovered that the ajax inside dropable has to update all drag-drop area elements, it seems that this action solves the issue.
The solution that worked is to put inside your form an:
<h:panelGroup id="elementsPanel">
....
...
...
...
....
</h:panelGroup>
, surrounding all drag-drop elements (if you dont want a panelgroup the idea is to update all the components)
and on the dropable update this panel:
<p:droppable id="dropHandler" for="selectedTable" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="myDataSource" onDrop="handleDrop">
<p:ajax listener="#{dimensionsClass.onDimensionDrop2}" update="elementsPanel" />
</p:droppable>
I hope that helps!

Datatable emptyMessage is not shown in PF5.3

I am using PF 5.3, on (weblogic 11g/jsf2.0/java 1.6).
I thought the issue of not shown emptyMessage in Datatable is fixed in 5.3, but inspite of using the latest version, i still dont see the message. Below is my sample code.
<p:dataTable id="attaDt" var="fileRow" value="#{pendpaybean.selectedPayDetailsFiles}"
rowIndexVar="rowIndex"
emptyMessage="No Files Uploaded"
>
<p:column headerText="Uploaded Date"
width="15px;" style="text-align:center"
>
<h:outputText value="#{fileRow.columns[0]}" />
</p:column>
<p:column headerText="Uploaded By"
width="30px;" style="text-align:center"
>
<h:outputText value="#{fileRow.columns[3]}" />
</p:column>
</p:datatable>
Any help ?
Your code works well. NOTE I put attribute value to null for showing emptyMessage.
Your adapted code:
<h:body>
<h:form>
<p:dataTable id="attaDt" value="#{null}" var="fileRow" rowIndexVar="rowIndex" emptyMessage="No Files Uploaded">
<p:column headerText="Uploaded Date" width="15px;" style="text-align:center">
<h:outputText value="#{fileRow.columns[0]}" />
</p:column>
<p:column headerText="Uploaded By" width="30px;" style="text-align:center">
<h:outputText value="#{fileRow.columns[3]}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>

export text then datalist in excel and pdf with dataexporter

I am using primefaces 3.4.2 jar. I have a datatable with four columns. In two columns I have a datalist and I want to export text showed by datalist. But when I export it, it shows the following "org.primefaces.component.datalist.DataList#1195cc3" in the pdf and xls file.
<p:dataTable emptyMessage="#{messages['empty.result.set']}" id="searchResult" var="row" value="#{managePessoaJuridica.manageableList}" rows="10" paginator="true" paginatorPosition="top" paginatorAlwaysVisible="false" style="display:#{managePessoaJuridica.manageableList == null? 'none': ''}">
<p:column styleClass="column_icons" exportable="false">
<p:panelGrid columns="#{pessoaJuridicaController.showSelectAction?3:2}">
<p:commandButton id="selectAction" icon="ui-icon-circle-check" title="#{messages['action.select']}" action="#{pessoaJuridicaController.select(row.id)}" immediate="true" process="#this" rendered="#{pessoaJuridicaController.showSelectAction}"/>
<p:commandButton id="editAction" icon="ui-icon-pencil" title="#{messages['action.edit']}" action="#{pessoaJuridicaController.load(row.id)}" immediate="true" process="#this" update="#form"/>
<p:commandButton id="deleteAction" icon="ui-icon-trash" title="#{messages['action.delete']}" action="#{pessoaJuridicaController.delete(row.id)}" immediate="true" process="#this" update="searchResult"
onclick="return confirm('#{messages['confirm.delete.this']} #{messages['pessoa.juridica.view.title']}');" />
</p:panelGrid>
</p:column>
<p:column id="column_nome" sortBy="#{row.nome}" >
<f:facet name="header">
<h:outputText id="columnHeader_nome" value="#{messages['pessoa.nome']}"/>
</f:facet>
<h:outputText id="nome" value="#{row.nome}">
</h:outputText>
</p:column>
<p:column style="width:0px;">
<f:facet name="header">
<h:outputText id="columnHeader_categoriasPessoa" value="#{messages['pessoa.categorias.pessoa']}"/>
</f:facet>
<p:dataList type="definition" id="categoriasPessoa" var="item" value="#{row.categoriasPessoa}" >
<p:column>
<h:outputText id="item_categoriasPessoa" value="#{item}" converter="com.domain.configuracao.crud.CategoriaPessoaJsfConverter"/>
</p:column>
</p:dataList>
</p:column>
<p:column style="width:0px;">
<f:facet name="header">
<h:outputText id="columnHeader_identificacoesPessoa" value="#{messages['pessoa.identificacoes.pessoa']}"/>
</f:facet>
<p:dataList type="definition" id="identificacoesPessoa" var="item" value="#{row.identificacoesPessoa}">
<p:column>
<h:outputText id="item_categoriaIdentificacoes" value="#{pessoaJuridicaController.getCategoriaIdentificacao(item)}" converter="com.domain.configuracao.crud.CategoriaIdentificacaoJsfConverter"/>:
<h:outputText id="item_identificacoesPessoa" value="#{item}" converter="com.domain.configuracao.crud.IdentificacaoPessoaJsfConverter"/>
</p:column>
</p:dataList>
</p:column>
<p:column id="column_ativo" sortBy="#{row.ativo}" >
<f:facet name="header">
<h:outputText id="columnHeader_ativo" value="#{messages['classe.base.cadastro.ativo']}" />
</f:facet>
<h:outputText id="ativo" value="#{row.ativo}" converter="com.BooleanJsfConverter" >
</h:outputText>
</p:column>
<f:facet name="footer">
<p:menuButton value="#{messages['export.action']}" rendered="#{not empty managePessoaJuridica.manageableList}">
<p:menuitem value="#{messages['export.spreadsheet']}" ajax="false">
<p:dataExporter type="xls" target="searchResult" fileName="export" excludeColumns="0" encoding="ISO-8859-1"/>
</p:menuitem>
<p:menuitem value="#{messages['export.pdf']}" ajax="false">
<pe:exporter type="pdf" target="searchResult" fileName="export" excludeColumns="0" encoding="ISO-8859-1"/>
</p:menuitem>
<p:menuitem value="#{messages['export.csv']}" ajax="false">
<p:dataExporter type="csv" target="searchResult" fileName="export" excludeColumns="0" encoding="ISO-8859-1"/>
</p:menuitem>
</p:menuButton>
<p:spacer width="10"/>
<h:outputText value="#{fn:length(managePessoaJuridica.manageableList)} #{messages['records.found']}" rendered="#{not empty managePessoaJuridica.manageableList}"/>
</f:facet>
</p:dataTable>
But when I export it, it shows the following
"org.primefaces.component.datalist.DataList#1195cc3" in the pdf and
xls file.
Obviously, Primefaces's data exporter use the toString() method of an object to print its "value(s)".
Suggestions :
Write a custom exporter (recommended)
Override toString() method of org.primefaces.component.datalist.DataList (not advised)

PrimeFaces 3.2 dataExporter not working

I am using PrimeFaces 3.2 and want to export a dynamically created table as an .xls file. When i click on export, nothing seems to be happening.
Export Code
<h:commandLink id="Download_Excel_Format" ajax="false">
<p:graphicImage value="/resources/Excel_Icon.jpg" height="25" width="25" />
<p:dataExporter type="xls" target="dataTable" fileName="SomeFileName"/>
</h:commandLink>
dataTable
<p:dataTable id="dataTable" var="c" value="#{databaseSearch.customerList}"
paginator="true" rows="10" paginatorAlwaysVisible="false"
paginatorTemplate="Page {CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} Rows per page {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,30">
<p:column>
<f:facet name="header">
<h:outputText value="Machine" />
</f:facet>
<p:commandButton id="basic" value="#{c.machine}" action="#{updateEntry.setMachine(c.machine)}" oncomplete="dlg1.show();" styleClass="ui-Machinebutton" update=":Update_Entry"/>
<p:tooltip for="basic" value="Update/Delete Database Entry" showEffect="fade" hideEffect="fade" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Company" />
</f:facet>
<h:outputText value="#{c.company}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Contact" />
</f:facet>
<h:outputText value="#{c.contact}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:outputText value="#{c.phone}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Email" />
</f:facet>
<!-- <h:outputText value="#{c.email}" />-->
<h:outputLink value="mailto:#{c.email}?Subject=Baseline Monitor Alert | Machine : #{c.machine}">#{c.email}</h:outputLink>
</p:column>
</p:dataTable>
Both the dataTable and the Export command are within one form, however the dataTable is in a output panel (within the form).
Form
<h:form prependId="false" id="Main_Form">
</h:form>
Output Panel
<p:outputPanel id="panel" autoUpdate="false">
</p:outputPanel>
I even updated to PrimeFaces 3.4.2 to see if the dataExporter would work, but no avail, as far as i remember 3.2 has a bug if the dataTable generates columns dynamically, but that is not the case here right? am i doing something wrong?
dataExporter option looks much simpler, but if there is an alternative which is simple enough i am up for it.
Update
I am using a GlassFish 3.1.2.2 (build 5) & NetBeans 7.2.1, i do not get any errors, just the page refresh's, has a '#' at the end of the URL and stops, no errors means that i am not lacking any dependencies either... so i am lost here ...
Ok, i found the answer ! Tricky one though ... i had a commandButton with the ID=submit...renamed it and that did the trick !
<p:commandButton id="xsubmit" icon="ui-icon-search" title="Search Database" update="panel" actionListener="#{databaseSearch.customerList}" />

Primefaces -DataTable - Internal Sort

can we do a internal sorting in primeface datetable ? If i have column a ,b ,c. can i sort the column c and then internally by column b in p:dataTable.
<h:form>
<p:dataTable var="car" value="#{tableBean.carsSmall}">
<p:column headerText="Model">
<h:outputText value="#{car.model}" />
</p:column>
<p:column headerText="a">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="b">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column headerText="c">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</h:form>
Yes, you can. http://www.primefaces.org/showcase/ui/datatableSortingMultiple.jsf
P.S Don't forget pressing CTRL or Cmd :)