Building Visualforce pages for Standard Pages : Part 2 – Contact Edit Page

Building Visualforce pages for Standard Pages : Part 1 – Account Edit Page
Building Visualforce pages for Standard Pages : Part 2 – Contact Edit Page
Building Visualforce pages for Standard Pages : Part 3 – Case Edit Page

Continuing my series of posts about building custom visualforce pages that mimic the functionality of standard salesforce pages, below is the code for the “Contact Edit” page.

Steps to use this template
1. Create a Visualforce page (I used the name “ContactEdit”), and copy all the code below.
2. Save the page, and test it by visiting the URL below, making sure to pass an existing account ID as a parameter (refer to my article here if you are fuzzy about Salesforce URLs)  :-

https://{your org}.visual.force.com/apex/ContactEdit?id=003E000000HCekM&retURL=%2F003E000000HCekM

3. Create a custom “Edit” button for Contact, that takes you to this page when clicked.

Code Snippet

<apex:page standardController="Contact" showHeader="true" sidebar="true">
    <apex:form id="myForm">
        <script>
            function copyAddress() {
                var OtherStreet = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id62:ctOtherStreet');
                var OtherCity = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id68:ctOtherCity');
                var OtherState = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id74:ctOtherState');
                var OtherCountry = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id86:ctOtherCountry');
                var OtherPostalCode = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id80:ctOtherPostalCode');

                var MailingStreet = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id59:ctMailingStreet');
                var MailingCity = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id65:ctMailingCity');
                var MailingState = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id71:ctMailingState');
                var MailingCountry = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id83:ctMailingCountry');
                var MailingPostalCode = document.getElementById('j_id0:myForm:pgBlock:pgBlockSectionAddressInfo:j_id77:ctMailingPostalCode');

                OtherStreet.value = MailingStreet.value;
                OtherCity.value = MailingCity.value;
                OtherState.value = MailingState.value;
                OtherCountry.value = MailingCountry.value;
                OtherPostalCode.value = MailingPostalCode.value;

            }
        </script>
        <apex:sectionHeader title="Contact Edit" subtitle="{!Contact.Salutation}{!Contact.Name}" description="Contacts not associated with accounts are private and cannot be viewed by other users or included in reports." />
        <apex:pageBlock id="pgBlock" mode="edit" title="Contact Edit">
            <apex:pageBlockButtons location="both">
                <apex:commandButton value="Save" action="{!Save}"/>
                <apex:commandButton value="Cancel" action="{!Cancel}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection id="pgBlockSectionAcctInfo" title="Contact Information" collapsible="false" columns="2" >
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Contact Owner</apex:outputLabel>                   
                    <apex:outputField id="ctOwner" value="{!contact.ownerid}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Phone</apex:outputLabel>
                    <apex:inputField id="ctPhone" value="{!contact.Phone}" />
                </apex:pageBlockSectionItem>
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >First Name</apex:outputLabel>                   
                    <apex:panelGrid columns="2">
                        <apex:inputField id="ctSalutation" value="{!contact.Salutation}" />
                        <apex:inputField id="ctFirstName" value="{!contact.FirstName}" />
                    </apex:panelGrid>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Home Phone</apex:outputLabel>
                    <apex:inputField id="ctHomePhone" value="{!contact.HomePhone}" />
                </apex:pageBlockSectionItem>
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Last Name</apex:outputLabel>
                    <apex:inputField id="ctLastName" value="{!contact.LastName}" required="true" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Mobile</apex:outputLabel>
                    <apex:inputField id="ctMobilePhone" value="{!contact.MobilePhone}" />
                </apex:pageBlockSectionItem> 
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Account Name</apex:outputLabel>
                    <apex:inputField id="ctAccount" value="{!contact.AccountId}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Other Phone</apex:outputLabel>
                    <apex:inputField id="ctOtherPhone" value="{!contact.OtherPhone}" />
                </apex:pageBlockSectionItem> 
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Title</apex:outputLabel>
                    <apex:inputField id="ctTitle" value="{!contact.Title}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Fax</apex:outputLabel>
                    <apex:inputField id="ctFax" value="{!contact.Fax}" />
                </apex:pageBlockSectionItem>
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Department</apex:outputLabel>
                    <apex:inputField id="ctDepartment" value="{!contact.Department}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Email</apex:outputLabel>
                    <apex:inputField id="ctEmail" value="{!contact.Email}" />
                </apex:pageBlockSectionItem>
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >BirthDate</apex:outputLabel>
                    <apex:inputField id="ctBirthDate" value="{!contact.BirthDate}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Assistant</apex:outputLabel>
                    <apex:inputField id="ctAssistantName" value="{!contact.AssistantName}" />
                </apex:pageBlockSectionItem>
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >ReportsTo</apex:outputLabel>
                    <apex:inputField id="ctReportsTo" value="{!contact.ReportsToId}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Asst. Phone</apex:outputLabel>
                    <apex:inputField id="ctAssistantPhone" value="{!contact.AssistantPhone}" />
                </apex:pageBlockSectionItem>
               
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >LeadSource</apex:outputLabel>
                    <apex:inputField id="ctLeadSource" value="{!contact.LeadSource}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
           
        <apex:pageBlockSection id="pgBlockSectionAddressInfo" title="Address Information" collapsible="false" columns="2">
            <apex:facet name="header">
                    <span class="pbSubExtra">
                        <span class="bodySmall">
                            <a href="javascript:copyAddress();">Copy Mailing Address to Other Address</a>
                        </span>
                    </span>
                    <h3>Address Information<span class="titleSeparatingColon">:</span></h3>
            </apex:facet>

            <apex:pageBlockSectionItem >
                <apex:outputLabel >Mailing Street</apex:outputLabel>
                <apex:inputField id="ctMailingStreet" value="{!contact.MailingStreet}" />
            </apex:pageBlockSectionItem>           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Other Street</apex:outputLabel>
                <apex:inputField id="ctOtherStreet" value="{!contact.OtherStreet}" />
            </apex:pageBlockSectionItem>          

            <apex:pageBlockSectionItem >
                <apex:outputLabel >Mailing City</apex:outputLabel>
                <apex:inputField id="ctMailingCity" value="{!contact.MailingCity}" />
            </apex:pageBlockSectionItem>           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Other City</apex:outputLabel>
                <apex:inputField id="ctOtherCity" value="{!contact.OtherCity}" />
            </apex:pageBlockSectionItem>
           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Mailing State/Province</apex:outputLabel>
                <apex:inputField id="ctMailingState" value="{!contact.MailingState}" />
            </apex:pageBlockSectionItem>           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Other State/Province</apex:outputLabel>
                <apex:inputField id="ctOtherState" value="{!contact.OtherState}" />
            </apex:pageBlockSectionItem>           
           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Mailing Zip/Postal Code</apex:outputLabel>
                <apex:inputField id="ctMailingPostalCode" value="{!contact.MailingPostalCode}" />
            </apex:pageBlockSectionItem>           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Other Zip/Postal Code</apex:outputLabel>
                <apex:inputField id="ctOtherPostalCode" value="{!contact.OtherPostalCode}" />
            </apex:pageBlockSectionItem> 
           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Mailing Country</apex:outputLabel>
                <apex:inputField id="ctMailingCountry" value="{!contact.MailingCountry}" />
            </apex:pageBlockSectionItem>           
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Other Country</apex:outputLabel>
                <apex:inputField id="ctOtherCountry" value="{!contact.OtherCountry}" />
            </apex:pageBlockSectionItem>             
        </apex:pageBlockSection>
           
        <apex:pageBlockSection id="pgBlockSectionAdditionalInformation" title="Additional Information" collapsible="false" columns="2">
            <!--ANY CUSTOM FIELDS / ADDITIONAL INFORMATION CAN GO HERE-->
        </apex:pageBlockSection>
           
        <apex:pageBlockSection id="pgBlockSectionDescriptionInformation" title="Description Information" collapsible="false" columns="2">
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Description</apex:outputLabel>
                <apex:inputTextArea id="ctDescription" cols="75" value="{!contact.Description}" rows="6" />
            </apex:pageBlockSectionItem>            
        </apex:pageBlockSection>        
        </apex:pageBlock>
    </apex:form>
</apex:page>

Gotchas
* Check out the “copyAddress” javascript function at the top – this function does the job of copying the mailing address to the other address on clicking the “Copy Mailing Address to Other Address” link.
* Make sure that the IDs of all the textboxes (mailingstreet, otherstreet etc.) being used in the function are the correct IDs – I have highlighted these IDs in the javascript. If you customize this page to add more fields, the IDs will change, and you will have to fix the javascript to use the correct IDs. You can look at the page HTML source to figure out the IDs, or you can refer to this article to know how to get the ID for a field.

There you go, that’s a visualforce contact edit page for you. You can now add all your customizations on top of this.