I have a scenario where I have to give an option to the user to select Applications and its related Profiles. The user should select at least one Application and One Profile and he can also select more than one. Each Application has its own Profiles and there can be multiple applications. My UserBean has a List of ApplicationVO and that ApplicationVO has isSelected (boolean), application id (int), application name(String) and Profile List. That Profile list has List of ProfileVO and ProfileVO has isSelected(boolean), profile id(int) and Profile name(String).
I am new to JSF and tried to use datatable and SelectBooleanCheckBox which works fine. But at this point I am not sure how to validate and display the error message in the same JSP with the remaining user entered data intact. Also I am not sure how to update the bean with the options checked/unchecked by the user.
When the user clicks Submit my validations should be:
At least one application should be selected
If an application is selected, at least one profile should be selected
Profile check boxes should be disabled until the application is selected
When the user unchecks the application check box, profiles check box should be disabled.
I have the following code. Please help me and can also suggest me if there are any other best way to accomplish the same.
<h:dataTable value="#{UserBean.applicationList}" var="appList">
<h:column>
<f:facet name="header">
<h:outputText value="Applications" />
</f:facet>
<h:selectBooleanCheckbox value="#{appList.isSelected}" label="#{appList.applicationName}"/>
<h:outputText value="#{appList.applicationName}" />
</h:column>
<h:column>
<f:facet name="header" >
<h:outputText value="Profiles" />
</f:facet>
<h:dataTable value="#{appList.profileList}" var="profileList">
<h:column>
<h:selectBooleanCheckbox value="#{profileList.isSelected}" />
<h:outputText value="#{profileList.profileName}" />
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
I was able to implement by validating in the bean and was able to get the selected values from the ApplicationList
Related
I have a problem with data in a <p:rowExpansion> being loaded before the row is expanded (which leads to loads of web service requests).
I am using PrimeFaces 5.2. I have a dataTable with lazy loading and pagination. Inside of the table, I have <p:rowToggler> with a <p:rowExpansion>:
<p:dataTable var="order"
widgetVar="orderTable"
lazy="true"
value="#{ordersBean.orders}"
paginator="true"
rows="20"
rowsPerPageTemplate="20,50,100"
filterDelay="300"
styleClass="filtered">
<p:column width="4%">
<p:rowToggler />
</p:column>
<p:column headerText="Order number" width="96%">
<h:outputText value="#{order.number}" />
</p:column>
<p:rowExpansion>
<h:panelGrid columns="1">
<h:outputText value="#{order.number}" />
<h:outputText value="#{order.info}" />
<h:dataTable var="item" value="#{ordersBean.getItemsInOrder(order.number)}">
<h:column>
<h:outputText value=" #{item.title}" />
</h:column>
</h:dataTable>
</h:panelGrid>
</p:rowExpansion>
</p:dataTable>
When I first load the page, the getItemsInOrder() method is not called, except for when I expand a row. But if I navigate to page 2 (or if I navigate back to page 1 later) using the paginator, then getItemsInOrder() is called for every row in the outer table. Since I have 20 rows showing, navigating between the pages leads to 20 web service requests (in getItemsInOrder()).
How do I prevent it from calling the getItemsInOrder() method until the row is expanded?
I have the same problem. Until I find a better solution, this is the workaround I am using:
register a (DataTable event-) listener on event rowToggle.
In the listener, store an identifier of the toggled row. Hint: you can get the row object with event.getData()
Instead of directly accessing the data requesting component, write a proxy method in front of it which checks if the requested object belongs to the identifier stored in the listener.
I've got a datatable in a .xhtml page, that shows products of a database.
Let's say that I can only see Name and Code for every row, how can I show more detail of the product in the same page?
Moreover, my product bean is in ViewScope, so i'm not able to show details in another .xhtml page (I've tried many times, but if in case you guys have a solution for this, that's good).
PS: I don't know anything about Javascript yet, so i'd prefer mostly solutions based on jsf and java :)
You mean that you want to display more fields at datatable?
Add more columns..
<h:dataTable value="#{pr.products}" var="p">
<h:column>
<f:facet name="header">Name</f:facet>
#{p.name}
</h:column>
<h:column>
<f:facet name="header">Code</f:facet>
#{p.code}
</h:column>
<h:column>
<f:facet name="header">Price</f:facet>
#{p.price}
</h:column>
........
</h:dataTable>
JSF example: http://www.mkyong.com/jsf2/jsf-2-datatable-example/
If you using primefaces see showcase: http://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
EDIT
If you want to make a dialog that shows the details of the selected product see at primefaces showcase the "selection" example.
This question already has an answer here:
Using <ui:repeat><h:inputText> on a List<String> doesn't update model values
(1 answer)
Closed 7 years ago.
I'm trying to display the data from a List contained in a bean via a datatable, and have actions performed by code as the user types. It initially displays ok, and changes to the List are reflected in UI.
My issue is that values entered into the inputText are ignored. Tried looking for solutions, I've tried checking the List as the values changed, and also tried to check without the ajax in case that was the issue (no change). Have tried using session and view scoped bean without luck. Tried wrapping the Strings in a POJO.
Going crazy here. Feel like I'm missing something obvious. Any idea?
<h:dataTable id="multioptionanswers"
value="#{multiTextBean.texts}" var="texts">
<h:column>
<f:facet name="header">
<h:outputText value="Enter Values"></h:outputText>
</f:facet>
<h:inputText value="#{texts}" immediate="true">
<f:ajax event="blur" execute=":addgroup"
render=":addgroup"
listener="#{multiTextBean.update}" />
</h:inputText>
</h:column>
</h:dataTable>
**addgroup is a panel group that the data table resides in.
Worked it out, needed change to how the inputtext read the data. Solution below in case it helps someone :
<h:dataTable id="multioptionanswers" binding="#{table}"
value="#{multiTextBean.texts}" var="texts">
<h:column>
<f:facet name="header">
<h:outputText value="Enter Values"></h:outputText>
</f:facet>
<h:inputText
value="#{multiTextBean.texts[table.rowIndex]}">
<f:ajax event="blur" execute=":addgroup" render=":addgroup"
listener="#{multiTextBean.update}" />
</h:inputText>
</h:column>
</h:dataTable>
I require some advice on a query regarding record navigation.
I have a datatable that is displayed with the results of an Hibernate query. The datatable looks something like this:
<h:dataTable value="#{myBean.dataList}" var="dataItem">
<h:column>
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<h:outputText value="#{dataItem.id}" />
</h:column>
The user then selects a row and it displays a form with the details on a JSF form.
What I would like to do is allow the user to go to the next row in the results table from the JSF form without going 'back' to the results table.
Is this possible?
You can do a ajax call on click of Next button present on the form. When the user presses Next, on default event "action", you can write code in a managed bean method which will be called through the listener property of f:ajax. in this method call, you can set the values of different fields on the form depending on the Id of the next record. These values may be used by different components on your form.
<h:commandButton value="Next">
<f:ajax event="action" execute="#this" render="#form" listener="#{myBean.populateNextRecord}"/>
</h:commandButton>
I am using JSF 2.0 with Primefaces. I have a page with a data table containing a list of users in the system. Each user can have a collection of roles, so i would like to have a button to select a bunch of roles. I wanted this to be an ajax selector and reusable from other pages, so this is how i have laid it out.
User List page
<h:form prependId="false">
<p:dataTable id="userList" var="user" value="#{userBean.users}">
<p:column id="modelHeader">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{user.name}" />
</p:column>
<p:column>
<f:facet name="header">
Select Roles
</f:facet>
<p:commandButton id="selectButton" oncomplete="roleDialog.show()" icon="ui-icon-search" title="Select Roles" />
</p:column>
</p:dataTable>
</h:form>
Dialog defined inside user list page, but the contents will be moved to an include to promote reusability
<p:dialog header="Roles" widgetVar="roleDialog" resizable="true" id="roleDialog" modal="true">
<h:form prependId="false">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<p:dataTable id="roleList" var="user" value="#{roleBean.roles}">
<p:column id="modelHeader">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{role.name}" />
</p:column>
<p:commandButton id="selectButton" actionListener="#{roleBean.selectRoles}" title="Select Roles" />
</h:panelGrid>
</h:form>
</p:dialog>
My question is, I am not sure how to achieve the following.
I would like to pass arguments to the role selector as criteria before rendering the content in the dialog.I can do this via f:setPropertyActionListener.. correct?
After the role is selected, i would like to pass the selected id back to the user list page. I can do this via addCallbackParam, correct?
Then i would like to pass that value back into the userList bean to an action listener to associate this role(s) to the user
What is the best pattern to achieve this workflow in JSF. I do not want to duplicate my role selector in each page as i would like to re-use that.
Thank you for your patience in reading through this long post. I appreciate your response and
suggestions.
The best pattern for this would be to implement a composite component.