Visualforce page for account

Visualforce page for account entry

Let us create a simple VF page to accept Name, Phone, Industry details for Account Object.  This way we will learn how to include input elements into a page. Next we will learn how to read those elements and insert into database. Here the database is the standard Object – Account.

Step 1:

Start with page component which is mandatory to save a page.

<apex:page>

</apex:page>

Step 2:

Add an input element. I choose apex:inputText.  Every component has attributes to include required functionalities.

The value attribute is to refer the fields in the page. But to refer a field from standard object, we need to associate this page with force.com database. How to do this? This is simply possible by including an attribute “standardController” in the page component as below

<apex:page standardController="Account">

Notice that it is pointing to Account Object. Yes, as we have seen in MVC Architecture , the controller is used to interact between view and model. In Salesforce, the controller can be a standard controller or custom controller.

Standard controller is nothing but any salesforce object exists in environment. It may be standard or custom. The custom controller is the apex class where developer has to write the business logic. Whereas the standard controller makes our task easier by simply associate the page with database by pointing the name of the object. This way, we can include standard actions such as save, edit, cancel etc., without writing business logic in custom controller. See the code now, it shows the value attribute in inputText pointing Account.Name within merge syntax {!}. This merge syntax is a way to point variables or fields or methods in VF page. The expression inside this syntax will be resolved when page uploads.

<apex:page standardController="Account">
    <apex:form >
        <apex:inputText value="{!Account.Name}"/>
     </apex:form>
</apex:page>

Since this page is associated with Account object, we can simply refer the account fields using dot notation. The below code will bring three text boxes but without labels.

<apex:page standardController="Account">
     <apex:form >
         <apex:inputText value="{!Account.Name}"/> 
         <apex:inputText value="{!Account.Phone}"/>
         <apex:inputText value="{!Account.Industry}"/>
     </apex:form>
</apex:page>

How to add labels?

Use the component apex:outputLabel

<apex:page standardController="Account">
     <apex:form >
         <apex:outputLabel value="Name"/>
         <apex:inputText value="{!Account.Name}"/> &nbsp;&nbsp;
         <apex:outputLabel value="Phone"/>
         <apex:inputText value="{!Account.Phone}"/> &nbsp;&nbsp;
         <apex:outputLabel value="Industry"/>
         <apex:inputText value="{!Account.Industry}"/>
     </apex:form>
</apex:page>

In the above code, I have included few non-breaking space character “nbsp’ (of html) to give some space between input and label. This is to show you the html elements can be directly included in a VF page. But still the page does not look good. To add more formatting, we have various other components to include. Before we go for formatting, let include standard action “save” from the standard controller. How to include this? There is a component called “apex:commandButton” generally used to include a button in a VF page and action attribute is to refer the method as follows.

<apex:page standardController="Account">
         <apex:form >
               <apex:outputLabel value="Name"/>
               <apex:inputText value="{!Account.Name}"/> &nbsp;&nbsp;
                <apex:outputLabel value="Phone"/>
                 <apex:inputText value="{!Account.Phone}"/> &nbsp;&nbsp;
                 <apex:outputLabel value="Industry"/>
                 <apex:inputText value="{!Account.Industry}"/>

                  <apex:commandButton value="saveAccount" action="{!save}"/>
          </apex:form>
</apex:page>

Now the page is ready to accept input from user and by click on “saveAccount” button, we can insert a account record into account object. The inbuilt save method takes care of inserting the record into corresponding database pointing in the standard controller attribute in the page component.

Now I feel the page look and feel does not seem good in comparing with standard pagelayout. There are components can bring standard pagelayout looks and feel.

Use apex:inputField instead of apex:inputText. Difference is inputField component can bring label associated with account object. We need not include outputLabel in this case. But we have to include other supporting components as well. See below.

<apex:page standardController="Account">
        <apex:form >
               <apex:pageblock >
                       <apex:pageblockSection >
                               <apex:inputField value="{!Account.Name}"/>
                               <apex:inputField value="{!Account.Phone}"/>
                               <apex:inputField value="{!Account.Industry}"/>
                        </apex:pageblockSection>

                       <apex:commandButton value="saveAccount" action="{!save}"/>
                 </apex:pageblock>
          </apex:form>
</apex:page>

Now the page looks better and the label are shown automatically from the system. This is possible only if we wrap the inputField inside the pageblockSection. To add more formatting to the commandButton, include this within pageblockButton component. This component will display the button in the footer and header.

<apex:page standardController="Account">
    <apex:form > 
        <apex:pageblock >
           <apex:pageblockSection >
               <apex:inputField value="{!Account.Name}"/>
               <apex:inputField value="{!Account.Phone}"/> 
               <apex:inputField value="{!Account.Industry}"/>        
           </apex:pageblockSection>
                      
           <apex:pageblockButtons >
               <apex:commandButton value="saveAccount" action="{!save}"/>
           </apex:pageblockButtons>
        </apex:pageblock>
    </apex:form>    
</apex:page>

Final Page may look like below:

account-page

Please be noted that the component <apex:inputField> refer a value corresponds to a field on a Salesforce object. This way it respects the attributes of the associated field, including whether the field is required or unique, and the user interface widget to display to get input from the user. For example, if the specified <apex:inputField> component is a date field, a calendar input widget is displayed. When used in an <apex:pageBlockSection>, <apex:inputField> tags automatically display with their corresponding output label.

Few Inferences
♦  Standard Controller is an inbuilt controller that can be associated with a VF page using an attribute standardController in the page component.
♦  The component inputField denotes the value of a field associated with a salesforce object.
♦  The inputField wrapped by pageblockSection will bring label and other characteristics of the field like required marks (red bar for a mandatory field), calendar widget for a date field etc.,
♦  The pageblockButton displays the child component in the header and footer. This can be controller using an attribute “location” whose acceptable values are “top”,”bottom” and “both”. Check your results by including this attribute.
♦  The pageblock will bring a section similar to the standard page layout of salesforce. Please compare the look and feel of the above page and any existing standard page layout to realize the same.
♦  Any input components such as inputText, inputField, commandButton etc., should be wrapped inside the parent component <apex:form>.

3 thoughts on “Visualforce page for account

  1. paul drake

    excellent basic tutorial!

    1. You are most welcome. Thanks for your comment.

  2. It’s actually a nice and helpful piece of info. I am satisfied that you shared this useful information with us.
    Please keep us up to date like this. Thank you for sharing.

Leave a Comment