Adding Multiple Contact, Opportunities to Account with action status and Jquery example.

Adding Multiple Contact, Opportunities to Account with action status and Jquery example.

Adding Multiple Contact, Opportunities to Account with action status and Jquery example.

Hi,

In this post i am going to show how to change the back ground of the page when command button (Save) is clicked, to achieve this i used JQuery with Action Status.

 Steps:    
1). Include JQuery library in VF page.
2). Create command button with action status
3). Calling JQuery methods from action stats 


Output: 

Once the user clicks on the save button changing the back ground with JQuery and CSS.


Visualforce Page:

<apex:page controller="AddContactsOpportunitiesCLS" id="thePage" action="{!init}">

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/>
<script>
    j$ = jQuery.noConflict();
    
    function showLoadingDiv() {
        var newHeight = j$("[id$=theFm]").css("height");//Just shade the body, not the header
        j$("[id$=loading-curtain-div]").css("background-color", "black").css("opacity", 0.50).css("height", newHeight).css("width", "90%");
    }
    function hideLoadingDiv() {
        j$("[id$=loading-curtain-div]").css("background-color", "black").css("opacity", "1").css("height", "0px").css("width", "90%");
    }
    
</script>
<style>
    #loading-curtain-div {
        height:0px;
        width:100%;
        position:absolute;
        z-index:5;
        //-webkit-transition: all 0.30s ease-out;
        //-moz-transition: all 0.30s ease-out;
    }
</style>



 <apex:form id="theFm">
   <div id="loading-curtain-div"/>
   <apex:pageBlock title="Account--Contacts--Opportunities Creation" >
   <apex:actionStatus id="save-lead-status" onstart="showLoadingDiv();" onstop="hideLoadingDiv();"/>
    <apex:pageblockButtons >
     <apex:commandButton value="Save" action="{!Save}" status="save-lead-status" reRender="theFm" />
     <apex:commandButton value="Cancel" action="{!Cancel}" immediate="true"/>
    </apex:pageblockButtons>
     
     
     <apex:pageBlockSection id="pbs" columns="2" title="Account Details">      <apex:inputField value="{!acc.Name}"/>
      <apex:inputField value="{!acc.accountNumber}"/>
     <apex:inputField value="{!acc.Type}"/>
     <apex:inputField value="{!acc.Industry}"/>
     </apex:pageBlockSection>
     
     <apex:pageBlockSection title="Contact Details" columns="1" collapsible="false">
       <apex:outputPanel id="contactHead">
      <apex:variable value="{!0}" var="rowNum"/>  
        <apex:pageBlockTable value="{!waConList}" var="eachRecord"> 
         <apex:column headerValue="Action">
        <apex:commandLink value="Remove" style="color:red" action="{!removeRowFromConList}" rendered="{!rowNum > 0}" rerender="contactHead" immediate="true" status="conRemoveLink" >
             <apex:param value="{!rowNum}" name="rowToRemove" assignTo="{!rowToRemove}"/>
         </apex:commandLink>
         <apex:actionStatus id="conRemoveLink" >
                <apex:facet name="start" >
                  <img src="/img/loading.gif" />                    
                </apex:facet>
         </apex:actionStatus>
         <apex:variable var="rowNum" value="{!rowNum + 1}"/>
      </apex:column>
      <apex:column headerValue="First Name">
                            <apex:inputField value="{!eachRecord.record.FirstName}" required="true"/>
       </apex:column>
       <apex:column headerValue="Last Name">
                            <apex:inputField value="{!eachRecord.record.LastName}" required="true"/>
       </apex:column>
       <apex:column headerValue="Phone">
                            <apex:inputField value="{!eachRecord.record.phone}" required="true"/>
       </apex:column>
       <apex:column headerValue="Email">
                            <apex:inputField value="{!eachRecord.record.email}" required="true"/>
       </apex:column>
      
        </apex:pageBlockTable>
        <apex:commandButton value="Add More" action="{!addNewRowToConList}" rerender="contactHead" Status="conStatusId" immediate="true" />
        <apex:actionStatus id="conStatusId" >
                <apex:facet name="start" >
                  <img src="/img/loading.gif" />                    
                </apex:facet>
         </apex:actionStatus>
     </apex:outputPanel>
     </apex:pageBlockSection>
     
     
     <!-- Opportunity Table Goes here -->
          <apex:pageBlockSection title="Opportunity Details" columns="1" collapsible="false">
       <apex:outputPanel id="opportunityHead">
      <apex:variable value="{!0}" var="rowNum"/>  
        <apex:pageBlockTable value="{!waOppList}" var="eachRecord"> 
         <apex:column headerValue="Action">
        <apex:commandLink value="Remove" style="color:red" action="{!removeRowFromOppList}" rendered="{!rowNum > 0}" rerender="opportunityHead" immediate="true" status="oppRemoveLink" >
             <apex:param value="{!rowNum}" name="rowToRemove" assignTo="{!rowToRemove}"/>
         </apex:commandLink>
         <apex:actionStatus id="oppRemoveLink" >
                <apex:facet name="start" >
                  <img src="/img/loading.gif" />                    
                </apex:facet>
         </apex:actionStatus>
         <apex:variable var="rowNum" value="{!rowNum + 1}"/>
      </apex:column>
      <apex:column headerValue="Name">
                            <apex:inputField value="{!eachRecord.record.Name}" required="true"/>
       </apex:column>
       
       <apex:column headerValue="Amount">
                            <apex:inputField value="{!eachRecord.record.Amount}" required="true"/>
       </apex:column>
       <apex:column headerValue="Stage">
                            <apex:inputField value="{!eachRecord.record.StageName}" required="true"/>
       </apex:column>
       <apex:column headerValue="CloseDate">
          <apex:inputField value="{!eachRecord.record.closeDate}" required="true"/>
       </apex:column>
       
       
      
        </apex:pageBlockTable>
        <apex:commandButton value="Add More" action="{!addNewRowToOppList}" rerender="opportunityHead" Status="oppStatusId" immediate="true" />
        <apex:actionStatus id="oppStatusId" >
                <apex:facet name="start" >
                  <img src="/img/loading.gif" />                    
                </apex:facet>
         </apex:actionStatus>
     </apex:outputPanel>
     </apex:pageBlockSection>
   </apex:pageBlock>

 </apex:form>

