Module 6: Creating a Visualforce Page

In this module, you create a Visualforce page to provide a custom user interface for creating and editing speakers.

Step 1: Create the SpeakerForm Visualforce Page

1. In the Developer Console, select File > New > Visualforce Page, specify SpeakerForm as the page name and click OK

2. Implement SpeakerForm as follows:

   <apex:page standardController="Speaker__c">
   <apex:form >
       <apex:pageBlock title="Edit Speaker">
           <apex:pageBlockSection columns="1">
               <apex:inputField value="{!Speaker__c.First_Name__c}"/>
               <apex:inputField value="{!Speaker__c.Last_Name__c}"/>
               <apex:inputField value="{!Speaker__c.Email__c}"/>
           </apex:pageBlockSection>
           <apex:pageBlockButtons >
               <apex:commandButton action="{!save}" value="Save"/>
           </apex:pageBlockButtons>
       </apex:pageBlock>
   </apex:form>
   </apex:page>
   

3. Save the file

4. Test the Visualforce page. There are several ways you can test your Visualforce page. For example, you can:

   • Click the Preview button in the file editor for SpeakerForm in the developer console (upper left corner)
   • Directly access the Visualforce page by appending /apex/SpeakerForm to your instance's domain name in the browser. For example, access: https://na17.salesforce.com/apex/SpeakerForm (make sure you use your own Salesforce domain name)

Step 2: Set SpeakerForm as the Default Form

In this step, you set the SpeakerForm page as the default form for creating and editing speakers:

1. In Setup, select Build > Create > Objects and click the Speaker link

2. Scroll down to the Buttons, Links, and Actions section, and click Edit next to New

3. Check Override With Visualforce Page, and select SpeakerForm

4. Click Save

5. In the Buttons, Links, and Actions section, click Edit next to Edit

6. In Override With select Visualforce Page and select SpeakerForm

7. Click Save

Step 3: Test the Application

1. Click the Speakers Tab

2. Click New which should display your Visualforce page

3. Create a new Speaker and select Save

At this stage, the Visualforce page doesn't provide any additional capability compared to the default speaker form. In the next module, you will enhance SpeakerForm to support the upload of the speaker's pictures.