How to display Label and Value in h:outputText - jsf

I want to display datacenter id and datacenter Name in this case 1000 and DC1.
I made this complex JSF code but it turns out that I cannot display the id as Value and Datacenter name as label. Something like this:
<f:selectItems value="#{ZoneProfileTabGeneralController.listDatacenters}" var="datacenters" itemValue="#{datacenters.datacenterid}" itemLabel="#{datacenters.datacentername} - #{datacenters.datacenterid}" />
This is the test that I made.
<h:outputText value="#{ZoneProfileTabGeneralController.DatacenterNameId(ud.datacenterId)} - #{ud.datacenterId}"
Is there any way to display the id as hidden value and the name as label. But when I submit the JSF page to send back only the datacenter id?
EDIT
<tr>
<td>Datacenter ID</td>
<td>
<h:outputText value="#{ud.datacenterId}"
rendered="#{not ZoneProfileTabGeneralController.editable}" />
<h:selectOneMenu value="#{ud.datacenterId}" label="#{ZoneProfileTabGeneralController.DatacenterNameId(ud.datacenterId)} - #{ud.datacenterId}" rendered="#{ZoneProfileTabGeneralController.editable}">
<f:selectItems value="#{ZoneProfileTabGeneralController.listDatacenters}" var="datacenters" itemValue="#{datacenters.datacenterid}" itemLabel="#{datacenters.datacentername} - #{datacenters.datacenterid}" />
</h:selectOneMenu>
</td>
</tr>

Related

Summary row JSF DataTable

I have to put in summary many columns summarizing the results,
and in jsf datatable i cant do it, someone know how can i do it? without use primefaces
im got this result
<h:dataTable id="tableResult" value="#{managedBean.dataModel}"
var="obj" rows="15" layout="block" styleClass="table">
<h:column>
<f:facet name="header">Total abandonada</f:facet>
<h:outputText value="#{obj.totalAbandon}">
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">Total</f:facet>
<h:outputText value="#{obj.total}" />
</h:column>
<h:column>
<f:facet name="header"> Atendidas %</f:facet>
<h:outputText value="#{obj.percentualAnswered}%" />
</h:column>
<h:column>
<f:facet name="header">Abandonos %</f:facet>
<h:outputText value="#{obj.percentualAbandon}%" />
</h:column>
<f:facet name="footer">#{obj.suumary}
</f:facet>
</h:dataTable>
to got this result im using
<f:facet name="footer">Total : 2</f:facet>
but i want this result
<tr>
<td>Total : 2</td>
<td>Total answered : 1</td>
<td>Total abandon : 1</td>
</tr>
</tfoot>
i have been tried use 2 footer facet and doesnt work
A plain JSF h:datatable does not have the notion of something like a summary per group of rows built in. So if this is what you want, you need to either switch to e.g. PrimeFaces or add the summary row to your model in the right place and be creative with the CSS for the rows and the content.
If you want a footer for the full datable, the footer facet is the right thing (a summary of the datatable). But in this footer you cannot use the variable you assigned in the var attribute, in your case obj Think of it, which obj should be used? The first? Second? Last? All (each)? So add a field to the managedBean that contains the 'summary' and display that.
<f:facet name="footer">#{manageBean.summary}</f:facet>
If summary is a list, you can iterate over it like mentioned in Iterate over nested List property inside h:datatable
The html you'll end up is
<tfoot>
<tr>
<td>
.... your content of the nested list
</td>
</tr>
</tfoot>
This contnt can be either a table, list, div's or whatever you want.

Get string behind binding object

I have the following JSF construct:
<c:set var="myVar" value="#{myBean.getMyMap()}" scope="request" />
<h:form>
<p>
<h:outputText value="Output1: " />
<h:selectOneMenu value="#{myMappingsBean.data.attribute1}" binding="#{input1}" required="true">
<f:selectItems var="entry" value="#{myVar}"/>
<p:ajax update="myDropdown"/>
</h:selectOneMenu>
</p>
<p>
<h:outputText value="Output2: " />
<h:selectOneMenu id="myDropdown" value="#{myMappingsBean.data.attribute2}" binding="#{input2}" required="true" converter="javax.faces.Double">
<f:selectItems var="entry" value="#{myVar.get(input1.value)}"/>
</h:selectOneMenu>
</p>
</h:form>
Behind myVar is a map defined like that: Map<String, Collection<Double>>
The first dropdown menu shows a list of all the keys of that map (like desired), but the value behind that is the collection of values.
Here the HTML output of one option of that dropdown:
<option value="[1.0, 2.0]">SomeString</option>
My second dropdown should list the collection of double values stored in the map behind the key, that is selected by the first menu.
The problem now is, when I use value="#{myVar.get(input1.value)}" the value I get from .value is the collection and not the string/key of the map. So I never get the desired result.
How can I get the string/key behind the binded object input1? Is there something like input1.name or .toString? Is somewhere a documentary for this?
Ok, I solved it by applying the solution from here.
The first drop down has to be edited to the following:
<p>
<h:outputText value="Output1: " />
<h:selectOneMenu value="#{myMappingsBean.data.attribute1}" binding="#{input1}" required="true">
<f:selectItems var="entry" value="#{myVar.entrySet()}" itemValue="#{entry.key}" itemLabel="#{entry.key}"/>
</h:selectOneMenu>
</p>
As you can see, the entry set is created from the map and from that you use the key as value and label.
And with that the value behind input1.value now is not the collection of doubles but the key of the map.

Is it possible to change EL base on the selected value from dropdown list?

