Monday 20 January 2014

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 


13 comments:

Unknown said...

Thanks Ash for nice information,

I had a simlar requriment like this where u need to add a new action function refresh . When u click on the refresh button i need to be reset of particular row.

Asish Kumar Behera said...

can you please share more details about your requirement ?, .I would be glad to help you.

Unknown said...

This was very helpful...
Thank you!

I am very new to salesforce.
Can you please guide me on how to write the test class for it!!??

Asish Kumar Behera said...

Thanks Roopal. Here is the test class .
http://salesforceworld4u.blogspot.in/2014/02/test-class-in-salesforce.html

Unknown said...

Please let me know why counter--; in removingRow method?

Unknown said...

Hello Asish,
Thank you so much for above code. i want to add a star rating in custom object. can you please provide me a code along with VF page on my email Id-anurag.pareek07@gmail.com

Asish Kumar Behera said...

@Samir,
Counter is just because of identifying particular row while we remove from page block table.

Anonymous said...

Nice stuff. Helped me a lot.

Rakesh Mungelkar said...

Awesome, very helpful.

nihar said...

hello Asish,
can u help me with my code

zom said...

Thank you so much for this. I'm using it on a vf page to add records to a grandchild table. But there is an issue - when Add, Delete is clicked the existing data in other rows are also cleared. Is there any way to make this work? I tried appending the list with entered data on change, but it doesn't work. I'm new to SF as well as coding in general. Please let me know if you can help. Thanks in advance!

zom said...

Thank you so much for this. I'm using it on a vf page to add records to a grandchild table. But there is an issue - when Add, Delete is clicked the existing data in other rows are also cleared. Is there any way to make this work? I tried appending the list with entered data on change, but it doesn't work. I'm new to SF as well as coding in general. Please let me know if you can help. Thanks in advance!

Kourt said...

Did you manage yo fix the issue? I am having the same Situation right now