</apex:page>


Controller Class:

public class AddContactsOpportunitiesCLS {

public Account acc {get;set;}
public List<WrapperContactsList> waConList {get;set;}
public List<WrapperOpportunitiesList> waOppList {get;set;}
public Integer rowToRemove {get;set;}

public AddContactsOpportunitiesCLS (){
acc= new Account();
}

public void init(){
if(waConList ==null){
waConList = new List<WrapperContactsList>();
}
if(waOppList ==null){
 waOppList = new List<WrapperOpportunitiesList>();
}

}

public void addNewRowToConList(){
waConList = AddContactsOpportunitiesHelperCLS.addNewRowToContactList(waConList );
    
}

public void removeRowFromConList(){
  waConList = AddContactsOpportunitiesHelperCLS.removeRowToContactList(rowToRemove ,waConList );

}

public void addNewRowToOppList(){
     waOppList = AddContactsOpportunitiesHelperCLS.addNewRowToOpportunityList(waOppList );
}

public void removeRowFromOppList(){
   waOppList = AddContactsOpportunitiesHelperCLS.removeRowToOpportunityList(rowToRemove,waOppList );
}


Public class WrapperContactsList{
        public Integer index {get;set;}
        public Contact record{get;set;}
}

 public PageReference Cancel() {
  PageReference prf = new PageReference('/apex/AddContactsOpportunitiesVF');
  prf.setRedirect(true);
  return prf;
 }

public PageReference Save() {
 PageReference prf;
 boolean flag;
  if(acc.Name !=null && acc.Name !=''){
   upsert acc;
   if(acc.id != null ){
    flag = AddContactsOpportunitiesHelperCLS.save(acc.id,waConList,waOppList);
    if(flag){
      prf = new PageReference('/apex/AddContactsOpportunitiesVF');
      prf.setRedirect(true);
     
     }
   }
  }
   return prf;
}


public class WrapperOpportunitiesList{
        public Integer index{get;set;}
        public Opportunity record{get;set;}
} 


}

Controller Helper Class:

