JSF (Primefaces) Button in datatable to new page with data

Question

and primefaces.

I have a simple datatable with users. I want a button in each row "Add Item" that navigates to a new page where the user can input item details. Off the id of the customer must be used when creating a new item.

<p:dataTable id="dataTable" var="customer"
                value="#{customerController.lazyCustomerModel}"
                rowKey="#{customer.id}" styleClass="userDataTableStyle"
                paginator="true" rows="10"
                selection="#{customerController.selectedCustomers}"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                lazy="true" rowsPerPageTemplate="10,15,50">

                <p:column selectionMode="multiple" style="width:18px" />
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Id" />
                    </f:facet>
                    <h:outputText value="#{customer.id}" />
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Phone" />
                    </f:facet>
                    <h:outputText value="#{customer.phone}" />
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name" />
                    </f:facet>
                    <h:outputText value="#{customer.name}" />
                </p:column>

                <p:column>
                     <!-- Here a button to new page for adding item -->
                </p:column>


                <f:facet name="footer">
                                            <p:commandButton value="Delete Users"
                        actionListener="#{customerController.deleteUsers}"
                        update="dataTable" icon="ui-icon-trash" />
                </f:facet>

            </p:dataTable>

What is the nest way to do this... Can I navigate directly to the new page with the customer id in the url ? or should I submit to the controller with the id and then redirect ?

Update :

So I try to use viewParam : When I click the New Item button no parameters are passed in the URL.

If I type in the URL manually : like /newItem.jsf?customerId=2

The method

public void setCustomerId(String customerId) {
    this.customerId = customerId;
}

in NewItemController is called with the id 2 I then type in data in the new item form an press Save button, but now the customerId is null

customers.xhtml

<ui:define name="content">
        <f:metadata>
            <f:viewParam name="customerId" value="#{customerController.customerEnt.id}" />
        </f:metadata>
        <h:form id="customers" prependId="false" includeViewParams="true">

            <p:panelGrid styleClass="panelGridCenter">
                <f:facet name="header">
                    <p:row>
                        <p:column style="text-align: center;" colspan="2">Search Customer</p:column>
                    </p:row>
                </f:facet>

                // Rows with search fields

                <f:facet name="footer">
                    <p:row>
                        <p:column style="text-align: center;" colspan="2">
                            <p:commandButton value="Search"
                                action="#{customerController.search}"
                                update=":customers:dataTable" />
                        </p:column>
                    </p:row>
                </f:facet>
            </p:panelGrid>
            <br />

            <h:outputText
                value="Result is more than 100, only the first 100 results are displayed!"
                rendered="#{customerController.searchResultSize > 100}" />
            <h:outputText value="#{customerController.searchResultSize}" />
            <br />
            <p:dataTable id="dataTable" var="customer"
                value="#{customerController.customers}" rowKey="#{customer.id}"
                styleClass="userDataTableStyle" paginator="true" rows="10"
                selection="#{customerController.selectedCustomers}"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                lazy="true" rowsPerPageTemplate="10,15,50">

                // Columns

                <p:column>
                    <p:commandButton value="New Item" action="#{customerController.newItem()}"/>
                </p:column>

            </p:dataTable>

        </h:form>

    </ui:define>

CustomerController Only showing the important part here...

@SuppressWarnings("serial")
@SessionScoped
@Named
public class CustomerController implements Serializable {

    private Long customerId;

    public String newItem() {
        return "newItem?faces-redirect=true&includeViewParams=true";
    }

    public Long getCustomerId() {
        return customerId;
    }

    public void setCustomerId(Long customerId) {
        this.customerId = customerId;
    }
}

newItem.xhtml

    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    template="/WEB-INF/templates/default.xhtml">

    <div class="center">
        <ui:define name="content">
            <f:metadata>
                <f:viewParam name="customerId" value="#{newItemController.customerId}" />
            </f:metadata>

            <h:form id="item">
                <p:messages id="messages" />
                <p:panelGrid styleClass="panelGridCenter">
                        ...
                </p:panelGrid>
            </h:form>
        </ui:define>
    </div>
</ui:composition>

NewItemController

    @SuppressWarnings("serial")
@ViewScoped
@Named
public class NewItemController implements Serializable {

    private String customerId;

public void save() throws Exception {
        try {
            CustomerEnt customerEnt = null;
            if (StringUtils.isNotBlank(customerId)) {
                customerEnt = customerDas.find(Long.parseLong(customerId));
            } else {
                throw new Exception("Customer id not set when creating a new item");
            }
            itemEnt.setCustomerEnt(customerEnt);
            serviceSLSB.save(itemEnt);
        } catch (Exception e) {
            String errorMessage = getRootErrorMessage(e);
            FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_ERROR, errorMessage, "Saving unsuccessful");
            facesContext.addMessage(null, m);
        }
    }

    public String getCustomerId() {
        return customerId;
    }

    public void setCustomerId(String customerId) {
        this.customerId = customerId;
    }
}

score 1 · Answer 1 · edited May 23 '17 at 10:25

You can do both, to pass the parameter to a bean in the controller you can do like this:

<h:commandButton value="Link" action="#{formBean.someAction}">
    <f:param name="customerId" value="123456" />
</h:commandButton>

An then on the form bean use @ManagedProperty:

@ManagedProperty(value = "#{param.customerId}")
private String customerId;

... needs getters and setters ...

Or you can do it with a link with a direct GET and parameters, and on the target page read the GET parameter and save it on the bean like this (see this post):

<f:metadata>
    <f:viewParam name="customerId" value="#{formBeanbean.customerId}" />
</f:metadata>

JSF (Primefaces) Button in datatable to new page with data

1 Answers1