Editing data

Now, let's add one more JSF index.xhtml to allow the users to edit and delete the contact details. Before we can edit a contact detail, we must add some JSF links to the list view so that the user can navigate to the edit and remove pages.

Let's modify the <h:dataTable> section in the index.xhtml view and add an additional column. The code looks as follows:

<h:dataTable id="contactTable"
  ... other columns as before ...
  <h:column>
    <f:facet name="header">
      <h:outputText value="Action" />
    </f:facet>
    <h:link styleClass="btn"
      outcome="editContactDetail.xhtml?id=#{contact.id}">
      <f:param name="id" value="#{contact.id}" />
      <span class="glyphicon glyphicon-edit"></span>
    </h:link>
    <h:link styleClass="btn"
      outcome="removeContactDetail.xhtml?id=#{contact.id}">
      <f:param name="id" value="#{contact.id}" />
      <span class="glyphicon glyphicon-trash">&lt...