Visualforce Edit Multiple Records

Visualforce template and example on how to create a an editable table of records, including adding and deleting.

Download .zip Salesforce Install View on GitHub

This project contains a Visualforce template and example on how to create a an editable table of records, including adding and deleting. More specifically, the example involved is creating an editable screen to allow managing of Contact records against an Account.

Note: The package does not include a default Account layout that is already customized in an attempt to not override any existing Page Layout. The custom buttons need to be manually added to the Page Layout.

Screenshots

View when no child records exist.

View when dynamically editing records. Note the ability to Delete rows on the right of the screen, as well as Add additional rows using the button below.

View when a system based error occurs upon save. By leveraging <apex:inputField> tags, validation automatically respects required fields and validation rules similar to a standard page layout.

Implementation Notes

This code was implemented using by creating a base class with as many generic implementations of logic as possible. This was done by making all references to objects as sObject, the base object type for all Salesforce objects. Each subsequent implementation of the child related list will require an implementation class tailored to the object type that is to be manipulated, as well as making customizations to the Visualforce page due to different fields being displayed.

The code involved breaks down into three main files:

  • EditableList.cls

    This is an abstract class that controller extensions can implement that defines generic implementation methods for manipulating the table, as well as persisting and deleting records.

  • EditableContactListExtension.cls

    This is a sample implementation class for an Account controller extension. Only the required method overrides are implemented.

  • EditableContactList.page

    Sample Visualforce implementation for managing Contact records against an Account. Allows adding, editing, and removing child records. This file will require modifications to add or remove different fields from the table.

Setup Screenshots

There is some minor setup involved. While the repository and install link both contain two custom buttons, one for the Account page and one for the Contacts related list, they do need to be added to the Account Page Layout.

Sample view of an Account Page Layout after configuration.

Creation of custom Manage Contacts button for Account.

Creation of custom Manage Contacts button for Contacts Related List (against the Contact object).

Adding custom Manage Contacts button to the Account Page Layout.

Adding the custom Manage Contacts button to the Account Page Layout's Contacts related list.

Installation Link