Public class AddContactsOpportunitiesHelperCLS{

Public static List<AddContactsOpportunitiesCLS.WrapperContactsList> addNewRowToContactList(List<AddContactsOpportunitiesCLS.WrapperContactsList> waConObjList){
        AddContactsOpportunitiesCLS.WrapperContactsList newRecord = new AddContactsOpportunitiesCLS.WrapperContactsList();
        Contact newContactRecord = new Contact();        
        newRecord.record = newContactRecord;
        newRecord.index = waConObjList.size();
        waConObjList.add(newRecord);
        return waConObjList;
}


public static List<AddContactsOpportunitiesCLS.WrapperContactsList> removeRowToContactList(Integer rowToRemove, List<AddContactsOpportunitiesCLS.WrapperContactsList> waConList){
        waConList.remove(rowToRemove);
        return waConList;
}

/*  adding opportunities to the list */
Public static List<AddContactsOpportunitiesCLS.WrapperOpportunitiesList> addNewRowToOpportunityList(List<AddContactsOpportunitiesCLS.WrapperOpportunitiesList> waOppObjList){
        AddContactsOpportunitiesCLS.WrapperOpportunitiesList newRecord = new AddContactsOpportunitiesCLS.WrapperOpportunitiesList();
        Opportunity newOpportunityRecord = new Opportunity();        
        newRecord.record = newOpportunityRecord;
        newRecord.index = waOppObjList.size();
        waOppObjList.add(newRecord);
        return waOppObjList;
}



public static List<AddContactsOpportunitiesCLS.WrapperOpportunitiesList> removeRowToOpportunityList(Integer rowToRemove, List<AddContactsOpportunitiesCLS.WrapperOpportunitiesList> waOppList){
        waOppList.remove(rowToRemove);
        return waOppList;
}
    
public static boolean save(String accId,List<AddContactsOpportunitiesCLS.WrapperContactsList> waConList  ,List<AddContactsOpportunitiesCLS.WrapperOpportunitiesList> waOppList) {
  boolean statusFlag = true;    
  system.debug('==waConList==>'+waConList.size());
  system.debug('==waOppList==>'+waOppList.size());
    
    try{
        
        List<Contact> contactRecordsToBeInserted = new List<Contact>();
        if(waConList !=null && !waConList.isEmpty()){
            for(AddContactsOpportunitiesCLS.WrapperContactsList eachRecord : waConList ){
                Contact conTemp = eachRecord.record;
                conTemp.AccountId = accId;
                contactRecordsToBeInserted.add(conTemp);
               
          }
            system.debug('==contactRecordsToBeInserted==>'+contactRecordsToBeInserted.size());
            upsert contactRecordsToBeInserted;
        }
    List<Opportunity> opportunityRecordsToBeInserted = new List<Opportunity>();
     if(waOppList != null && !waOppList.isEmpty()) {
       for(AddContactsOpportunitiesCLS.WrapperOpportunitiesList eachRecord : waOppList ){
                Opportunity oppTemp = eachRecord.record;
                oppTemp.AccountId = accId;
                opportunityRecordsToBeInserted.add(oppTemp);
               
            }
         
          system.debug('==opportunityRecordsToBeInserted==>'+opportunityRecordsToBeInserted.size());
            upsert opportunityRecordsToBeInserted;
     }
        
    }catch(Exception e){
        system.debug('Exception occure in save method..of helper classs-->'+e);
        statusFlag =false;
    }
       
    return statusFlag;
    
    }    



}

Adding and Deleting rows dynamically in pageblock table in Visualforce page.

Adding and Deleting rows dynamically in pageblock table in Visualforce page.

Adding rows dynamically in pageblock table in Visualforce page.

Hi, 

In this post i am going to give sample example of how to add a row dynamically in pageblock table and how to remove the row from pageblock table dynamically.

For this i am developed one Visualforce page, One Controller and One Helper class. Initially i am loading the page with one row then after once the user clicks on AddRow button it is going to add 
one new row to that pagblock table. If you want to remove a particular row you can remove using Remove row link.

Visualforce Page:

