Add/Remove Functionality in a VF page for Creating Multiple Records For a Particular Object.

Hi Guys

This is a very simple post. I had come across a scenario where I was asked to develop some functionality where user can create list of records at a time(clicking on save button on one time) and can remove row.

Here I have created a pageblock table and there I am displaying 5 rows to enter data and there column, Name , Phone and Action. In Action column Delete link is present.When that link(Delete) is clicked then particular row will be removed. Two button is there Add Row and Save.

Add Row-->  When that button is clicked one more row will be created in the pagablock table

Save--> It will save the record.

Here is the page

<apex:page controller="creatingListOfRecordsController">

    <apex:form >

    

        <apex:pageBlock title="Creating List Of Account Records">

        <apex:pageMessages></apex:pageMessages>

            <apex:pageBlockButtons location="top">

                <apex:commandButton value="Add Row" action="{!addRow}" reRender="table" immediate="true"/>

            </apex:pageBlockButtons>

                <apex:pageBlockTable value="{!accountwrapperList}" var="page" id="table"> 

                    <apex:column headerValue="Name">

                        <apex:inputField value="{!page.account.name}"/>

                    </apex:column>

                    <apex:column headerValue="Phone">

                        <apex:inputField value="{!page.account.Phone}" />

                    </apex:column>

                    <apex:column headerValue="Action">

                        <apex:commandLink value="Delete" action="{!removingRow}" immediate="true">

                            <apex:param name="index" value="{!page.counterWrap}"/>  

                        </apex:commandLink>

                    </apex:column>

                </apex:pageBlockTable>

                <apex:commandButton value="Save" action="{!saving}" />

            

        </apex:pageBlock>

    </apex:form>

</apex:page>

Here is the Controller

public with sharing class creatingListOfRecordsController {

    

    public list<Account> accountList{get;set;}

    public list<Accountwrapper> accountwrapperList{get;set;}

    public Integer counter{get;set;}

    

    public creatingListOfRecordsController(){

           counter = 0;

           accountList = new list<Account>(); 

           accountwrapperList = new list<Accountwrapper>();

           for(Integer i=0;i<5;i++){

               Accountwrapper actWrap = new Accountwrapper(new Account()); 

               counter++;

               actWrap.counterWrap = counter;

               accountwrapperList.add(actWrap); 

               

           }

       

    }

    

    public PageReference addRow(){

        //accountList.add(new Account());

        Accountwrapper actWrap = new Accountwrapper(new Account()); 

        

        counter++;

        actWrap.counterWrap = counter; 

        accountwrapperList.add(actWrap); 

        return null;    

    }

    public PageReference removingRow(){

    

        Integer param = Integer.valueOf(Apexpages.currentpage().getParameters().get('index'));

        

        for(Integer i=0;i<accountwrapperList.size();i++){

            if(accountwrapperList[i].counterWrap == param ){

                accountwrapperList.remove(i);     

            }

        }

        

        

        counter--;

        return null;    

    }

    

    public PageReference saving(){

        list<Account> updateAccountList;

        updateAccountList = new list<Account>();

        if(!accountwrapperList.isEmpty()){

            for(Accountwrapper accountWrapper:accountwrapperList){

                updateAccountList.add(accountWrapper.account);

            }

        }

        if(!updateAccountList.isEmpty()){

            upsert updateAccountList;

        }

       ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.Info,'Record Saved Successfully.');

       ApexPages.addMessage(myMsg); 

        return null;

    }

    

    public class Accountwrapper{

        public Account account{get;set;}

        public Integer counterWrap{get;set;}

        

        public Accountwrapper(Account act){

            this.account = act;  

             

        }

    }

    

}

The out put will be exactly like this image