Force.com Apex Code Developer's Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Step 2: Display the Feed and Group Data in a Visualforce Component

The second step is to create a Visualforce custom component called GroupFeed that displays the data from the Apex controller.
  1. In the Developer Console, click File | New | Visualforce Component.
  2. Enter the name GroupFeed and click OK.
  3. Copy this code and paste it into the GroupFeed component, replacing the existing code: 
    1swfobject.registerObject("clippy.codeblock-0", "9");<apex:component controller="GroupFeedController">
2
3    <!-- Display the drop-down list of group names. -->
4    <apex:form >
5        <!-- Bind the selection value to the groupId property in the controller. -->
6        <apex:selectList value="{!groupId}" size="1">
7            <!-- Get the selection options from the getGroupOptions method in the controller. -->
8            <apex:selectOptions value="{!groupOptions}"/>
9            <apex:actionSupport event="onchange" rerender="feed"/>
10        </apex:selectList>
11    </apex:form>
12    
13    <!-- Display the feed for the selected group. -->
14    <apex:outputPanel id="feed">
15        <!-- Display the feed items.
16             Call the getFeedItems method in the controller to get the List of FeedItem objects to display.
17             Use the feedItem var to reference a FeedItem object in the List. -->
18        <apex:repeat value="{!feedItems}" var="feedItem">
19          <div>
20            <!-- Display the photo for the feed item, the name of the actor who posted the feed item,
21                 and the text of the feed item. -->
22            <apex:image style="margin:4px" width="25" url="{!feedItem.photoUrl}"/><br/>
23            User: <b>{!feedItem.actor.name}</b><br/>
24            Text: <b>{!feedItem.body.text}</b><br/>
25            
26            <apex:outputPanel >
27              <!-- Display the comments on the feed item.
28                   Use the reference to the FeedItem object on line 17
29                   to get the List of ConnectApi.Comment objects to display. 
30                   Use the comment var to reference a Comment object in the List. -->
31              <apex:repeat value="{!feedItem.comments.comments}" var="comment">
32                 <div style="margin-left:25px">
33                   <!-- Display the photo and name of the user who commented, 
34                        and display the text of the comment. -->
35                   <apex:image style="margin:4px" width="25" url="{!comment.user.photo.smallPhotoUrl}"/><br/>
36                   User: <b>{!comment.user.name}</b><br/>
37                   Text: <b>{!comment.body.text}</b>
38                 </div>
39              </apex:repeat>
40            </apex:outputPanel>
41          </div>
42        </apex:repeat>
43    </apex:outputPanel>
44</apex:component>
  4. Click File | Save.