Multipurpose VF #Component to Add Multiple Records on a Button's Click | #Salesforce Tutorials

Kapil May 30, 2020


Hello folks, 

In this article I will create a Visualforce component to add Contact records in a list on click of a button then I will save all records together on a single button's click.

As well as with add button I will also create a delete button in list, to delete a particular contact record from the list.

I am using this page on Account Details page that's why I am getting the Account ID from URL. If you are running it as separate VF page so you have to put the Account ID manually in the Controller.

It could be useful in a scenario where you want to add multiple records on a single button's click. I.E an order taking application for restaurant or a billing system in a super market

Please follow below code : 

AddContactVF
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<apex:page lightningStyleSheets="true"  standardController="Account" extensions="AddContactV1CTRL" showQuickActionVfHeader="false" >
    <apex:slds />
    <head>
        <style>
            div.hideCurrDate span.dateInput span.dateFormat{ display:none; }
            .spinnerBg{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #000;
            opacity: 0.1;
            z-index: 999999;
            }
            .spinner{
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url("/img/loading32.gif");
            background-size: 56px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            z-index: 9999999;
            opacity: 1;
            }
        </style>
    </head>
    
    <apex:form >
        <apex:actionFunction name="addNewAI" action="{!AddCon}" reRender="conPanel,newConPanel" />
        <apex:actionFunction name="removeAI" action="{!removeCon}" reRender="conPanel" />
        <apex:actionStatus id="spinnerStatus">
            <apex:facet name="start">
                <div class="spinnerBg" />
                <div class="spinner" />
            </apex:facet>
        </apex:actionStatus>
        <div class="slds-scope">
            <div class="slds-form">
                <div class="slds-grid slds-wrap">
                    <apex:outputPanel id="newConPanel"  >
                        <table class="slds-table slds-table_cell-buffer slds-table_header-hidden" style="margin-left:-23px; max-width:720px">
                            <tbody>
                                <tr class="slds-hint-parent">
                                    <td data-label="First Name">
                                        <div class="slds-truncate" title="Cloudhub">
                                            <div class="slds-form-element">
                                                <div class="slds-form-element__control" style="max-width:300px">
                                                    <label class="slds-form-element__label" for="form-element-01">First Name</label>
                                                    <div class="slds-form-element__control" style="max-width:300px">
                                                        <apex:inputText value="{!FirstName}" label="" style="width:300px"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td data-label="Last Name">
                                        <div class="slds-truncate" title="Cloudhub">
                                            <div class="slds-form-element">
                                                <div class="slds-form-element__control" style="max-width:300px">
                                                    <label class="slds-form-element__label" for="form-element-01">Last Name</label>
                                                    <div class="slds-form-element__control" style="max-width:300px">
                                                        <apex:inputText value="{!LastName}" label="" style="width:300px"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td data-label="Mobile">
                                        <div class="slds-truncate" title="Cloudhub">
                                            <div class="slds-form-element">
                                                <div class="slds-form-element__control" style="max-width:300px">
                                                    <label class="slds-form-element__label" for="form-element-01">Mobile</label>
                                                    <div class="slds-form-element__control" style="max-width:300px">
                                                        <apex:inputText value="{!MobilePhone}" label="" style="width:300px"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="form-element-01">.</label>
                                                <div class="slds-form-element__control" style="max-width:300px; margin-top:0px">
                                                    <apex:commandButton value="+" action="{!addCon}" reRender="conPanel,newConPanel" style="font-size:x-large; font-weight:bold" />
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                    </apex:outputPanel>
                    <div class="slds-col slds-size_12-of-12">
                        <Br/>
                        <apex:outputPanel id="conPanel">
                            <table class="slds-table slds-table_cell-buffer slds-table_header-hidden" style="margin-left:-23px; max-width:720px">
                                <tbody>
                                    <apex:variable var="index" value="{!0}" />
                                    <apex:repeat value="{!conList}" var="cList" id="conRepeat"  >
                                        <tr class="slds-hint-parent">
                                            <td data-label="First Name">
                                                <div class="slds-truncate" title="Cloudhub">
                                                    <div class="slds-form-element">
                                                        <div class="slds-form-element__control" style="max-width:300px">
                                                            <apex:inputField value="{!cList.FirstName}" label="" style="width:300px"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-label="Last Name">
                                                <div class="slds-truncate" title="Cloudhub">
                                                    <div class="slds-form-element">
                                                        <div class="slds-form-element__control" style="max-width:300px">
                                                            <apex:inputField value="{!cList.LastName}" label="" style="width:300px"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-label="Mobile">
                                                <div class="slds-truncate" title="Cloudhub">
                                                    <div class="slds-form-element">
                                                        <div class="slds-form-element__control" style="max-width:300px">
                                                            <apex:inputField value="{!cList.MobilePhone}" label="" style="width:300px"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                
                                                <div>
                                                    <div class="slds-form-element">
                                                        <div class="slds-form-element__control" style="max-width:300px; margin-top:0px">
                                                            <apex:commandButton value="X" action="{!removeCon}" rerender="conPanel">
                                                                <apex:param name="rowToBeDeleted" value="{!index}" assignTo="{!selectedRowIndex}"></apex:param>
                                                            </apex:commandButton>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <apex:variable var="index" value="{!index + 1}" />
                                    </apex:repeat>
                                </tbody>
                            </table>
                        </apex:outputPanel>
                    </div>
                    
                    <div class="slds-col slds-size_12-of-12">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="form-element-01">.</label>
                            <div class="slds-form-element__control" style="max-width:900px">
                                <apex:commandButton value="Save" status="spinnerStatus" action="{!save}" rerender="msg" styleClass="slds-button slds-button_success"  /> &nbsp;&nbsp;
                                <apex:commandButton value="Cancel" action="{!cancel}" styleClass="slds-button slds-button_destructive" />
                            </div>
                        </div>
                    </div>
                </div>                   
            </div>
        </div>
    </apex:form>
