Skip to main content

Connect #ZOOM with #Salesforce using #Zapier | Salesforce Tutorials

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



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
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 : 



Comments

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
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<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials

Hello folks,
In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 
Prerequisite : 
Create a custom object WhatsApp__c
Create custom fields as shown below : 


Please follow the code below : 

WhatsAppComponent 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<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action="{!c.doInit}"value="{!this}"/><articleclass="slds-card"><divclass="slds-card__header…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …