The code for each of these components is included in the sections below, but first you need to understand the best procedure for creating them because each of the three pages references the controller, and the controller references each of the three pages. In what appears to be a conundrum, you cannot create the controller without the pages, but the pages have to exist to refer to them in the controller.
The following Apex class is the controller for all three pages in the New Customer Opportunity wizard:
public class newOpportunityController { // These four member variables maintain the state of the wizard. // When users enter data into the wizard, their input is stored // in these variables. Account account; Contact contact; Opportunity opportunity; OpportunityContactRole role; // The next four methods return one of each of the four member // variables. If this is the first time the method is called, // it creates an empty record for the variable. public Account getAccount() { if(account == null) account = new Account(); return account; } public Contact getContact() { if(contact == null) contact = new Contact(); return contact; } public Opportunity getOpportunity() { if(opportunity == null) opportunity = new Opportunity(); return opportunity; } public OpportunityContactRole getRole() { if(role == null) role = new OpportunityContactRole(); return role; } // The next three methods control navigation through // the wizard. Each returns a PageReference for one of the three pages // in the wizard. Note that the redirect attribute does not need to // be set on the PageReference because the URL does not need to change // when users move from page to page. public PageReference step1() { return Page.opptyStep1; } public PageReference step2() { return Page.opptyStep2; } public PageReference step3() { return Page.opptyStep3; } // This method cancels the wizard, and returns the user to the // Opportunities tab public PageReference cancel() { PageReference opportunityPage = new ApexPages.StandardController(opportunity).view(); opportunityPage.setRedirect(true); return opportunityPage; } // This method performs the final save for all four objects, and // then navigates the user to the detail page for the new // opportunity. public PageReference save() { // Create the account. Before inserting, copy the contact's // phone number into the account phone number field. account.phone = contact.phone; insert account; // Create the contact. Before inserting, use the id field // that's created once the account is inserted to create // the relationship between the contact and the account. contact.accountId = account.id; insert contact; // Create the opportunity. Before inserting, create // another relationship with the account. opportunity.accountId = account.id; insert opportunity; // Create the junction contact role between the opportunity // and the contact. role.opportunityId = opportunity.id; role.contactId = contact.id; insert role; // Finally, send the user to the detail page for // the new opportunity. PageReference opptyPage = new ApexPages.StandardController(opportunity).view(); opptyPage.setRedirect(true); return opptyPage; } }
The following code defines the first page of the wizard (opptyStep1) in which data about the associated contact and account is gathered from the user:
<apex:page controller="newOpportunityController" tabStyle="Opportunity"> <script> function confirmCancel() { var isCancel = confirm("Are you sure you wish to cancel?"); if (isCancel) return true; return false; } </script> <apex:sectionHeader title="New Customer Opportunity" subtitle="Step 1 of 3"/> <apex:form> <apex:pageBlock title="Customer Information" mode="edit"> <!-- The pageBlockButtons tag defines the buttons that appear at the top and bottom of the pageBlock. Like a facet, it can appear anywhere in a pageBlock, but always defines the button areas.--> <!-- The Next button contained in this pageBlockButtons area calls the step2 controller method, which returns a pageReference to the next step of the wizard. --> <apex:pageBlockButtons> <apex:commandButton action="{!step2}" value="Next"/> <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true"/> </apex:pageBlockButtons> <apex:pageBlockSection title="Account Information"> <!-- Within a pageBlockSection, inputFields always display with their corresponding output label. --> <apex:inputField id="accountName" value="{!account.name}"/> <apex:inputField id="accountSite" value="{!account.site}"/> </apex:pageBlockSection> <apex:pageBlockSection title="Contact Information"> <apex:inputField id="contactFirstName" value="{!contact.firstName}"/> <apex:inputField id="contactLastName" value="{!contact.lastName}"/> <apex:inputField id="contactPhone" value="{!contact.phone}"/> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>
<apex:pageBlockButtons> <apex:commandButton action="{!step2}" value="Next"/> </apex:pageBlockButtons>
Command buttons must appear in a form, because the form component itself is responsible for refreshing the page display based on the new PageReference.
Some components, including <apex:inputField>, automatically span both cells of a page block section column at once, filling in both a field's label and value. For example, in the Contact Information area of this page, the First Name field is in the first column, the Last Name field is in the second column, and the Phone field wraps to the first column of the next row:
<apex:pageBlockSection title="Contact Information"> <apex:inputField id="contactFirstName" value="{!contact.firstName}"/> <apex:inputField id="contactLastName" value="{!contact.lastName}"/> <apex:inputField id="contactPhone" value="{!contact.phone}"/> </apex:pageBlockSection>
The following code defines the second page of the wizard (opptyStep2) in which data about the opportunity is gathered from the user:
<apex:page controller="newOpportunityController" tabStyle="Opportunity"> <script> function confirmCancel() { var isCancel = confirm("Are you sure you wish to cancel?"); if (isCancel) return true; return false; } </script> <apex:sectionHeader title="New Customer Opportunity" subtitle="Step 2 of 3"/> <apex:form> <apex:pageBlock title="Opportunity Information" mode="edit"> <apex:pageBlockButtons> <apex:commandButton action="{!step1}" value="Previous"/> <apex:commandButton action="{!step3}" value="Next"/> <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true"/> </apex:pageBlockButtons> <apex:pageBlockSection title="Opportunity Information"> <apex:inputField id="opportunityName" value="{!opportunity.name}"/> <apex:inputField id="opportunityAmount" value="{!opportunity.amount}"/> <apex:inputField id="opportunityCloseDate" value="{!opportunity.closeDate}"/> <apex:inputField id="opportunityStageName" value="{!opportunity.stageName}"/> <apex:inputField id="contactRole" value="{!role.role}"/> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>
Notice that although the markup for placing the Close Date, Stage, and Role for Contact fields on the form is the same as the other fields, the <apex:inputField> tag examines the data type of each field to determine how to display it. For example, clicking in the Close Date text box brings up a calendar from which users can select the date.
The last block of code defines the third page of the wizard (opptyStep3) in which all inputted data is displayed. The user can decide to save the operation or return to the previous step:
<apex:page controller="newOpportunityController" tabStyle="Opportunity"> <script> function confirmCancel() { var isCancel = confirm("Are you sure you wish to cancel?"); if (isCancel) return true; return false; } </script> <apex:sectionHeader title="New Customer Opportunity" subtitle="Step 3 of 3"/> <apex:form> <apex:pageBlock title="Confirmation"> <apex:pageBlockButtons> <apex:commandButton action="{!step2}" value="Previous"/> <apex:commandButton action="{!save}" value="Save"/> <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true"/> </apex:pageBlockButtons> <apex:pageBlockSection title="Account Information"> <apex:outputField value="{!account.name}"/> <apex:outputField value="{!account.site}"/> </apex:pageBlockSection> <apex:pageBlockSection title="Contact Information"> <apex:outputField value="{!contact.firstName}"/> <apex:outputField value="{!contact.lastName}"/> <apex:outputField value="{!contact.phone}"/> <apex:outputField value="{!role.role}"/> </apex:pageBlockSection> <apex:pageBlockSection title="Opportunity Information"> <apex:outputField value="{!opportunity.name}"/> <apex:outputField value="{!opportunity.amount}"/> <apex:outputField value="{!opportunity.closeDate}"/> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>
Notice that the third page of the wizard simply writes text to the page with <apex:outputField> tags.