Populating data after displaying initial data of a JSF page - jsf

This is regarding a JavaEE web application which uses JSF, JPA and Primefaces.
In a large JSF page, a table needs to be populated by a list of items. The first column display the name of the items as an output label. The second column has an input text to record user input. The third column displays a value which is calculated considering several factors and take a relatively long time.
I want to display the page with data for the first two columns, but the third Colum data need to be filled after the complete page is displayed to the user. This is to minimize the user waiting a long time before starting the data entry. As the user starts seeing the page, the third column needs to be populated as the data is made available.
Is this possible to be achieved in JSF? If needed I can use OminiPages, but not technologies like Spring and Struts.
<table>
<ui:repeat id="rptItems"
value="#{clientEncounterComponentItemController.items}"
var="ii" >
<tr>
<td>
<p:outputLabel for="itStC" value="#{ii.name}" ></p:outputLabel>
</td>
<td>
<p:inputText id="itStC" value="#{ii.shortTextValue}" >
</p:inputText>
</td>
<td>
<h:panelGroup rendered="#{ii.displayLastResult}" >
<p:outputLabel id="lblResult" value="#{clientEncounterComponentItemController.findFormsetValue(ii)}" ></p:outputLabel>
</h:panelGroup>
</td>
</tr>
</ui:repeat>
</table>

Related

JSF ResultSet in h:dataTable with dynamic columns

I am currently trying to display a ResultSet in a h:dataTable in JSF.
Basically what I am doing is executing a SQL statement which can be inserted on the website and I want to display the result of that in a table.
I can not create model classes because the tables that are used are also dynamic.
The tricky part is the fact, that I do not know how many columns there are in the ResultSet, nor the datatypes(currently I am getting these from the ResultSetMetaData).
How would I go about displaying something with dynamic columns and column content(different datatypes) in a table on a website using JSF?
Thanks in advance.
Have a data structure like List<Map<String, Object>> results in your managed bean to store the results.
On UI side, use 2 nested ui:repeat elements instead of an h:dataTable.
Outer repeat will loop rows (results), inner repeat will loop columns (result.keySet()), each cell will get its value by result.get(fieldName).
Not-tested UI code:
<table>
<ui:repeat value="#{mb.results}" var="result">
<tr>
<ui:repeat value="#{result.keySet()}" var="fieldName">
<td>
#{result.get(fieldName)}
</td>
</ui:repeat>
</tr>
</ui:repeat>
</table>

How to avoid reload entire table while deleting a single row in p:dataTable

I'm using a web application with Prime Faces.
In my datatable, in which a column is an image, I've the pagination. So I never load too many rows.
For each row I've the button "delete row". Here the code
<p:dataTable id="dataTableUploadedImages" var="singleRow">
...
...
<p:column headerText="#{msg['azioni']}" width="70">
<div align="center">
<p:commandButton icon="ui-icon-trash"
title="delete Row"
ajax="true"
action="#{myController.deleteRow(singleRow.id)}"
update="dataTableUploadedImages">
</p:commandButton>
</div>
</p:column>
</p:dataTable>
After clicking over the button, the application refresh the entire table instead of simply remove the single row.
In this page, refreshing all the rows is expensive (because a column contains an image) and slow down the application.
Is it possible to remove a row without reloading the entire table?

JSF 2 Send info to ManagedBeans file on respective checkbox click

I have a table of checkboxes like Table of Row & Column Checkboxes
<ui:repeat value="#{userBean.gridRows}" var="tempRow">
<td>
<h:selectManyCheckbox class="cb_list">
<f:selectItem itemValue="#{tempRow}|rows" itemLabel="" />
</h:selectManyCheckbox>
</td>
</ui:repeat>
On the click of each checkbox i need to send the related info to ManagedBeans file, like if checkbox for Row A has been checked, i need to send the info that Row A has been selected.
This needs to be done without using JS and without the use of Button.
How to do that?

EE2 Embedded Template with Playa fields

Hopefully this is has a simple solution. I am pretty sure I am close. So here goes...
Code first.
{exp:channel:entries channel="client" url_title="{embed:client_name}"}
<tr>
{exp:playa:parents channel="project"}
<td>
{proj_name}
</td>
<td>
{proj_job_number}
{job_number}
{/proj_job_number}
</td>
<td>
{entry_date format="%m/%d/%Y"}
</td>
<td>
{proj_producer}
{producer_name}
{/proj_producer}
</td>
<td>
{proj_vendor}
{vendor_name}
{/proj_vendor}
</td>
<td>
<i class="icon-download"></i>
</td>
{/exp:playa:parents}
</tr>
{/exp:channel:entries}
This is the code from the embedded template I am using. I am trying to return each Project channel entry along with the other playa field values from the project channel entry. I am able to return the results correctly however I am trying to format returned values into a html table. So finally my question is... What do I need to do as far as markup/tagging/conditionals so I can have one Project channel entry display per html table row. Right now all entries to the playa field display in one table cell ending up with one row with all the table cells in it. I can post more code if needed and or clarify anything I am missing. Any help on this issue is much appreciated.
Cheers!
You need to place the <tr> tags inside the {exp:playa:parents} tag pair.

Expand functionality for rows in Richfaces DataTable

I am looking for a way to implement a expand functionality to the rows of a Richfaces DataTable. The user would click a "+" link located in the first column (of each row) of the Datatable and the row would "expand" (meaning new text would be shown between the current row and the next).
I have that working, the only problem is that all the information in the expanded view is displayed in the first column section of that row. What I am trying to do is to show the "expanded" text in the whole row (as if the "expanded" text row is not divided by the columns).
Any suggestions? I'm a bit new at jsf/richfaces, so any sample code would be appreciated.
You can do this with the breakBefore attribute on the rich:column component. There is an example of its use on the RF demo page.
It would work for you if you had the last column define the breakBefore attribute. An example:
<rich:dataTable id="mytbl" value="#{mybean.mydata}" var="row">
<rich:column>
<a4j:commandLink reRender="mytbl">
<h:graphicImage value="#{row.toggleImage}"></h:graphicImage>
<a4j:actionparam name="shown" value="#{not row.expand}" assignTo="#{row.expand}"/>
</a4j:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">col 2</f:facet>
<h:outputText value="#{row.col2}"/>
</rich:column>
<rich:column breakBefore="true">
spans all the other columns
</rich:column>
</rich:dataTable>
One way for this is you can use the JQuery feature.
Demo link http://jsfiddle.net/BU28E/1/ .
One extra overhead here is you need to check how the rich:dataTable renders as Html and provide the DOM model for jQuery. It is bit tricky to have such feature in richfaces and it needs some complex workarounds.

Resources