<apex:page controller="AddMultipleAccountCLS">
<apex:form id="theForm">
 <apex:pageblock id="thePB" title="Creating Multiple Accounts">
  <apex:pageblockButtons >
   <apex:commandButton value="Save" action="{!SaveMultipleAccounts}"/>
  
  </apex:pageblockButtons>

  <apex:outputPanel id="accountHead">
  <apex:variable value="{!0}" var="rowNum"/>  
   <apex:pageBlockSection columns="1" title="Adding Multiple Accounts" id="thePbs" collapsible="False"> 
   
     <apex:pageBlockTable value="{!waAccList}" var="eachRecord"> 
      
      <apex:column headerValue="Action">
        <apex:commandLink value="Remove" style="color:red" action="{!removeRowFromAccList}" rendered="{!rowNum > 0}" rerender="accountHead" immediate="true" >
             <apex:param value="{!rowNum}" name="rowToRemove" assignTo="{!rowToRemove}"/>
         </apex:commandLink>
         <apex:variable var="rowNum" value="{!rowNum + 1}"/>
      </apex:column>
      
      <apex:column headerValue="Account Name">
                            <apex:inputField value="{!eachRecord.record.Name}" required="true"/>
       </apex:column>
      
      <apex:column headerValue="Account Number">
                            <apex:inputField value="{!eachRecord.record.AccountNumber}" required="true"/>
       </apex:column>
       
       
       <apex:column headerValue="Account Type">
                                <apex:inputfield value="{!eachRecord.record.Type}" required="true"/>
        </apex:column>
      
      <apex:column headerValue="Annual Revenue">
                                <apex:inputField value="{!eachRecord.record.AnnualRevenue}" required="true"/>
      </apex:column>   
    
    </apex:pageBlockTable>
   </apex:pageBlockSection>
   <apex:commandButton value="Add More" action="{!addNewRowToAccList}" rerender="accountHead" Status="status" immediate="true" />
   
  </apex:outputPanel>

 </apex:pageblock>
</apex:form>
  
</apex:page>

Controller Class:


public with sharing class AddMultipleAccountCLS {

    public PageReference SaveMultipleAccounts() {
    system.debug('controller save method is calling-->');
     AddMultipleAccountHelperCLS.save(waAccList);
    return null;
    }


 public List<WrapperpaAccountList> waAccList {get;set;}
 public Integer rowToRemove {get;set;}

 public AddMultipleAccountCLS(){
  waAccList = new List<WrapperpaAccountList>();
  addNewRowToAccList();
 }
 public void removeRowFromAccList(){
  waAccList = AddMultipleAccountHelperCLS.removeRowToAccountList(rowToRemove, waAccList);
   
 }

 public void addNewRowToAccList(){
     waAccList = AddMultipleAccountHelperCLS.addNewRowToAccList(waAccList);
    }
    
    

 public class WrapperpaAccountList{
        public Integer index {get;set;}
        public Account record {get;set;}
   } 
}


Controller Helper Class:

public class AddMultipleAccountHelperCLS {

    public static List<AddMultipleAccountCLS.WrapperpaAccountList> addNewRowToAccList(List<AddMultipleAccountCLS.WrapperpaAccountList> waAccObjList){
        AddMultipleAccountCLS.WrapperpaAccountList newRecord = new AddMultipleAccountCLS.WrapperpaAccountList();
        Account newAccountRecord = new Account();        
        newRecord.record = newAccountRecord;
        newRecord.index = waAccObjList.size();
        waAccObjList.add(newRecord);
        return waAccObjList;
    }
    
    
     public static List<AddMultipleAccountCLS.WrapperpaAccountList> removeRowToAccountList(Integer rowToRemove, List<AddMultipleAccountCLS.WrapperpaAccountList> waAccountList){
        waAccountList.remove(rowToRemove);
        return waAccountList;
    }
    
    public static void save(List<AddMultipleAccountCLS.WrapperpaAccountList> waAccList) {
        system.debug('==waAccList==>'+waAccList.size());
        List<Account> accountRecordsToBeInserted = new List<Account>();
        if(waAccList !=null && !waAccList.isEmpty()){
            for(AddMultipleAccountCLS.WrapperpaAccountList eachRecord : waAccList ){
                Account accTemp = eachRecord.record;
                accountRecordsToBeInserted.add(accTemp);
               
            }
            system.debug('==accountRecordsToBeInserted==>'+accountRecordsToBeInserted.size());
            insert accountRecordsToBeInserted;
        }
    }
}



This is about Dynamic row adding and Deleting functionality in Page Block table using Visualforce Tags.


Thanks..

How to create Visualforce Tabs in Salsforce and Create Account,Contact,Opportunity record at once using Visualforce page?

Hi,
In this post i am going to give idea on how to create visualforce tabs, how to use JavaScript for validation in VF page and how to assign different colors to each pageblock section in visualforce, for that,

I created a VF page with Custom Controller to read the Account,Contact,Opportunity to save all the three object details once with JavaScript validatons.

Setup-->Create-->Tabs-->Click on New (Visualforce Tabs) Section-->Enter the Tab Label and Name of the Tab--> Select the VF page-->Tab Style--> Save

once you done this process it is available in tabs..

Visualforce Page:

<apex:page controller="AccountToOpportunityFlow" title="Opportunity">
<script type="text/javaScript">
function colorPageBlock(pageblock, color) {
if (pageblock != null) pageblock.firstChild.style.cssText = "background-color: " + color + ";";

}

