Adding row functionality to Existing fields in Visualforce Page

Add Row Functionality

Adding row functionality to existing fields in the Visualforce page in necessary because there are use cases where there are needs to add row functionality to existing ones on a Visualforce page.  This is important so that developers can create multiple records on a given object or on its Master object. To learn more on Add row, you can also check my post on How to insert parent record and list of Child records in Visualforce

For this post, a custom object – Customer is used. I intentionally used a custom object because most online examples are based on Standard objects which some people may find difficult to walk around. The Visualforce Page will have rows in one column like this:



Clicking the Add button will add another set of rows with the same format. That is,


However, if want a different layout, all you need do is to change the column attribute of <apex:pageBlockSection>  to 2 or 3 as per your use case. For example, changing the column to 2 produces the UI below:


Clicking the Add button will also produce a similar format – that is


Notice that the Save button on the pages appears only at the top. The reason for this is because of the location attribute of <apex:pageBlockButtons> which was set to top as indicated in the code.

The Visualforce code that produces the above User Interface is written below:

Below is the custom Controller for the page:


Leave a Reply

Close Menu