この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

コードを使用したケースフィードのカスタマイズ

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

ケースフィードのレイアウトと外観のカスタマイズ

カスタマイズされたケースフィードページを Visualforce で作成すると、表示するアクションとツールや、ページ上の表示場所など、全体的なレイアウトと外観を制御できます。また、ページの機能を向上するために、他の標準およびカスタムのコンソールコンポーネントを含めることもできます。

このガイドに記載されているケース固有の 4 つの Visualforce コンポーネントに加え、chatter:feed コンポーネントも使用してケースフィードをカスタマイズできます。次の表に、コンポーネントの属性を示します。

chatter:feed 属性

属性名 属性型 説明 必須項目 API バージョン アクセス
entityId id フィードを表示するレコードのエンティティ ID。例: Contact.Id。 はい 25.0
feedItemType String Chatter EntityFeed または UserProfileFeed を絞り込むフィード項目種別。許容値についての詳細は、『API オブジェクトリファレンスガイド』にある FeedItem オブジェクトリストの [型] 項目を参照してください。 25.0
id String ページの他のコンポーネントがコンポーネントを参照できるようにする識別子。 20.0 グローバル
onComplete String 投稿またはコメントをフィードに追加した後にコールする JavaScript 関数。 25.0
rendered Boolean アクションのレイアウトに定義された追加項目を表示するかどうかを示す boolean 値。 20.0 グローバル
reRender Object action メソッドの結果がクライアントに返されるときに再作成される 1 つ以上のコンポーネントの ID。この値には、単一の ID、ID のカンマ区切りのリスト、または ID のリストまたはコレクションの差し込み項目の式を使用できます。 25.0
showPublisher Boolean Chatter パブリッシャーを表示します。 25.0

使用事例

Acme Entertainment は、複数のプラットフォームで 100 万人を超えるユーザが使用するオンラインゲームを作成しています。Acme の 1500 人のサポートエージェントは、デスクトップコンピュータ、ラップトップ、タブレットを使用していますが、会社では異なるデバイスをまたいでデザインを標準化するためにケースフィードページをカスタマイズしたいと考えています。また、エージェントがケース活動を追跡しやすくするために、条件も使用したいと考えています。

Acme では、次の手順を使用して、カスタマイズされたケースフィードページを作成しました。

  1. パブリッシャーおよび他のケースフィードツールが常にページ中央に表示されるようにするため、chatter:feed コンポーネントを使用してフィードをサイドバーに配置しました。
  2. ケースの発生源に応じて、フィード条件および自動選択されたデフォルトの条件を再配置しました。
    • 発生源がメールの場合、デフォルト条件は [メール]。
    • 発生源が電話の場合、デフォルト条件は [通話ログ]。
    • 発生源が Web の場合、デフォルト条件は [ポータルアンサー]。
  3. ページサイズの変化に合わせてパブリッシャーを拡張/収縮することで、異なる画面サイズで一貫した外観にするため、apex:emailPublisher、apex:logCallPublisher、および support:portalPublisher をパーセントベースの幅にしました。
  4. パブリッシャーアクションのタブ方向を、標準の左側での垂直方向から、ページ上部での水平方向に変更しました。
カスタマイズされたケースフィードページ

コードサンプル

次のコードサンプルは、カスタムの [メール]、[ポータル]、[活動の記録]、[ケースの詳細] タブがある Visualforce ページを示します。

1swfobject.registerObject("clippy.codeblock-0", "9");<apex:page standardController="Case">
2
3    <!-- Repositions publisher tabs to a horizontal arrangement on top of the page -->
4    <ul class="demoNav" style="list-style: none; overflow: hidden">
5        <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>
6        <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>
7        <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>
8        <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>
9    </ul>
10
11    <!-- Email action -->
12    <div id="custom_email_pub_vf">
13        <apex:emailPublisher entityId="{!case.id}"
14             width="80%"
15             emailBodyHeight="10em"
16             showAdditionalFields="false" 
17             enableQuickText="true"
18             toAddresses="{!case.contact.email}"
19             toVisibility="readOnly"
20             fromAddresses="support@cirrus.com" 
21             onSubmitSuccess="refreshFeed();" />
22    </div>
23
24    <!-- Log call action -->
25    <div id="custom_log_call_vf" style="display:none">
26        <apex:logCallPublisher entityId="{!case.id}"
27            width="80%"
28            logCallBodyHeight="10em" 
29            reRender="demoFeed"
30            onSubmitSuccess="refreshFeed();" />
31    </div>
32
33    <!-- Portal action -->
34    <div id="custom_portal_vf" style="display:none">
35        <support:portalPublisher entityId="{!case.id}"
36            width="80%"
37            answerBodyHeight="10em" 
38            reRender="demoFeed" 
39            answerBody="Dear {!Case.Contact.FirstName},\n\nHere is the solution to your case.\n\nBest regards,\n\nSupport"
40            onSubmitSuccess="refreshFeed();" />
41    </div>
42
43    <!-- Case detail page -->
44    <div id="custom_detail_vf" style="display:none">
45        <apex:detail inlineEdit="true" relatedList="true" rerender="demoFeed" />
46    </div>
47    
48    <!-- Include library for using service desk console API -->
49    <apex:includeScript value="/support/console/25.0/integration.js"/>
50    
51    <!-- Javascript for switching publishers -->
52    <script type="text/javascript">
53        function DemoSidebarMenu() {
54            var menus = {"custom_email_tab" : "custom_email_pub_vf",
55                         "custom_log_call_tab" : "custom_log_call_vf",
56                         "custom_portal_tab" : "custom_portal_vf",
57                         "custom_detail_tab" : "custom_detail_vf"};
58
59            this.selectMenuItem = function(tabId) {
60                for (var index in menus) {
61                    var tabEl = document.getElementById(index);
62                    var vfEl = document.getElementById(menus[index]);
63
64                    if (index == tabId) {
65                        tabEl.className = "selected";
66                        vfEl.style.display = "block";
67                    } else {
68                        tabEl.className = "";
69                        vfEl.style.display = "none";
70                    }
71                }
72             };
73        }
74        var demoSidebarMenu;
75        var getDemoSidebarMenu = function() {
76            if (!demoSidebarMenu) {
77                demoSidebarMenu = new DemoSidebarMenu();
78            }
79            return demoSidebarMenu;
80        };
81    </script>
82
83    <!-- Javascript for firing event to refresh feed in the sidebar -->
84    <script type="text/javascript">
85        function refreshFeed() {
86            sforce.console.fireEvent('Cirrus.samplePublisherVFPage.RefreshFeedEvent', null, null);
87        }
88    </script>
89</apex:page>

