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"><...