<th>
<h:outputText value="Pending Actions" style="font-weight:bold" />
<td colspan="4">
<p:selectOneMenu value="#{selectedValue}" required="true">
<f:selectItem itemValue="#{null}" itemLabel="--Select One--" />
<f:selectItem itemValue="organization1" itemLabel="ORGANIZAION1" />
<f:selectItem itemValue="organization2" itemLabel="ORGANIZAION2" />
<f:selectItem itemValue="organization3" itemLabel="ORGANIZAION3" />
<f:selectItem itemValue="organization4" itemLabel="ORGANIZAION4" />
</p:selectOneMenu>
<h:inputTextarea value="#{casesBean.organization1PendingActionDetails}"/>
</td>
</th>
As shown above, there is a dropdown list to let users select which organization they want to assign task.
In my database, there are columns
organization1PendingActionDetails,
organization2PendingActionDetails, etc.
So my question is:
Is it possible to change the inputTextarea value
based on the selected value from the dropdown list?
For example:
If the user selected organization2 then the inputTextarea will become value="#{casesBean.organization2PendingActionDetails}"
You will probably need to have more than one inputTextarea. Each area should have different value, and rendered set based on selected value. After selection set proper rendered value on inputTextarea and update it via ajax.
<p:ajax event="change" listener=#{casesBean.decideRenderedInputTextArea} update="InputTextAreasWrapper" />
Better solution:
It is way more elegant to have one inputTextArea. As you said you want to store the values from it into the database. So decide where to store data based on selected value inside been before performing action which will store data into database (after submit form).

How to pass knowledge of what button was pressed to a p:dialog

I'm trying to help users fill in entity Id numbers on a submittal form. I can't use a pulldown because there are 1000's.
In a PF dialog, I'm able to copy a selected value to the main form but I'm hardcoding the actionaListener into the commandLink to tell the popup dialog which h:textInput box on the main form to copy the value to and to render. If I have three h:inputText boxes I would then need to duplicate three p:dialogs.
For example in my p:dialog I would have a column in the datatable as such:
<h:commandLink value="Select This Item" onclick="PF('dlg').hide()">
<f:ajax render=":myForm:text_field_1" event="click"
listener="#{bean.popDownId1(item.id)}" />
</h:commandLink>
How can I pass those variables myForm:text_field_1 (the form name and field) to the p:dialog so that it becomes a more generic popup dialog? Also is there a way to not have to code a listener method for each field (popDownId1, popDownId2, etc...)As a bonus I'd also like to externalize the dialog and include it in every xhtml page instead of cutting and pasting as I'm doing now.
Here is more actual code:
form.xhtml
<h:form id="myForm">
<h:panelGrid columns="3">
<p:outputLabel value="Manager Employee Number: " />
<h:panelGroup>
<p:inputText id="managerId"
title="Type Employee Id or click the ? to search for their Id"
value="#{bean.department.manager}" >
<f:validator validatorId="com.company.app.EmployeeIdValidator" />
</p:inputText>
<p:commandButton title="Click here if you don't know their Employee Number"
id="managerId" value="Lookup Id"
onclick="PF('dlgManager').show();" type="button" >
</p:commandButton>
other fields and submit button
</h:form>
<p:dialog id="popup" modal="false" widgetVar="dlgManager" dynamic="true" >
<f:facet name="header">
<h:outputText value="Employee Number Finder" />
</f:facet>
<p>Search using any keyword.</p>
<h:form>
Keyword: <p:inputText id="search" value="#{employeeSearch.searchString}" />
<p:commandButton value="Search"
action="#{employeeSearch.searchByKeyword}">
<f:ajax execute="#form" render="output" />
</p:commandButton> (Enter keywords separated by spaces)
<p:dataTable id="output" var="employee" value="#{employeeSearch.employees}">
<p:column headerText="Action">
<h:commandLink value="Select" onclick="PF('dlgManager').hide()">
<f:ajax render=":myForm:managerId" event="click"
listener="#{bean.popDownManagerId(employee.id)}" />
</h:commandLink>
</p:column>
other columns(employee name, phone number, etc...)
</p:dialog>
you can see that I'd need to copy the dialog and tweak it a bit for every field on my form where I want to do an employee number lookup.
onclick="PF('dlgManager').show();">
onclick="PF('dlgSupervisor').show();">
onclick="PF('dlgFloorChief').show();">
EDIT
When applying BalusC's answer, if I add a second lookup Id button, the popup dialog to select an employee id has a command link which is tied to only the ManagerId field
action="#{bean.popDownManagerId(employee.id)}"
Also, when the second lookup id button is pressed the previous search results are still listed so the select command link would be referencing the wrong field to update
popup dialog

p:selectOneMenu, custom content and editable=true

I have the following usage of the p:selectOneMenu:
<p:selectOneMenu id="selectField"
value="#{someBean.someField}"
converter="#{selectItemConverter}" var="x" editable="true">
<f:selectItems
value="#{selectItemsBean.getSelectItems(tab, field)}" var="si"
itemLabel="#{si.label}" itemValue="#{si}" />
<p:column>
<h:outputText value="#{si.label}" />
</p:column>
<p:column>
<h:graphicImage library="images" name="noway_16x16.png"
title="#{si.disabledReason}" rendered="#{si.disabled}" />
</p:column>
<p:ajax event="change" update="#form" partialSubmit="true" process="selectField" />
</p:selectOneMenu>
As you can see, I use custom content in combination with editable=true. When I submit the form, the Converter gets the label of a selected item as the value, not the actual value. In the HTML page, the values are correct, e.g. <option value="C">C-style mounting</option>. With editable=false, the correct value (e.g. C is sent to the converter, with editable=true the converter retrieves C-style mounting.
What I want is that the user can either select one of the pre-defined items in the list and the server submits that value of the item OR the user enters something and that is submitted as value. But the current behavior is a bit strange - or am I just wanting too much?

Resources