次のサンプルに、上記の Visualforce ページで使用されるコントローラ拡張を含む Apex クラスを示します。

1swfobject.registerObject("clippy.codeblock-1", "9");public class MyCaseExtension {
2    private final Case mycase;
3    private String curFilter;
4    
5    public MyCaseExtension(ApexPages.StandardController stdController) {
6        this.mycase = (Case)stdController.getRecord();
7        
8        // initialize feed filter based on case origin
9        if (this.mycase.origin.equals('Email')) {
10            curFilter = 'EmailMessageEvent';
11        } else if (this.mycase.origin.equals('Phone')) {
12            curFilter = 'CallLogPost';
13        } else if (this.mycase.origin.equals('Web')) {
14            curFilter = 'CaseCommentPost';
15        }
16    }
17 
18    public String getCurFilter() {
19        return curFilter;
20    }
21    
22    public void setCurFilter(String c) {
23        if (c.equals('All')) {
24            curFilter = null;
25        } else {
26            curFilter = c;
27        }
28    }
29    
30    public PageReference refreshFeed() {
31        return null;
32    }
33}

次のサンプルは、ケースにカスタムフィード条件と Chatter フィードがある Visualforce ページを示します。このページは、Salesforce コンソールのサイドバーで使用できます。

1swfobject.registerObject("clippy.codeblock-2", "9");<apex:page standardController="Case" extensions="MyCaseExtension">
2
3    <!-- Feed filter -->
4    <div>
5        <span>Feed Filters:</span> 
6        <select onchange="changeFilter(this.options[selectedIndex].value);" id="custom_filterSelect">
7            <option value="All" id="custom_all_option">All</option>
8            <option value="EmailMessageEvent" id="custom_email_option">Emails</option>
9            <option value="CaseCommentPost" id="custom_web_option">Portal Answers</option>
10            <option value="CallLogPost" id="custom_phone_option">Call Logs</option>
11        </select>
12    </div>
13  
14    <apex:form >
15        <!-- actionFunction for refreshing feed when the feed filter is updated -->
16        <apex:actionFunction action="{!refreshFeed}" name="changeFilter" reRender="custom_demoFeed" immediate="true" >
17            <apex:param name="firstParam" assignTo="{!curFilter}" value="" />
18        </apex:actionFunction>
19    
20        <!-- actionFunction for refreshing feed when there is an event fired for updating the feed -->
21        <apex:actionFunction action="{!refreshFeed}" name="updateFeed" reRender="custom_demoFeed" immediate="true" />
22    </apex:form>
23  
24    <!-- Chatter feed -->
25    <chatter:feed entityId="{!case.id}" showPublisher="false" feedItemType="{!curFilter}" id="custom_demoFeed" />
26
27    <!-- Include library for using service desk console API -->
28    <apex:includeScript value="/support/console/25.0/integration.js"/>
29  
30    <!-- Javascript for adding event listener for refreshing feed -->
31    <script type="text/javascript">
32
33        var listener = function (result) {
34            updateFeed();    
35        };
36
37        // add a listener for the 'Cirrus.samplePublisherVFPage.RefreshFeedEvent' event type 
38        sforce.console.addEventListener('Cirrus.samplePublisherVFPage.RefreshFeedEvent', listener);
39    </script>
40    
41    <!-- Javascript for initializing select option based on case origin -->
42    <script type="text/javascript">     
43        window.onload = function() {
44            var caseOrigin = "{!case.origin}";
45            if (!caseOrigin) {
46                caseOrigin = "all";
47            } else {
48                caseOrigin = caseOrigin.toLowerCase();
49            }
50            var selectElem = document.getElementById('custom_' + caseOrigin + '_option');
51            if (selectElem) {
52                selectElem.selected = true;
53            }
54        }
55    </script>
56
57</apex:page>