I want to create a JSF application.
Sorry for this over ambitious requirement.
In the application the user will have three drop downs.
Can we add multiple required conditions into one required attribute?
If a user selects the country Mexico / value 3 from the first drop down then he is required to choose the option Cancun / value 6 from the multiselect
Also If he selects the drop down value Continent North America He is required to choose the option of Chicago / value 2 from the multiselect
I have added the binding , required attribute for multiSelectListbox for multiple required options but they are not triggered when the drop down is selected
<h:form>
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
<p:panel header="Tranfer Destination" style="margin-bottom:10px;">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="country" value="Country: " />
<p:selectOneMenu id="country" value="#{dropdownView.country}" style="width:150px" required="true" binding="#{country}">
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropdownView.countries}" />
<p:ajax update="city"/
</p:selectOneMenu>
<p:outputLabel for="Continent" value="Continent: " />
<p:multiSelectListbox id="continent" value="#{dropdownView.continent}" style="width:150px" required="true" binding="#{continent}">
<f:selectItem itemLabel="Select Continent" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="Asia" itemValue="1"> </f:selectItem>
<f:selectItem itemLabel="Europe" itemValue="2"> </f:selectItem>
<f:selectItem itemLabel="South America" itemValue="3"> </f:selectItem>
<f:selectItem itemLabel="North America" itemValue="4"> </f:selectItem>
<f:selectItem itemLabel="Africa" itemValue="5"> </f:selectItem>
<p:ajax update="city"/
</p:multiSelectListbox>
<p:outputLabel for="city" value="City: " />
<p:multiSelectListbox id="city" value="#{dropdownView.city}" style="width:150px" required="#{(not empty param[country.6]) (not empty param[continent.4])}">
<f:selectItem itemLabel="Select City" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="New York" itemValue="1"> </f:selectItem>
<f:selectItem itemLabel="Chicago" itemValue="2"> </f:selectItem>
<f:selectItem itemLabel="Seattle" itemValue="3"> </f:selectItem>
<f:selectItem itemLabel="Toronto" itemValue="4"> </f:selectItem>
<f:selectItem itemLabel="Ontario" itemValue="5"> </f:selectItem>
<f:selectItem itemLabel="Cancun" itemValue="6"> </f:selectItem>
<f:selectItem itemLabel="Tijuana" itemValue="7"> </f:selectItem>
</p:multiSelectListbox>
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" update="msgs" action="#{dropdownView.displayLocation}" icon="pi pi-check" />
</p:panel>
</h:form>
List of Countries are populated from the database
ID NAME
1 USA-C
2 Canada-N
3 Mexico-C
The option Cancun / value 6 is required from the third drop down only If the user selects the country Mexico / value 3 from the first drop down.
The option Chicago / value 2 is required from the third drop down only If the user selects the continent North America / value 4 from the second drop down.
Other cities are optional for selection
If I have to do this, I won't use the required attribute and I will create a custom validator that checks the option selected on the first and second dropdown, and look if the third dropdown have the required values for the previous selection.
https://www.primefaces.org/showcase/ui/csv/custom.xhtml
Related
My project requirement is to set p:selectOneRadio false as default value.
On single click p:selectOneRadio to be set as true and on double click
p:selectOneRadio should be set false.
<p:selectOneRadio id="#{project.uampaiid}_createUser_access_radiobutton" value="#{dataAccess.accessRadio}"
layout="pageDirection"
rendered="#{dataAccess.accessRadioSelection}" disabled="#{dataAccess.disableAccessField}"
requiredMessage="Please Assign a Access for every role" onchange="reactToChangedRadio(this)" >
<f:selectItems value="#{dataAccess.roleUserList}" var="accessUser"
itemLabel="#{accessUser.role}"
itemValue="#{accessUser.roleId}.#{dataAccess.accessId}" />
</p:selectOneRadio>
To perform a double click in a p:selectOneRadio you can work with a commandLink
It will look like this
<h:commandLink id="commandLink" >
<p:ajax event="dblclick" listener="#{managedBean.someMethod()}" />
<p:selectOneRadio id="radioButton" value="#{managedBean.example}" >
<f:selectItem itemLabel="True" itemValue="True" />
<f:selectItem itemLabel="False" itemValue="False" />
</p:selectOneRadio>
</h:commandLink>
Hope that helped you.
My page: ---
Something is causing panelGrid to create an empty cell in several rows.
I'd like to have a visible two column table, first column a label, second column an inputText element or a selectMenu with a tooltip.
My workaround was this, create a 3 column table, and when panelGrid decides not to create an empty cell, add a <br></br> to prompt it to do so.
<h:panelGrid columns="3" style="text-align:left">
<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<h:outputLabel for="longitudeIdAct" value="Longitude: " />
<p:inputText id="longitudeIdAct" value="#{provisioningBean.longitude}" title="Longitude" />
<p:watermark for="longitudeIdAct" value="Longitude" />
<h:outputLabel id="equipmentDropMenuActLabel" for="equipmentDropMenuAct" value="#{provisioningBean.accessDeviceLabel}" />
<p:selectOneMenu id="equipmentDropMenuAct" value="#{provisioningBean.equipment}" title="Not needed for CSI or SIP"
disabled="#{provisioningBean.equipDisabled}" style="width: 100% !important">
<f:selectItem itemLabel=" Equipment" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{provisioningBean.equipments}" />
</p:selectOneMenu>
<p:tooltip for="equipmentDropMenuAct" />
<h:outputLabel for="rangeActId" value="Range: " />
<p:spinner id="rangeActId" value="#{provisioningBean.rangeAct}" min="1" title="Amount of telephone numbers to provide" size="3"
disabled="#{provisioningBean.rangeDisabled}" />
<br></br>
</h:panelGrid>
Is this a bug?
What am I missing here?
EDIT:
Oh neat! I managed to create a minimal example and it still has the same issue :D https://gist.github.com/WurmD/f3cb45669e6871acc77462f34891862f
screenshot - you need 10 rep to post images
So this is a 3 column h:panelGrid, but the third cell is being taken up by something
EDIT2: Same behavior with p:panelGrid
Thank you Kukeltje for this answer:
h:panelGrid columns="3" signify "start new row after each third element"
Thus, either put the watermarks (and other invisible elements) outside h:panelGrid, or use h:panelGroup to groups things that should only occupy one cell in the table:
<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<p:panelGrid columns="2" style="text-align:left">
<h:outputLabel for="orderIdAct" value="Order Number: *" />
<p:inputText id="orderIdAct" value="#{provisioningBean.orderNumberAct}" label="orderId" title="Order Number" />
<h:outputLabel for="customerNameIdAct" value="Customer: *" />
<h:panelGroup>
<!-- h:panelGroup to group things that should only occupy 1 cell in the table -->
<p:inputText id="customerNameIdAct" value="#{provisioningBean.customerName}" title="Customer Name" />
<p:watermark for="customerNameIdAct" value="Customer Name" id="watermarkcustomerNameIdAct" />
</h:panelGroup>
</p:panelGrid>
<p:panel id="executePanelAct">
<p:commandButton value="Execute Activation" id="actvateButton" update=":form:growl" styleClass="executeButton" />
</p:panel>
<!-- Items that don't need to be in panelGrid -->
<p:watermark for="orderIdAct" value="Order Number" id="watermarkorderIdAct" />
I am new to PrimeFaces and JSF.
i am trying to create to display multiple columns but i always get a single column from the data in the database. I won't a situation where the drop down (Combo Style) will show multiple columns but one column will set as the value column.
The xhtml portion is shown below. the {investmentProductsController.accountInfo} is a list from my bean. thank you.
<p:outputLabel value="#{products.CreateInvestmentProductsLabel_totalCostGL}" for="totalCostGL" />
<p:selectOneMenu id="totalCostGL" value="#{investmentProductsController.selected.totalCostGL}" editable="true" required="true" requiredMessage="#{products.CreateInvestmentProductsRequiredMessage_totalCostGL}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{investmentProductsController.accountInfo}" var="acc">
<p:column>
<h:outputText value="#{acc.accountID}" />
</p:column>
<p:column >
<h:outputText value="#{acc.accountNumber}" />
</p:column>
<p:column >
<h:outputText value="#{acc.accountName}" />
</p:column>
</f:selectItems>
</p:selectOneMenu>
The <p:column> tags needs to be outside the <f:selectItems> tag, so move the </f:selectItems> to above the columns.
<h:selectOneRadio value="#{abc.def}" id="1">
<f:selectItem itemLabel="1" itemValue="y" />
<f:selectItem itemLabel="2" itemValue="y" />
<f:selectItem itemLabel="3" itemValue="y" />
</h:selectOneRadio>
<h:selectOneRadio value="#{abc.xyz}" id="2">
<f:selectItem itemLabel="1" itemValue="y" />
<f:selectItem itemLabel="2" itemValue="y" />
<f:selectItem itemLabel="3" itemValue="y" />
</h:selectOneRadio>
Above code statements, create separate 3 radio buttons each for id 1, 2.
Selecting radio button on id 1, will toggle other 2 radio buttons. But it won't toggle id 2 radio buttons.
I would like to make all 6 radio buttons mutually inclusive of each other. So the user can select only 1 radio button out of 6.
Please guide me how this is achievable.
I would like to achieve the following in a JSF1.1 environment:
Gender: RadioButtonForFemale FEMALE RadioButtonForMale MALE
<h:panelGroup>
<h:outputLabel for = "searchSex" value = "#{bundle.Sex_Label}" style ="width:15%;">
</h:outputLabel>
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="verticle-align:top;font-size:95%;color:red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M"/>
</h:selectOneRadio>
</h:panelGroup>
Basically, all the radio button should be in the same row as the lable (Gender in our case).
Attached is my current code. the radio button appear in the next row. My PanelGrid has 1 column.
thanks,
Indeed, the <h:selectOneRadio> generates a <table> which is by default a HTML block element (i.e. always starts at a new line).
You'd need to set the CSS display property to inline-table.
<h:panelGroup>
<h:outputLabel for="searchSex" value="#{bundle.Sex_Label}" style="width: 15%;" />
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="display: inline-table; verticle-align: top; font-size: 95%; color: red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
</h:panelGroup>
But this is pretty clumsy. If you're already using a <h:panelGrid>, I'd recommend to just set its columns to 2 so that you can have labels in left column and inputs in right column.
<h:panelGrid columns="2">
<h:outputLabel for="searchSex" value="#{bundle.label_sex}" />
<h:selectOneRadio id="searchSex" value="#{yy.searchSex}">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
<h:outputLabel for="somethingElse" value="Something else" />
<h:inputText id="somethingElse" value="#{yy.somethingElse}" />
...
</h:panelGrid>