function validateValues(){
alert('validateValues');
var status= true;

var accName = document.getElementById('{!$Component.theform.thePB.theacc.accName}').value;
var conLastName = document.getElementById('{!$Component.theform.thePB.theCon.conLastName}').value;
var oppName = document.getElementById('{!$Component.theform.thePB.theOpp.oppName}').value;
var oppCloseDate = document.getElementById('{!$Component.theform.thePB.theOpp.oppcloseDate}').value;
var oppStage = document.getElementById('{!$Component.theform.thePB.theOpp.oppStage}').value;

//alert('accName = '+accName);
if(accName =='' || accName ==null){
alert("Account Name Should Not be Empty.");
return false
}

else if(conLastName =='' || conLastName == null){
alert("Contact Last Name should not be Empty.");
return false
}

else if(oppName == '' || oppName ==null){
alert("Opportunity Name should not be Empty.");
return false
}

else if(oppCloseDate == '' || oppCloseDate ==null){
alert("Opportunity CloseDate should not be Empty.");
return false
}

else if(oppStage == '' || oppStage ==null){
alert("Please Select Opportunity Stage Details.");
return false
}

/*
//alert('status is==>'+status);
if(status){
 return true;
}
else{
  return false;
}
 */
}

</script>

<apex:sectionHeader title="New Account To Opportunity" subtitle=""/>
<apex:form id="theform">
<apex:pageblock title="Account Details" id="thePB">
<apex:pageBlockButtons >
 <apex:commandButton value="Save" onclick="return validateValues();" action="{!Save}"/>
 <apex:commandButton value="Cancel" action="{!Cancel}" immediate="true"/>
</apex:pageBlockButtons>


 <apex:pageBlockSection title="Account Information" collapsible="false" columns="2" id="theacc" >
 <apex:inputField value="{!acc.name}" id="accName"/>
  <apex:inputField value="{!acc.AccountNumber}"/>
 <apex:inputField value="{!acc.AccountSource}"/>
  <apex:inputField value="{!acc.Phone}"/>
  <apex:inputField value="{!acc.Fax}"/>
  <apex:inputField value="{!acc.Website}"/>
 </apex:pageBlockSection>


 <apex:pageblockSection title="Contact Information" collapsible="false" columns="2" id="theCon">  
  <apex:inputField value="{!con.FirstName}" />
  <apex:inputField value="{!con.LastName}" id="conLastName"/>
  <apex:inputField value="{!con.Email}"/>
  <apex:inputField value="{!con.Phone}"/> 
  <apex:inputField value="{!con.mobilePhone}"/>  
  <script>colorPageBlock(document.getElementById("{!$Component.theCon}"), "red");</script>
 </apex:pageblockSection>

 <!--Opportunity Details -->
 <apex:pageblockSection title="Opportunity Information" collapsible="false" columns="2" id="theOpp">
  <apex:inputField value="{!opp.Name}" id="oppName"  />
  <apex:inputField value="{!opp.CloseDate}" id="oppcloseDate"/>
  <apex:inputField value="{!opp.StageName}" id="oppStage"/>
  <apex:inputField value="{!opp.leadSource}"/> 
  
                
  <script>colorPageBlock(document.getElementById("{!$Component.theOpp}"), "Yellow");</script>
 </apex:pageBlockSection>


</apex:pageblock>
</apex:form>  

</apex:page>


Controller Class:

public class AccountToOpportunityFlow {

 public Account acc{get;set;}
 public Contact con {get;set;}
 public Opportunity opp{get;set;}

 public AccountToOpportunityFlow(){
  acc= new Account();
  con = new Contact();
  opp = new Opportunity();

 }

  public PageReference Cancel() {
    PageReference accOppPage = new PageReference('/apex/accountToOpportunityFlow');
    accOppPage.setRedirect(true);
    return accOppPage; 
  }


    public PageReference Save(){
     try{
      if(acc.Name !=null && acc.Name !=''){
        insert acc;
       }
       if(acc.id !=null && con.LastName !=null && con.lastName !=''){
         con.AccountId = acc.id;
         insert con;
       }
       if(acc.id !=null && opp.name !=null && opp.name !=''){
         opp.AccountId = acc.id;
        insert opp;
       }       
     
     }Catch(Exception e){
      system.debug('Exception occurred...'+e);
     }
      
     return null;
    }


}

Note: If you observe carefully of pageblock section each section with different colors, to achieve this i changed the background color from JavaScript.