コードを使用したケースフィードのカスタマイズ
jカスタムアクションの作成
ケースフィードでカスタムアクションとして使用する Visualforce ページを作成できます。たとえば、対応付けおよびローカル検索アクションを作成することで、エージェントは顧客の場所を検索して、最寄りのサービスセンターを見つけることができるようになります。
標準ケースコントローラを使用する Visualforce ページをカスタムアクションとして使用できます。
使用事例
Viaggio Italiano は、イタリアへのツアーを専門に取り扱う特化型の旅行代理店です。この会社は、飛行機の便、陸上交通機関、食事に関する希望、旅程など、顧客ごとに複数の詳細を追跡します。Viaggio Italiano のエージェントには、長いケースコメントを作成する機能が必要ですが、標準ケースメモは 1000 文字に制限されています。したがって、この制限をスキップする方法を希望しています。
Viaggio Italiano では、Visualforce を使用して、4000 文字までのケースコメントを投稿できる機能を含むページを作成しました。さらに、ケースフィードページレイアウトを編集して、ページをカスタムアクションとして追加しました。
コードサンプル
次のコードサンプルは、パブリッシャーでアクションが有効化されていない組織、またはパブリッシャーでアクションが有効化されていてもページレイアウトエディタではなくケースフィードの設定ページを使用してケースフィードパブリッシャーでアクションを設定する組織の [ケースコメントを投稿] カスタムアクションを示します。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardcontroller="Case"
18 extensions="CaseCommentExtension" showHeader="false">
19 <apex:includeScript value="/support/api/26.0/interaction.js"/>
20 <div>
21 <apex:form >
22 <!-- Creates a case comment and on complete notifies the Case Feed page
23 that a elated list and the feed have been updated -->
24 <apex:actionFunction action="{!addComment}" name="addComment" rerender="out"
25 oncomplete="sforce.interaction.entityFeed.refreshObject('{!case.id}',
26 false, true, true);"/>
27 <apex:outputPanel id="out" >
28 <apex:inputField value="{!comment.commentbody}" style="width:98%;
29 height:160px;" />
30 </apex:outputPanel>
31 </apex:form><br />
32 <button type="button" onclick="addComment();" style="position:fixed; bottom:0px;
33 right:2px; padding: 5px 10px; font-size:13px;" id="cpbutton" >Post Case Comment
34 </button>
35 </div>
36</apex:page>次のコードは、組織のパブリッシャーでアクションが有効化され、ページレイアウトエディタを使用してケースフィードパブリッシャーでアクションを選択および設定する場合に、[ケースコメントを投稿] カスタムアクションに使用されます。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardcontroller="Case"
18 extensions="CaseCommentExtension" showHeader="false">
19 <!-- Uses publisher.js rather than interaction.js -->
20 <apex:includeScript value="/canvas/sdk/js/28.0/publisher.js"/>
21 <div>
22 <apex:form >
23 <!-- Creates a case comment and on complete notifies the Case Feed page
24 that a related list and the feed have been updated -->
25 <apex:actionFunction action="{!addComment}" name="addComment" rerender="out"
26 <!-- Different oncomplete function using publisher.js -->
27 oncomplete="Sfdc.canvas.publisher.publish(
28 {name : 'publisher.refresh', payload :
29 {feed: true, objectRelatedLists: {}}});"/>
30 <apex:outputPanel id="out" >
31 <apex:inputField value="{!comment.commentbody}" style="width:98%;
32 height:160px;" />
33 </apex:outputPanel>
34 </apex:form><br />
35 <button type="button" onclick="addComment();" style="position:fixed; bottom:0px;
36 right:2px; padding: 5px 10px; font-size:13px;" id="cpbutton" >Post Case Comment
37 </button>
38 </div>
39</apex:page>次のサンプルは、上記のいずれかのバージョンの Visualforce ページで使用されるコントローラ拡張を含む Apex クラスを示します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public with sharing class CaseCommentExtension {
18 private final Case caseRec;
19 public CaseComment comment {get; set;}
20
21 public CaseCommentExtension(ApexPages.StandardController controller) {
22 caseRec = (Case)controller.getRecord();
23 comment = new CaseComment();
24 comment.parentid = caseRec.id;
25 }
26
27 public PageReference addComment() {
28 insert comment;
29 comment = new CaseComment();
30 comment.parentid = caseRec.id;
31 return null;
32 }
33}追加の手順
Visualforce ページを作成したら、ユーザが使用できるようにします。
まず、ページにアクセスできるプロファイルを指定します。
- [設定] で、 をクリックします。
- 作成したページの名前の横にある [セキュリティ] をクリックします。
- ページにアクセスできるプロファイルを選択します。
- [保存] をクリックします。
次に、ページをカスタムアクションとして含めます。ケースフィードの設定ページを使用してアクションを選択および設定する場合の手順は、次のとおりです。
- [設定] で、 をクリックします。
-
ケースフィードの設定ページへのアクセス方法は、使用しているページレイアウトの種類に応じて異なります。
- [ケースページレイアウト] セクションのレイアウトの場合、[編集] をクリックし、ページレイアウトエディタで [フィードビュー] をクリックします。
- [ケースフィードユーザのページレイアウト] セクションのレイアウトの場合、
をクリックし、[フィードビューを編集] を選択します (このセクションは、Spring '14 より前に作成された組織にのみ表示されます)。
- [カスタムアクション] で、[+ Visualforce ページを追加] をクリックします。
- 追加するページを選択します。
- アクションの高さを指定します。最適な外観を得るには、200 ピクセルの高さをお勧めします。
- [アクションを選択] で、カスタムアクションを [選択可能] から [選択済み] に移動します。
- [保存] をクリックします。
アクションの選択および設定にページレイアウトエディタを使用することを選択した場合は、まずカスタムアクションを作成する必要があります。
- [設定] で、 をクリックします。
- [新規アクション]をクリックします。
- [カスタム Visualforce] を選択します。
- 作成した Visualforce ページを選択してから、アクションウィンドウの高さを指定します (幅は固定です)。
- アクションの表示ラベルを入力します。これは、パブリッシャーでアクションについてユーザに表示されるテキストです。
- 必要に応じて、アクションの名前を変更します。
- アクションの説明を入力します。説明は、アクションの詳細ページと、[ボタン、リンク、およびアクション] ページのリストに表示されます。ユーザには表示されません。
- 必要に応じて、[変更アイコン] をクリックして、アクションに別のアイコンを選択します。このアイコンは、API を介してアクションを使用する場合にのみ表示されます。
次に、アクションをページレイアウトに追加します。
- [設定] で、 をクリックします。
- ページレイアウトエディタへのアクセス方法は、使用しているページレイアウトの種類に応じて異なります。
- [ケースページレイアウト] セクションのレイアウトの場合、[編集] をクリックし、ページレイアウトエディタで [フィードビュー] をクリックします。
- [ケースフィードユーザのページレイアウト] セクションのレイアウトの場合、 をクリックし、[詳細ビューを編集] を選択します。(このセクションは、Spring '14 より前に作成された組織にのみ表示されます)。
- パレットで [クイックアクション] をクリックします。
- アクションをパレットから [パブリッシャーのクイックアクション] セクションにドラッグします。
- [保存] をクリックします｡