Customizing Case Feed with Visualforce
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Newer Version Available
Customizing the Layout and Appearance of Case Feed
Creating a customized Case Feed page with Visualforce lets you control the overall layout and appearance, including which actions and tools are shown and where they’re located on the page. You can also include other standard and custom console components to enhance the functionality of the page.
In addition to the four case-specific Visualforce components detailed in this guide, you can also use the chatter:feed component to customize Case Feed. The table below lists its attributes.
chatter:feed Attributes
| Attribute Name | Attribute Type | Description | Required? | API Version | Access |
|---|---|---|---|---|---|
| entityId | id | Entity ID of the record for which to display the feed; for example, Contact.Id | Yes | 25.0 | |
| feedItemType | String | The feed item type on which the Entity or UserProfileFeed is filtered. See the Type field on the FeedItem object listing in the API Object Reference Guide for accepted values. | 25.0 | ||
| id | String | An identifier that allows the component to be referenced by other components on the page. | 20.0 | global | |
| onComplete | String | The Javascript function to call after a post or comment is added to the feed | 25.0 | ||
| rendered | Boolean | A Boolean value that specifies whether the additional fields defined in the action layout should be displayed. | 20.0 | global | |
| reRender | Object | The ID of one or more components that are redrawn when the result of the action method returns to the client. This value can be a single ID, a comma-separated list of IDs, or a merge field expression for a list or collection of IDs. | 25.0 | ||
| showPublisher | Boolean | Displays the Chatter publisher. | 25.0 |
Use Case
Acme Entertainment creates online games used by more than a million people on multiple platforms. Acme’s 1500 support agents use desktop computers, laptops, and tablets, and the company wanted to customize the Case Feed page to standardize its look and feel across different devices. They also wanted to make it easier for agents to track case activities using filters.
Acme used these steps to create a customized Case Feed page:
- Using the chatter:feed component, they positioned the feed in the sidebar so the publisher and other Case Feed tools are always in the center of the page.
- They repositioned the feed filter and auto-selected default filters depending on case origin:
- If the case origin is email,. the default filter is Emails.
- If the case origin is phone, the default filter is Call Logs.
- If the case origin is Web, the default filter is Portal Answers.
- In apex:emailPublisher, apex:logCallPublisher, and support:portalPublisher, they made the width percentage-based so the publisher expands and contracts as the size of the page changes, making its appearance more consistent across different screen sizes.
- They changed the orientation of the publisher action tabs from their standard left-side vertical arrangement to a horizontal arrangement at the top of the page.
Code Sample
This code sample shows a Visualforce page with custom Email, Portal, Log a Call, and Case Details tabs.
The following sample shows an Apex class containing a controller extension to be used with the Visualforce page above.
This sample shows a Visualforce page with custom feed filters and Chatter feed for cases. You can use this page in the sidebar of a Salesforce console.