Salesforce.

com: Winter 13

Customizing Case Feed with Visualforce

Last updated: November 30 2012

Copyright 20002012 salesforce.com, inc. All rights reserved. Salesforce.com is a registered trademark of salesforce.com, inc., as are other

names and marks. Other marks appearing herein may be trademarks of their respective owners.

Table of Contents

Table of Contents
Introduction........................................................................................................................................3 Chapter 1: Customizing the Layout and Appearance of Case Feed..........................................................5 Chapter 2: Customizing the Email Publisher.......................................................................................10 Chapter 3: Customizing the Portal Publisher.......................................................................................13 Chapter 4: Customizing the Log a Call Publisher.................................................................................15 Chapter 5: Customizing the Articles Tool............................................................................................18 Chapter 6: Replicating a Standard Case Feed Page...............................................................................21 Chapter 7: Creating Custom Publishers...............................................................................................23 Chapter 8: Learning More..................................................................................................................25

Table of Contents

ii

Introduction
Available in: Enterprise, Unlimited, and Developer Editions

Case Feed gives support agents a more streamlined way of creating, managing, and viewing cases. Case Feed includes publishers and a Chatter feed. The publishers let agents create case notes, log calls, change the status of cases, and communicate with customers. The feed displays important case events in chronological order, so its easy to see the progress of each case. The standard Case Feed page is designed for organizations that want to take advantage of feed-based case management quickly and with minimal configuration. You can modify the Case Feed page in a few ways, including specifying which publishers and tools are available to users. Organizations with more complex or unusual case management needs might find that they need to customize the Case Feed page more heavily. With the Case Feed Visualforce components, you can create a fully customized page within the Service Cloud console. This guide is for developers who are responsible for customizing Case Feed according to their companys needs. It includes several use cases and examples to help you create a unique Case Feed page.

Requirements
Before customizing Case Feed in the Service Cloud console, make sure: Case Feed, Chatter, and feed tracking on cases are enabled in your organization. Refer to Implementing Case Feed for detailed information. Your organization has at least one Service Cloud console app. For more information, see Creating a Service Cloud Console App in the online help. Youre familiar with developing with Visualforce. Check out the Visualforce Developers Guide for a comprehensive overview.

Assigning Custom Pages to Users

Generally, when you create a custom Case Feed page using Visualforce, its not possible to assign that page only to certain users while allowing other users to see the standard Case Feed page. However, with the support:CaseFeed component, you can create a page that replicates the standard Case Feed page, assign that page to certain users, and then create a custom page to assign to a different set of users. See Replicating a Standard Case Feed Page on page 21 for more information.

Customization Overview
There are five Case Feed Visualforce components: Component Name
apex:emailPublisher

Description Displays and controls the appearance and functionality of the Case Feed Email publisher.

Use It To... Create an Email publisher and place it anywhere on a Service Cloud console page.

Introduction

Component Name

Description

Use It To... Change the appearance of the publisher by specifying its dimensions and the fields it includes. Customize certain aspects of the publishers functionality, such as specifying a default Subject for each outgoing email. Create a Log a Call publisher and place it anywhere on a Service Cloud console page. Change the appearance of the publisher by specifying its dimensions and the fields it includes. Create an Articles tool for cases and place it anywhere on a Service Cloud console page. Change the appearance of the tool by specifying its dimensions. Customize certain aspects of the tools functionality, such as how it searches for articles. Create a version of the standard Case Feed page that you can assign to certain users so that you can also create a custom page and assign it to other users. Create a Portal publisher and place it anywhere on a Service Cloud console page. Change the appearance of the publisher by specifying its dimensions and the fields it includes.

apex:logCallPublisher

Displays and controls the appearance and functionality of the Case Feed Log a Call publisher.

support:caseArticles

Displays and controls the appearance and functionality of the Articles tool for cases.

support:CaseFeed

Replicates the standard Case Feed page, including all standard publishers, links, and buttons.

support:portalPublisher Displays and controls the appearance and

functionality of the Case Feed Portal publisher.

In addition, the chatter:feed component has two attributes related to Case Feed: feedItemType, which lets you specify how feed items are filtered, and showPublisher, which lets you display the Chatter publisher on a page. Finally, you can also create Visualforce pages to user as custom publishers in Case Feed. The following chapters offer detailed information on each of these components and customization options.

Chapter 1
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 publishers and tools are shown and where theyre 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
entityId feedItemType

Attribute Type Description id String

Required? API Version 25.0 25.0

Access

Entity ID of the record for which to display the feed; Yes for example, Contact.Id 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. An identifier that allows the component to be referenced by other components on the page. The Javascript function to call after a post or comment is added to the feed A Boolean value that specifies whether the additional fields defined in the publisher layout should be displayed. 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. Displays the Chatter publisher.

id onComplete rendered

String String Boolean

20.0 25.0 20.0

global

global

reRender

Object

25.0

showPublisher

Boolean

25.0

Use Case
Acme Entertainment creates online games used by more than a million people on multiple platforms. Acmes 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:

Customizing the Layout and Appearance of Case Feed

1. Using the chatter:feed component, they positioned the feed in the sidebar so the publishers and other Case Feed tools are always in the center of the page. 2. 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.

3. In apex:emailPublisher, apex:logCallPublisher, and support:portalPublisher, they made the width percentage-based so the publishers expand and contract as the size of the page changes, making their appearance more consistent across different screen sizes. 4. They changed the orientation of the publisher 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:
<apex:page standardController="Case"> <!-- Repositions publisher tabs to a horizontal arrangement on top of the page --> <ul class="demoNav" style="list-style: none; overflow: hidden"> <li style="float:left"><a id="custom_email_tab" class="selected" href="javascript:void(0);" onclick="getDemoSidebarMenu().selectMenuItem('custom_email_tab');"><span class="menuItem">Email Customer</span></a></li> <li style="float:left"><a id="custom_log_call_tab" href="javascript:void(0);" onclick="getDemoSidebarMenu().selectMenuItem('custom_log_call_tab');"><span class="menuItem">Log Call</span></a></li> <li style="float:left"><a id="custom_portal_tab" href="javascript:void(0);" onclick="getDemoSidebarMenu().selectMenuItem('custom_portal_tab');"><span class="menuItem">Portal Answer</span></a></li> <li style="float:left"><a id="custom_detail_tab" href="javascript:void(0);" onclick="getDemoSidebarMenu().selectMenuItem('custom_detail_tab');"><span class="menuItem">Case Details</span></a></li> </ul> <!-- Email publisher --> <div id="custom_email_pub_vf"> <apex:emailPublisher entityId="{!case.id}" width="80%"

Customizing the Layout and Appearance of Case Feed

emailBodyHeight="10em" showAdditionalFields="false" enableQuickText="true" toAddresses="{!case.contact.email}" toVisibility="readOnly" fromAddresses="[email protected]" onSubmitSuccess="refreshFeed();" /> </div> <!-- Log call publisher --> <div id="custom_log_call_vf" style="display:none"> <apex:logCallPublisher entityId="{!case.id}" width="80%" logCallBodyHeight="10em" reRender="demoFeed" onSubmitSuccess="refreshFeed();" /> </div> <!-- Portal publisher --> <div id="custom_portal_vf" style="display:none"> <support:portalPublisher entityId="{!case.id}" width="80%" answerBodyHeight="10em" reRender="demoFeed" answerBody="Dear {!Case.Contact.FirstName},\n\nHere is the solution to your case.\n\nBest regards,\n\nSupport" onSubmitSuccess="refreshFeed();" /> </div> <!-- Case detail page --> <div id="custom_detail_vf" style="display:none"> <apex:detail inlineEdit="true" relatedList="true" rerender="demoFeed" /> </div> <!-- Include library for using service desk console API --> <apex:includeScript value="/support/console/25.0/integration.js"/> <!-- Javascript for switching publishers --> <script type="text/javascript"> function DemoSidebarMenu() { var menus = {"custom_email_tab" : "custom_email_pub_vf", "custom_log_call_tab" : "custom_log_call_vf", "custom_portal_tab" : "custom_portal_vf", "custom_detail_tab" : "custom_detail_vf"}; this.selectMenuItem = function(tabId) { for (var index in menus) { var tabEl = document.getElementById(index); var vfEl = document.getElementById(menus[index]); if (index == tabId) { tabEl.className = "selected"; vfEl.style.display = "block"; } else { tabEl.className = ""; vfEl.style.display = "none"; } } }; } var demoSidebarMenu; var getDemoSidebarMenu = function() { if (!demoSidebarMenu) { demoSidebarMenu = new DemoSidebarMenu(); } return demoSidebarMenu; };

Customizing the Layout and Appearance of Case Feed

</script> <!-- Javascript for firing event to refresh feed in the sidebar --> <script type="text/javascript"> function refreshFeed() { sforce.console.fireEvent('Cirrus.samplePublisherVFPage.RefreshFeedEvent', null, null); } </script> </apex:page>

The following sample shows an Apex class containing a controller extension to be used with the Visualforce page above.
public class MyCaseExtension { private final Case mycase; private String curFilter; public MyCaseExtension(ApexPages.StandardController stdController) { this.mycase = (Case)stdController.getRecord(); // initialize feed filter based on case origin if (this.mycase.origin.equals('Email')) { curFilter = 'EmailMessageEvent'; } else if (this.mycase.origin.equals('Phone')) { curFilter = 'CallLogPost'; } else if (this.mycase.origin.equals('Web')) { curFilter = 'CaseCommentPost'; } } public String getCurFilter() { return curFilter; } public void setCurFilter(String c) { if (c.equals('All')) { curFilter = null; } else { curFilter = c; } } public PageReference refreshFeed() { return null; } }

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 Service Cloud console.
<apex:page standardController="Case" extensions="MyCaseExtension"> <!-- Feed filter --> <div> <span>Feed Filters:</span> <select onchange="changeFilter(this.options[selectedIndex].value);" id="custom_filterSelect"> <option value="All" id="custom_all_option">All</option> <option value="EmailMessageEvent" id="custom_email_option">Emails</option> <option value="CaseCommentPost" id="custom_web_option">Portal Answers</option> <option value="CallLogPost" id="custom_phone_option">Call Logs</option> </select> </div> <apex:form >

Customizing the Layout and Appearance of Case Feed

<!-- actionFunction for refreshing feed when the feed filter is updated --> <apex:actionFunction action="{!refreshFeed}" name="changeFilter" reRender="custom_demoFeed" immediate="true" > <apex:param name="firstParam" assignTo="{!curFilter}" value="" /> </apex:actionFunction> <!-- actionFunction for refreshing feed when there is an event fired for updating the feed --> <apex:actionFunction action="{!refreshFeed}" name="updateFeed" reRender="custom_demoFeed" immediate="true" /> </apex:form> <!-- Chatter feed --> <chatter:feed entityId="{!case.id}" showPublisher="false" feedItemType="{!curFilter}" id="custom_demoFeed" /> <!-- Include library for using service desk console API --> <apex:includeScript value="/support/console/25.0/integration.js"/> <!-- Javascript for adding event listener for refreshing feed --> <script type="text/javascript"> var listener = function (result) { updateFeed(); }; // add a listener for the 'Cirrus.samplePublisherVFPage.RefreshFeedEvent' event type sforce.console.addEventListener('Cirrus.samplePublisherVFPage.RefreshFeedEvent', listener); </script> <!-- Javascript for initializing select option based on case origin --> <script type="text/javascript"> window.onload = function() { var caseOrigin = "{!case.origin}"; if (!caseOrigin) { caseOrigin = "all"; } else { caseOrigin = caseOrigin.toLowerCase(); } var selectElem = document.getElementById('custom_' + caseOrigin + '_option'); if (selectElem) { selectElem.selected = true; } } </script> </apex:page>

Chapter 2
Customizing the Email Publisher
The Email publisher in Case Feed lets support agents connect with customers via email. With the apex:emailPublisher component, you can: Customize the dimensions of the Email publisher. Define defaults and visibility for fields. Define the visibility and label of the send button. Define onSubmit functionality. Support email templates and attachments in the publisher.

apex:emailPublisher Attributes
Attribute Name
autoCollapseBody bccVisibility ccVisibility emailBody emailBodyFormat emailBodyHeight enableQuickText

Attribute Type Description Boolean String String String String String Boolean A Boolean value that specifies whether the email body will collapse to a small height when it is empty. The visibility of the BCC field can be 'editable', 'editableWithLookup', 'readOnly', or 'hidden'. The visibility of the CC field can be 'editable', 'editableWithLookup', 'readOnly', or 'hidden'. The default text value of the email body. The format of the email body can be 'text', 'HTML', or 'textAndHTML'. The height of the email body in em. A Boolean value that specifies whether the Quick Text autocomplete functionality is available in the publisher. Entity ID of the record for which to display the Email publisher. In the current version only Case record ids are supported. A Boolean value that specifies whether the header is expandable or fixed. A restricted set of from addresses. The visibility of the From field can be 'selectable' or 'hidden'.

Required? API Access Version 25.0 25.0 25.0 25.0 25.0 25.0 25.0

entityId

id

Yes

25.0

expandableHeader fromAddresses fromVisibility

Boolean String String

25.0 25.0 25.0

10

Customizing the Email Publisher

Attribute Name
id onSubmitFailure onSubmitSuccess rendered

Attribute Type Description String String String Boolean An identifier that allows the component to be referenced by other components on the page. The JavaScript invoked if the email is not successfully sent. The JavaScript invoked if the email is successfully sent. A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true. The ID of one or more components that are redrawn when the email is successfully sent. 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. The name of the send button in the Email publisher. A Boolean value that specifies whether the additional fields defined in the publisher layout should be displayed. A Boolean value that specifies whether the attachment selector should be displayed. A Boolean value that specifies whether the send button should be displayed. A Boolean value that specifies whether the template selector should be displayed. The default value of the Subject. The visibility of the Subject field can be 'editable', 'readOnly', or 'hidden'. The name of a function that can be called from JavaScript to send the email. The title displayed in the email publisher header. The default value of the To field. The visibility of the To field can be 'editable', 'editableWithLookup', 'readOnly', or 'hidden'. The width of the publisher in pixels (px) or percentage (%).

Required? API Access Version 25.0 25.0 25.0 25.0 Global Global

reRender

Object

25.0

sendButtonName

String

25.0 25.0

showAdditionalFields Boolean

showAttachments showSendButton showTemplates subject

Boolean Boolean Boolean String

25.0 25.0 25.0 25.0 25.0 25.0 25.0 25.0 25.0 25.0

subjectVisibility String submitFunctionName String title toAddresses toVisibility width

String String String String

Use Case
Cirrus Computers, a multinational hardware company with technical support agents in ten support centers throughout the world, wanted to customize the Email publisher to increase standardization in outgoing messages and to limit the fields agents could edit. Cirrus used the apex:emailPublisher component to create an Email publisher that:

11

Customizing the Email Publisher

1. Has read-only To and Subject fields. 2. Pre-populates those fields, ensuring consistency and increasing agents efficiency when writing email messages.

Code Sample
<apex:page standardController="Case" > <apex:emailPublisher entityId="{!case.id}" fromVisibility="selectable" subjectVisibility="readOnly" subject="Your Cirrus support request" toVisibility="readOnly" toAddresses="{!case.contact.email}" emailBody=""/> </apex:page>

12

Chapter 3
Customizing the Portal Publisher
The Portal publisher makes it easy for support agents to compose and post messages to customers on portals. With the support:portalPublisher component, you can: Customize the dimensions of the Portal publisher. Define a default value for the portal message text. Define the visibility and label of the submit button. Define onSubmit functionality.

support:portalPublisher Attributes
Attribute Name
answerBody

Attribute Type String

Description The default text value of the answer body. The height of the answer body in ems (em). A Boolean value that specifies whether the answer body is collapsed to a small height when it is empty.

Required? API Access Version 25.0 25.0 25.0 25.0

answerBodyHeight String autoCollapseBody Boolean entityId

id

Entity ID of the record for which to display the Yes Portal publisher. In the current version, only Case record ids are supported. An identifier that allows the component to be referenced by other components on the page. The JavaScript invoked if the answer failed to be published to the portal. The JavaScript invoked if the answer was successfully published to the portal. A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true. The ID of one or more components that are redrawn when the answer is successfully published. 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. A Boolean value that specifies whether the option to send email notification should be displayed.

id onSubmitFailure onSubmitSuccess rendered

String String String Boolean

25.0 25.0 25.0 25.0

Global

Global

reRender

Object

25.0

showSendEmailOption Boolean

25.0

13

Customizing the Portal Publisher

Attribute Name

Attribute Type

Description A Boolean value that specifies whether the submit button should be displayed. The name of the submit button in the portal publisher. The name of a function that can be called from JavaScript to publish the answer. The title displayed in the portal publisher header. The width of the publisher in pixels (px) or percentage (%).

Required? API Access Version 25.0 25.0 25.0 25.0 25.0

showSubmitButton Boolean submitButtonName String submitFunctionName String title width

String String

Use Case
The Wellness Group is a healthcare company with 300 support agents in three tiers of support. Wellness wanted to customize the Portal publisher to reduce the amount of standard text, such as greetings and closings, agents had to type when replying to customers, which would help increase agents efficiency and improve the standardization of portal communications. Wellness used the support:portalPublisher component to create a Portal publisher that: Pre-populates the message body with a standard opening (Hello {name}, and thanks for your question.) and a standard closing (Please let me know if theres anything else I can do to help.). Lets agents edit the pre-populated text if needed.

Code Sample
<apex:page standardController="Case"> <support:portalPublisher entityId="{!case.id}" width="800px" answerBody="Hello {!Case.Contact.FirstName}, and thanks for your question.\n\nPlease let me know if there's anything else I can do to help."> </support:portalPublisher> </apex:page>

14

Chapter 4
Customizing the Log a Call Publisher
The Log a Call publisher lets support agents record notes and information about customer calls. With the apex:logCallPublisher, you can: Customize the appearance and dimensions of the Log a Call publisher. Specify which fields are displayed in the publisher. Define the visibility and label of the submit button. Define onSubmit functionality.

apex:logCallPublisher Attributes
Attribute Name
autoCollapseBody

Attribute Type Boolean

Description A Boolean value that specifies whether the Log a Call body is collapsed to a small height when it is empty.

Required? API Version 25.0

Access

entityId

id

Entity ID of the record for which to display the Yes Log a Call publisher. In the current version, only Case record ids are supported. An identifier that allows the component to be referenced by other components on the page. The initial text value of the Log a Call body when the publisher is rendered. The height of the Log a Call body in em. The JavaScript invoked if the call is not successfully logged. The JavaScript invoked if the call is successfully logged. A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true. The ID of one or more components that are redrawn when the call is successfully logged. 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

id logCallBody

String String

25.0 25.0 25.0 25.0 25.0 25.0

Global

logCallBodyHeight String onSubmitFailure onSubmitSuccess rendered

String String Boolean

Global

reRender

Object

25.0

15

Customizing the Log a Call Publisher

Attribute Name

Attribute Type

Description A Boolean value that specifies whether the additional fields defined in the publisher layout should be displayed. A Boolean value that specifies whether the submit button should be displayed. The name of the submit button in the Log a Call publisher. The name of a function that can be called from JavaScript to publish the call log. The title displayed in the Log a Call publisher header. The width of the publisher in pixels (px) or percentage (%).

Required? API Version 25.0

Access

showAdditionalFields Boolean

showSubmitButton submitButtonName

Boolean String

25.0 25.0 25.0 25.0 25.0

submitFunctionName String title width

String String

Use Case
Universal Cable serves millions of phone and cable customers throughout the United States, with 4000 support agents in call centers of varying sizes around the country. Universal Cable wanted to customize the Log a Call publisher so it was open and available to agents at all times, even when they were working with another publisher, giving them a quick and easy way of taking notes about incoming calls. Universal used the apex:logCallPublisher component to create a Log a Call Publisher that: Appears in the footer of the page, replacing the standard interaction log. Is open and available by default each time a support agent opens a case.

Code Sample
<apex:page standardController="Case"> <apex:logCallPublisher entityId="{!case.id}" width="100%" title="Log a Call" autoCollapseBody="false"

16

Customizing the Log a Call Publisher

showAdditionalFields="false" submitButtonName="Save Log" /> </apex:page>

After you create a Visualforce page with this code, follow these steps to use the Log a Call publisher you create as a replacement for the standard interaction log: 1. 2. 3. 4. Click Your Name > Setup > Customize > Cases > Page Layouts. Select the layout youre using from the Page Layouts for Case Feed Users list, and then select Edit detail view. Click the Custom Console Components link at the top of the page. In the Subtab Components section, use the lookup to select the page you created as the component to use for the bottom sidebar. 5. Specify the height of the publisher. 6. Click Save. 7. In the page layout editor, click Layout Properties. 8. Uncheck Interaction Log. 9. Click OK. 10. Click Save.

17

Chapter 5
Customizing the Articles Tool
The Articles tool lets support agents browse Salesforce Knowledge articles, see whether articles are attached to a case, and share relevant articles with customers. With the support:caseArticles component, you can: Customize the appearance and dimensions of the Articles tool. Define how the tools search function works, including which article types and keywords are used by default and whether advanced search is available. Specify whether agents can attach articles to emails.

support:caseArticles Attributes
Attribute Name
articleTypes

Attribute Type String

Description Article types to be used to filter the search. Multiple article types can be defined, separated by commas. A Boolean value that specifies whether articles can be attached to emails. The height of the body in pixels (px) or 'auto' to automatically adjust to the height of the currently displayed list of articles. Case ID of the record for which to display the case articles. Data categories to be used to filter the search. The format of this value should be: 'CatgeoryGroup1:Category1' where CategoryGroup1 and Category1 are the names of a Category Group and a Category respectively. Multiple category filters can be specified separated by commas but only one per category group. The keywords to be used when the defaultSearchType attribute is 'keyword'. If no keywords are specified, the Case subject is used as a default. Specifies the default query of the article search form when it is first displayed. The value can be 'keyword', 'mostViewed', or 'lastPublished'.

Required? API Version 25.0

Access

attachToEmailEnabled Boolean bodyHeight

25.0 25.0

String

caseId categories

id String

Yes

25.0 25.0

defaultKeywords

String

25.0

defaultSearchType String

25.0

18

Customizing the Articles Tool

Attribute Name
id language logSearch mode

Attribute Type String String Boolean String

Description An identifier that allows the component to be referenced by other components on the page. The language used for filtering the search if multilingual Salesforce Knowledge is enabled. A Boolean value that specifies whether keyword searches should be logged. Specifies whether the component displays articles currently attached to the case, an article search form, or both. The value can be 'attached', 'search', 'attachedAndSearch', or 'searchAndAttached'. The JavaScript invoked after an article search has completed. A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true. 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. The display name of the search button. The width of the keyword search field in pixels (px). The name of a function that can be called from JavaScript to search for articles if the widget is currently in search mode. A Boolean value that specifies whether the advanced search link should be displayed. The title displayed in the component's header. The style of the title bar can be 'expanded', 'collapsed', 'fixed', or 'none'. The width of the component in pixels (px) or percentage (%).

Required? API Version 25.0 25.0 25.0 25.0

Access Global

onSearchComplete String rendered

25.0 25.0 Global

Boolean

reRender

Object

25.0

searchButtonName String searchFieldWidth String searchFunctionName String

25.0 25.0 25.0

showAdvancedSearch Boolean title titlebarStyle width

25.0 25.0 25.0 25.0

String String String

Use Case
Cirrus Computers wanted to customize the Case Feed articles tool so agents could more easily find articles to help resolve customers issues. Cirrus used the support:caseArticles component to create an articles tool that: 1. Appears in the right sidebar of the page and is open by default on all case pages. 2. Uses search-as-you-type functionality to show suggested articles quickly. 3. Lets agents attach articles to messages they write with the Email publisher.

19

Customizing the Articles Tool

4. Displays the most recently published articles when no articles are attached to a case.

Code Sample
<apex:page standardController="Case"> <div style="margin-left:-10px;margin-right:-10px;"> <div style="background-color: #99A3AC;color:#FFFFFF;font-size:1.1em;font-weight: bold;padding:3px 6px 3px 6px;">Articles</div> <support:caseArticles caseId="{!case.id}" bodyHeight="auto" titlebarStyle="none" searchButtonName="Search" searchFieldWidth="200px" defaultSearchType="lastPublished" /> </div> </apex:page>

20

Chapter 6
Replicating a Standard Case Feed Page
The support:CaseFeed component includes all of the elements of the standard Case Feed page: Email, Portal, Log a Call, and Case Note publishers Case activity feed Feed filters Highlights panel Case following icon Case followers list Layout, print, and help links

support:CaseFeed Attributes
Attribute Name
caseId id rendered

Attribute Type id String Boolean

Description ID of the case record to display in Case Feed. An identifier that allows the component to be referenced by other components in the page. A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.

Required? API Access Version Yes 26.0 26.0 26.0 global global

Use Case
National Foods is a food service company supplying restaurants and corporate cafeterias throughout the United States. Nationals support operations includes both call center agents who work primarily on desktop computers and field agents who work mainly on mobile devices. The company wanted a simplified Case Feed page that would be easy for its field agents to use, and also wanted to give its call center agents access to the full Case Feed functionality. National used the support:CaseFeed component to recreate the standard Case Feed page for its call center agents working on desktops, and created a custom page for its field agents working on mobile devices.

21

Replicating a Standard Case Feed Page

Figure 1: Standard Case Feed page created with support:CaseFeed

Code Sample
<apex:page standardController="Case" extensions="CasePageSelectorExtension" showHeader="true" sidebar="false"> <apex:dynamicComponent componentValue="{!casePage}"/> </apex:page>

The following sample shows an Apex class containing a controller extension to be used with the Visualforce page above.
public class CasePageSelectorExtension { boolean isFieldAgent; String caseId; public CasePageSelectorExtension(ApexPages.StandardController controller) { List<UserRole> roles = [SELECT Id FROM UserRole WHERE Name = 'FieldAgent']; isFieldAgent = !roles.isEmpty() && UserInfo.getUserRoleId() == roles[0].Id; caseId = controller.getRecord().id; } public Component.Apex.OutputPanel getCasePage() { Component.Apex.OutputPanel panel = new Component.Apex.OutputPanel(); if (isFieldAgent) { Component.Apex.Detail detail = new Component.Apex.Detail(); detail.subject = caseId; panel.childComponents.add(detail); } else { Component.Support.CaseFeed caseFeed = new Component.Support.CaseFeed(); caseFeed.caseId = caseId; panel.childComponents.add(caseFeed); } return panel; } }

22

Chapter 7
Creating Custom Publishers
You can create Visualforce pages that can be used as custom publishers in Case Feed. Here are some examples of custom publishers: A Case Comment publisher that lets agents write comments on cases longer than the standard 1000 characters for case notes. A Task publisher that lets agents create tasks related to a case. An Entitlements publisher that shows the service level agreement (SLA) statussuch as past due, on time, or time to milestoneon a case and lets agents mark milestones as complete.

You can use any Visualforce page that uses the standard case controller as a custom publisher.

Use Case
Viaggio Italiano is a boutique travel agency specializing in tours of Italy. The company tracks multiple details for each client, including flights, ground transportation specifics, dietary preferences, and itineraries. Viaggio Italianos agents needed the ability to create long case comments but were limited to 1000 characters for standard case notes. The company wanted a way to bypass this limit. Viaggio Italiano used Visualforce to create a page that includes the ability to post a case comment, which can be up to 4000 characters long. The company then added the page as a custom publisher by editing the Case Feed page layout.

Code Sample
<apex:page standardcontroller="Case" extensions="CaseCommentExtension" showHeader="false"> <apex:includeScript value="/support/api/26.0/interaction.js"/> <div> <apex:form > <!-- Creates a case comment and on complete notifies the Case Feed page that a related list and the feed have been updated --> <apex:actionFunction action="{!addComment}" name="addComment" rerender="out" oncomplete="sforce.interaction.entityFeed.refreshObject('{!case.id}', false, true, true);"/> <apex:outputPanel id="out" >

23

Creating Custom Publishers

<apex:inputField value="{!comment.commentbody}" style="width:98%; height:160px;" /> </apex:outputPanel> </apex:form><br /> <button type="button" onclick="addComment();" style="position:fixed; bottom:0px; right:2px; padding: 5px 10px; font-size:13px;" id="cpbutton" >Post Case Comment </button> </div> </apex:page>

The following sample shows an Apex class containing a controller extension to be used with the Visualforce page above.
public with sharing class CaseCommentExtension { private final Case caseRec; public CaseComment comment {get; set;} public CaseCommentExtension(ApexPages.StandardController controller) { caseRec = (Case)controller.getRecord(); comment = new CaseComment(); comment.parentid = caseRec.id; } public PageReference addComment() { insert comment; comment = new CaseComment(); comment.parentid = caseRec.id; return null; } }

Additional Steps
After creating a Visualforce page, make it available to users. First, give profiles access to the page: 1. 2. 3. 4. Click Your Name > Setup > Develop > Pages. Click Security next to the name of the page you created. Choose the profiles you want to be able to access the page. Click Save.

Then include the page as a custom publisher: 1. Click Your Name > Setup > Customize > Cases > Page Layouts. 2. 3. 4. 5. 6. 7. In Page Layouts for Case Feed Users, click next to a layout and choose Edit feed view.. In Custom Publishers, click + Add a Visualforce page. Choose the page you want to add. Specify the height of the publisher. For the best appearance, we recommend a height of 200 pixels. In Select Publishers, move the custom publisher from Available to Selected. Click Save.

24

Chapter 8
Learning More
Use these resources to learn more about Case Feed and Visualforce: Implementing Case Feed Getting to Know Case Feed Visualforce Developers Guide

25