Displaying Product Data in a Visualforce Page - Apex

Prerequisites:

• Tutorial #1: Creating Warehouse Custom Objects
• Tutorial #3: Creating Sample Data

In this lesson, you’ll extend your first Visualforce page to display a list of products for sale. Although this page might seem fairly simple, there’s a lot going on, and we’re going to move quickly so we can get to the Apex. If you’d like a more complete introduction to Visualforce, see theVisualforce Workbook.

1. In your browser, open your product catalog page at https://<your-instance>.salesforce.com/apex/Catalog, and open the Page Editor, if it’s not already open.
2. Modify your code to enable the Merchandise__c standard controller, by editing the <apex:page> tag.

   <apex:page standardController="Merchandise__c">

   This connects your page to your Merchandise__c custom object on the platform, using a built-in controller that provides a lot of basic functionality, like reading, writing, and creating new Merchandise__c objects.
3. Next, add the standard list controller definition.

   <apex:page standardController="Merchandise__c" recordSetVar="products">

   This configures your controller to work with lists of Merchandise__c records all at once, for example, to display a list of products in your catalog. Exactly what we want to do!
4. Click Save. You can also press CTRL+S, if you prefer to use the keyboard. The page reloads, and if the Merchandise tab is visible, it becomes selected. Otherwise you won’t notice any change on the page. However, because you’ve set the page to use a controller, and defined the variable products, the variable will be available to you in the body of the page, and it will represent a list of Merchandise__c records.
5. Replace any code between the two <apex:page> tags with a page block that will soon hold the products list.
   <apex:pageBlock title="Our Products">
   
       <apex:pageBlockSection>
   
           (Products Go Here)
   
       </apex:pageBlockSection>
   
   </apex:pageBlock>
   

   The pageBlock and pageBlockSection tags create some user interface elements on the page, which match the standard visual style of the platform.
   Note

   
   

   From here we’ll assume that you’ll save your changes whenever you want to see how the latest code looks.
6. It’s time to add the actual list of products. Select the (Products Go Here) placeholder and delete it. Start typing <apex:pageB and use your mouse or arrow keys to select apex:pageBlockTable from the drop-down list, and press RETURN.
   
   Notice that the editor inserts both opening and closing tags, leaving your insertion point in the middle.
7. Now you need to add some attributes to the pageBlockTable tag. The value attribute indicates which list of items thepageBlockTable component should iterate over. The var attribute assigns each item of that list, for one single iteration, to the pitemvariable. Add these attributes to the tag.

   <apex:pageBlockTable value="{!products}" var="pitem">

8. Now you’re going to define each column, and determine where it gets its data by looking up the appropriate field in the pitem variable. Add the following code between the opening and closing pageBlockTable tags.
   <apex:pageBlockTable value="{!products}" var="pitem">
       <apex:column headerValue="Product">
           <apex:outputText value="{!pitem.Name}"/>
       </apex:column> </apex:pageBlockTable>
   

9. Click Save and you’ll see your product list appear.
   
   The headerValue attribute has simply provided a header title for the column, and below it you’ll see a list of rows, one for each merchandise record. The expression {!pitem.Name} indicates that we want to display the Name field of the current row.
10. Now, after the closing tag for the first column, add two more columns.

    <apex:column headerValue="Description">
        <apex:outputField value="{!pitem.Description__c}"/>
    </apex:column>
    <apex:column headerValue="Price">
        <apex:outputField value="{!pitem.Price__c}"/>
    </apex:column>
    

11. With three columns, the listing is compressed because the table is narrow. Make it wider by changing the<apex:pageBlockSection> tag.

    <apex:pageBlockSection columns="1">

    This changes the section from two columns to one, letting the single column be wider.
12. Your code will look something like this.
    <apex:page standardController="Merchandise__c" recordSetVar="products">
    
        <apex:pageBlock title="Our Products">
    
            <apex:pageBlockSection columns="1">
    
                <apex:pageBlockTable value="{!products}" var="pitem">
                    <apex:column headerValue="Product">
                        <apex:outputText value="{!pitem.Name}"/>
                    </apex:column>
                    <apex:column headerValue="Description">
                        <apex:outputField value="{!pitem.Description__c}"/>
                    </apex:column>
                    <apex:column headerValue="Price">
                        <apex:outputField value="{!pitem.Price__c}"/>
                    </apex:column>
                </apex:pageBlockTable>
    
            </apex:pageBlockSection>
    
        </apex:pageBlock>
    
    </apex:page>

    And there you have your product catalog!

Tell Me More...

• The pageBlockTable component produces a table with rows, and each row is found by iterating over a list. The standard controller you used for this page was set to Merchandise__c, and the recordSetVar to products. As a result, the controller automatically populated the products list variable with merchandise records retrieved from the database. It’s this list that the pageBlockTablecomponent uses.
• You need a way to reference the current record as you iterate over the list. The statement var="pitem" assigns a variable called pitemthat holds the record for the current row.