Working with Chatter Visualforce Components

When Chatter is enabled on an object, users viewing a record of that object see a rich user interface to manage posts and comments, followers, and their interest in following the record. This same native user interface functionality is also available to Visualforce developers. Using Chatter components, you can embed the same Chatter toolbar, in its entirety or in pieces, within your custom user interfaces.

Chatter is supported in Visualforce through eight dedicated components in the chatter namespace, and an additional Chatter-specific attribute on the generic detail component, as described here:

feed—This component renders a list of Chatter posts and comments for the selected record. It also provides a text box at the top for creating new posts. The selected record is specified using the entityId attribute.

feedWithFollowers—This component embeds the full Chatter toolbar. It includes the functionality of the feed component, and adds the list of followers to the right side, the Show/Hide Chatter buttons, and the Follow/Unfollow buttons.

feedWithFollowers—This component embeds the full Chatter toolbar. It includes the functionality of the feed component, and adds the list of followers to the right side, the Show/Hide Chatter buttons, and the Follow/Unfollow buttons.

newsFeed—Use this component to render the News Feed for the current user, the same feed data shown on the Home tab.

follow—Including this component on a page renders a Follow button if the user is not following the record and an Unfollow button otherwise.

followers—The followers component simply displays a list of users following the current record. Users are represented as thumbnail photos, which can be clicked to drill into their profiles.

showChatter—This attribute of the detail component, if set to true, includes the full Chatter toolbar at the top of the detail page.

userPhotoUpload—This component allows you to upload a photo for the current user’s Chatter profile.

To try one of the Chatter components, create a new Visualforce page that uses a standard controller. Pick an object that you know has Chatter enabled. Listing 12.18 shows a custom Project__c page that includes the feedWithFollowers component, and Figure 12.4 is the result of visiting the custom page. There are no posts, comments, or followers of the Project__c record, but the feedWithFollowers component has made creating and viewing all of these items using the standard Force.com-styled user interface possible.

Figure 12.4 Output of Visualforce page with Chatter component

Listing 12.18 Visualforce Page with Chatter Component

Click here to view code image

<apex:page standardController="Project__c">
  <apex:sectionHeader title="Project"
    subtitle="{!record.Id}" />
  <apex:pageBlock title="Chatter Components">
    <chatter:feedWithFollowers entityId="{!record.Id}" />
  </apex:pageBlock>
</apex:page>

You should be aware of a few gotchas with Visualforce Chatter components as you begin using them:

A Visualforce page cannot contain more than one of the five Chatter components at one time. If you attempt to use more than one, the page cannot be saved.

Chatter components cannot be added to a Visualforce page unless the API version of the page is at least 20.0. If the API version is set incorrectly, an Unknown Component error will prevent the page from being saved.

You cannot use Chatter components with Visualforce Sites. The Chatter components will be invisible to Sites users.