</apex:page>


AddConactController
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
public class AddContactV1CTRL {
    
    public Contact con{get;set;}
    public Lead le;
    public Boolean success {get;set;}
    public Boolean saved{get;set;}
    public String accId{get;set;}
    public List<Contact> conList {get;set;}
    public List<Contact> conListDelete;
    public String FirstName{get;set;}
    public String LastName{get;set;}
    public String MobilePhone{get;set;}
    public Integer selectedRowIndex{get;set;}
    
    public AddContactV1CTRL(){
        
    }
    public AddContactV1CTRL(ApexPages.StandardController controller){
        //Get Account ID from URL
        accId=ApexPages.currentPage().getParameters().get('Id');
        conListDelete = new List<Contact>();
        conList = [SELECT Id, FirstName, LastName, MobilePhone FROM Contact where AccountId=:accId];
        if(conList==null){
            conList = new List<Contact>();
        }
        
        
    }
    
    public PageReference save(){
      Boolean goodToGo = true;
        PageReference reRend = new PageReference('/lightning/r/Account/'+accId+'/view');
        if(conList != null && conList.size()>0){
            for(Contact newCon:conList){
                if(newCon.FirstName == null || newCon.LastName == null || newCon.MobilePhone == null){
                    goodToGo = false;
                    ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.FATAL,'Please enter required fields'));
                }
            }
            if(goodToGo == true){
                upsert conList;
                if(conListDelete != null && conListDelete.size()>0){
                    delete conListDelete;
                }
                return reRend;
            }
            else{
                return null;
            }
        }
        else{
            if(conListDelete != null && conListDelete.size()>0){
                delete conListDelete;
            }
            return reRend;
        }
       
    }
    public void cancel(){
        
    }
    
    public void addCon(){
        Contact newCon = new Contact();
        newCon.FirstName = FirstName;
        newCon.LastName = LastName;
        newCon.MobilePhone = MobilePhone;
        newCon.AccountId = accId;
        conList.add(newCon);
        FirstName='';
        LastName = '';
        MobilePhone='';
        
    }
    public void removeCon(){
        conListDelete.add(conList[selectedRowIndex]);
        conList.remove(selectedRowIndex);
    }
    
}


Output : 



Tags:

Post a Comment

0 Comments