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

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.

Posted in: .,Custom Controllers,Custom Tabs in salesforce,Java Script in Visualforce page,pageblock section with different colors.,Salesforce,salesforce.com,Visualforce Pages,Visualforce Tabs in Salesforce