Using just JSF, can I do this ? Or do I need to add in more layers and functionality to the program?
This is what I have so far with it:
<tr:form usesUpload="true">
<trh:tableLayout width="100%" cellPadding="10" borderWidth="0"
id="Table">
<trh:rowLayout>
<trh:cellFormat columnSpan="4">
<ocau:inlineMessage />
</trh:cellFormat>
</trh:rowLayout>
<tr:panelBox styleClass="roundedPanelPrimary">
<trh:rowLayout halign="center">
<trh:cellFormat halign="center">
<tr:inputText styleClass="tabdata" contentStyle="normalContent"
label="Account Number"
value="#{fraudSearch.fraudCustomerReqtUIModelBean.accountNumber}"
accessKey="13"
>
</tr:inputText>
</trh:cellFormat>
<trh:cellFormat halign="left">
<tr:commandButton text="Search" id="Search"
action="#{fraudSearch.getIBSNotesData}" styleClass="Button"
halign="center"
>
</tr:commandButton>
</trh:cellFormat>
</trh:rowLayout>
</tr:panelBox>
<tr:panelBox styleClass="roundedPanelPrimary"
rendered="#{fraudSearch.displaySearchResults}">
<trh:tableLayout cellPadding="10" borderWidth="0" id="Table"
width="100%">
<trh:rowLayout>
<tr:panelTabbed position="above" inlineStyle="width:auto">
<tr:showDetailItem text="IBS Data Extract" id="IBSDataExtract"
immediate="true">
<ui:include
src="/pages/recovery/fraud/displayFraudRPAIBSDataExtract.jspx">
</ui:include>
</tr:showDetailItem>
<!--
<tr:showDetailItem text="Non-Monetary Data" id="IBSNonMonData"
immediate="true">
<ui:include
src="/pages/recovery/fraud/displayFraudRPANonMonetaryData.jspx">
</ui:include>
</tr:showDetailItem>
-->
</tr:panelTabbed>
</trh:rowLayout>
</trh:tableLayout>
</tr:panelBox>
</trh:tableLayout>
</tr:form>
So far, I have attempted to add the access key to both the text box and the button, but it doesn't appear to work. Any point in the right direction would be appreciated.
Trinidad provides a defaultCommand within it's formtag, with wich you should be able to do, what you want. See here: tr:form
Related
I am trying to render a data table using ajax (BootsFaces) according to the values provided in the form. Unfortunately, desired part does not render. I can see the ajax request is going in the network tab, but it does not do anything (Area does not render and this searchPartialBean.getSearchList() method does not get called). Below is my code snippet. Is there any issue in the way I am doing it ?
<b:tab title="Search">
<h:form>
<b:row>
<b:column mediumScreen="7">
<b:inputText placeholder="Telephone number" label="Telephone number"
value="#{searchPartialBean.telephoneNumber}"/>
<b:inputText placeholder="First name" label="First Name"
value="#{searchPartialBean.firstName}"/>
<b:inputText placeholder="Last name" label="Last Name"
value="#{searchPartialBean.lastName}"/>
<b:commandButton look="primary" id="search-form-submit" value="Search"
update="serach-results-table"/>
</b:column>
<b:column mediumScreen="5">
<b:alert severity="info" title="Info">
This will contain the search help.
</b:alert>
</b:column>
</b:row>
<br />
<b:panel id="serach-results-table">
<b:dataTable rendered="#{searchPartialBean.valuesPresent}" value="#{searchPartialBean.getSearchList()}" var="patient">
<b:dataTableColumn label="Date" value="#{patient.firstName}"/>
</b:dataTable>
</b:panel>
</h:form>
</b:tab>
You've wrapped a form in a tab. Both widgets define a namespace, which, in turn, adds a prefix to the id of each widget within. Probably that's the problem.
My first approach would be to add a colon to indicate you're searching in the inner namespace:
update=":search-results-table"
If that doesn't work, you can use the recursive search expression of BootsFaces:
update="**:search-results-table"
However, my favorite approach is to use a CSS pseudo class like so:
update="#(.search-results-table)"
<b:panel styleClass="search-results-table">
I'm new to jsf and not sure how to frame the question in a right way. I'm doing a name lookup functionality and my input form is as follows:
Accept input from a text field.(Backed by managed bean and
getters and setters)
Invoke the action using command button.
Display it back on the UI.
I'm not able to paste the entire code because of confidentiality.
<h:form>
<p:outputLabel value="ABC" />
<p:inputText id="a" value="#{mybean.variable}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name">
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
The above mentioned works fine,However I have 5 input text fields and their corresponding action methods like as follows:
<p:outputLabel value="DEF" />
<p:inputText id="b" value="#{mybean.variable1}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name" >
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
and so on.
When I put all the text boxes and their corresponding actions,the input is not passed to the backend and the console does not display anything.
Any help appreciated.
Thanks.
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
I have a question regarding the primefaces component p:selectBooleanCheckbox.
I have following code, which renders a simple boolean checkbox with its label.
<p:selectBooleanCheckbox id="agb" value="#{mobiFormF000001Model.agbChecked}" itemLabel="#{msgs['agb']}">
<f:ajax render="submit" />
</p:selectBooleanCheckbox>
Now my problem is, that in the label i have an URL, which now is escaped and my label looks like this:
Ich bestätige, dass ich die Angaben zum Datenschutz gelesen habe und diese akzeptiere.
Is there a way to get that part rendered as link?
Why don't you simply use <h:outputText> that has the escape property?
<p:selectBooleanCheckbox id="agb" value="#{mobiFormF000001Model.agbChecked}" >
<f:ajax render="submit" />
</p:selectBooleanCheckbox>
<h:outputText escape="false" value="#{msgs['agb']}" />
You can link a p:outputLabel to the checkbox and put any content in its body:
<p:selectBooleanCheckbox value="#{bean.value}"/>
<p:outputLabel for="#previous">
I agree to the terms and conditions
</p:outputLabel>
I've inserted a Primefaces Slider on my page with very basic settings, the problem is once I click on its button, it doesn't stop moving with mouse. it doesn't a matter where in the page the mouse pointer is. The Slider button follows the mouse position to right or left. does any body an idea how to solve the problem?
<h:outputLabel styleClass="form-label-top-right" for="area">Area:
<h:outputText id="output" value="#{formbean.selectedArea}"/> Km
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:outputLabel>
I think it is the way you used h:outputLabel to contain these other tags not allowing the mouseup event to bubble up. Use a h:panelGrid with four columns instead.
For example:
<h:panelGrid columns="4">
<h:outputLabel styleClass="form-label-top-right" for="output" value="Area:" />
<h:panelGroup>
<h:outputText id="output" value="#{formbean.selectedArea}"/>
<h:outputText value="Km"/>
</h:panelGroup>
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:panelGrid>
Problem resolved. It was the "FireQuery" Plugin for FireFox which caused the problem. uninstalling that