Web 用組み込みサービス開発者ガイド
jカスタムの最小化時のコンポーネントのコードサンプル
次のコードサンプルには、Aura を使用したカスタムの最小化時の組み込みコンポーネントのコンポーネント、コントローラ、ヘルパーのコード例が含まれています。
このコンポーネントには次の特徴があります。
- Aura を使用して ui:button コンポーネントを作成し、ボタンクリックを組み込みコンポーネントの最大化にバインドします。
- 初期化関数を使用して最小化時のイベントの汎用イベントハンドラを登録し、イベント名に応じてメッセージを更新します。
- 必要に応じて CSS スタイル設定を含みます。
コンポーネントコード
1<aura:component implements="lightningsnapin:minimizedUI" description="Custom Minimized UI">
2 <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
3 <aura:attribute name="message" type="String" default="Chat with us!"/>
4
5 <!-- For registering our minimized event handler and maximizing -->
6 <lightningsnapin:minimizedAPI aura:id="minimizedAPI"/>
7
8 <button class="minimizedContainer"
9 onclick="{!c.handleMaximize}"
10 aura:id="minimizedContainer">
11 <div class="messageContent">
12 {!v.message}
13 </div>
14 </button>
15</aura:component>コントローラコード
1({
2 onInit: function(cmp, evt, hlp) {
3 // Register the generic event handler for all the minimized events
4 cmp.find("minimizedAPI").registerEventHandler( hlp.minimizedEventHandler.bind(hlp, cmp));
5 },
6
7 handleMaximize: function(cmp, evt, hlp) {
8 cmp.find("minimizedAPI").maximize();
9 }
10})ヘルパーコード
1({
2 minimizedEventHandler: function(cmp, eventName, eventData) {
3 switch(eventName) {
4 case "prechatState":
5 this.onPrechatState(cmp, eventData);
6 break;
7 case "offlineSupportState":
8 this.onOfflineSupportState(cmp, eventData);
9 break;
10 case "waitingState":
11 this.onWaitingState(cmp, eventData);
12 break;
13 case "queueUpdate":
14 this.onQueueUpdate(cmp, eventData);
15 break;
16 case "waitingEndedState":
17 this.onWaitingEndedState(cmp, eventData);
18 break;
19 case "chatState":
20 this.onChatState(cmp, eventData);
21 break;
22 case "chatTimeoutUpdate":
23 this.onChatTimeoutUpdate(cmp, eventData);
24 break;
25 case "chatUnreadMessage":
26 this.onChatUnreadMessage(cmp, eventData);
27 break;
28 case "chatTransferringState":
29 this.onChatTransferringState(cmp, eventData);
30 break;
31 case "chatEndedState":
32 this.onChatEndedState(cmp, eventData);
33 break;
34 case "reconnectingState":
35 this.onReconnectingState(cmp, eventData);
36 break;
37 case "postchatState":
38 this.onPostchatState(cmp, eventData);
39 break;
40 default:
41 throw new Error("Received unexpected minimized event '" + eventName + "'.");
42 }
43 },
44
45 /**
46 * "prechatState" event handler. This fires when pre-chat state is initialized.
47 *
48 * @param {Aura.Component} cmp - This component.
49 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
50 */
51 onPrechatState: function(cmp, eventData) {
52 this.setMinimizedContent(cmp, eventData.label);
53 },
54
55 /**
56 * "offlineSupportState" event handler. This fires when offline support state is initialized.
57 *
58 * @param {Aura.Component} cmp - This component.
59 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
60 */
61 onOfflineSupportState: function(cmp, eventData) {
62 this.setMinimizedContent(cmp, eventData.label);
63 },
64
65 /**
66 * "waitingState" and "queueUpdate" are fired when EITHER
67 * 1) waiting state is initialized, either with a new session or via page navigation or refresh, OR
68 * 2) the visitor was previously in reconnecting, and they've regained connection.
69 *
70 * Only one of "waitingState" and "queueUpdate" is ever fired - never both.
71 * - "waitingState" is fired if EITHER queue position is DISABLED, OR snippet version under 5.0.
72 * - "queueUpdate" is fired if queue position is ENABLED, AND snippet version is 5.0 or later.
73 */
74
75 /**
76 * "waitingState" event handler. See above doc.
77 *
78 * @param {Aura.Component} cmp - This component.
79 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
80 */
81 onWaitingState: function(cmp, eventData) {
82 this.setMinimizedContent(cmp, eventData.label);
83 },
84
85 /**
86 * "queueUpdate" event handler. See above doc.
87 *
88 * @param {Aura.Component} cmp - This component.
89 * @param {Object} eventData - Event data. For this event, this contains label and queuePosition.
90 */
91 onQueueUpdate: function(cmp, eventData) {
92 this.setMinimizedContent(cmp, eventData.label + " " + eventData.queuePosition);
93 },
94
95 /**
96 * "waitingEndedState" event handler. This fires in waiting state when the chat request fails.
97 *
98 * @param {SampleCustomMinimizedUI.SampleCustomMinimizedUIComponent} cmp - This component.
99 * @param {Object} eventData - Event data. For this event, this contains label and reason. We don't use reason though.
100 */
101 onWaitingEndedState: function(cmp, eventData) {
102 this.setMinimizedContent(cmp, eventData.label);
103 },
104
105 /**
106 * "chatState" event handler. This fires when EITHER
107 * 1) chat state is initialized, either with a new session or via page navigation or refresh, OR
108 * 2) the visitor was previously in chat transfer, and they've been connected to a new agent, OR
109 * 3) the visitor was previously in reconnecting, and they've regained connection.
110 *
111 * @param {Aura.Component} cmp - This component.
112 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
113 */
114 onChatState: function(cmp, eventData) {
115 this.setMinimizedContent(cmp, eventData.label);
116 },
117
118 /**
119 * "chatTimeoutUpdate" event handler. This fires when the visitor idle timeout has started.
120 *
121 * @param {Aura.Component} cmp - This component.
122 * @param {Object} eventData - Event data. For this event, this contains label and timeoutSecondsRemaining.
123 */
124 onChatTimeoutUpdate: function(cmp, eventData) {
125 this.setMinimizedContent(cmp, eventData.label);
126 },
127
128 /**
129 * "chatUnreadMessage" event handler. This fires when the agent sends a message but the visitor hasn't seen it
130 * yet, either because they are scrolled up in the chat message area, or because the widget is minimized.
131 *
132 * @param {Aura.Component} cmp - This component.
133 * @param {Object} eventData - Event data. For this event, this contains label and unreadMessageCount.
134 */
135 onChatUnreadMessage: function(cmp, eventData) {
136 this.setMinimizedContent(cmp, eventData.label);
137 },
138
139 /**
140 * "chatTransferringState" event handler. This fires when a chat transfer has been initiated.
141 *
142 * @param {Aura.Component} cmp - This component.
143 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
144 */
145 onChatTransferringState: function(cmp, eventData) {
146 this.setMinimizedContent(cmp, eventData.label);
147 },
148
149 /**
150 * "chatEndedState" event handler. This fires in chat state when the chat ends for any reason.
151 *
152 * @param {Aura.Component} cmp - This component.
153 * @param {Object} eventData - Event data. For this event, this contains label and reason.
154 */
155 onChatEndedState: function(cmp, eventData) {
156 this.setMinimizedContent(cmp, eventData.label);
157 },
158
159 /**
160 * "reconnectingState" event handler. This fires in both waiting and chat state when the visitor loses connection.
161 *
162 * @param {Aura.Component} cmp - This component.
163 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
164 */
165 onReconnectingState: function(cmp, eventData) {
166 this.setMinimizedContent(cmp, eventData.label);
167 },
168
169 /**
170 * "postchatState" event handler. This fires when the visitor enters post chat by clicking "Give Feedback".
171 *
172 * @param {Aura.Component} cmp - This component.
173 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
174 */
175 onPostchatState: function(cmp, eventData) {
176 this.setMinimizedContent(cmp, eventData.label);
177 },
178
179 /**
180 * Update the contents of the sample minimized component.
181 *
182 * @param {Aura.Component} cmp - This component.
183 * @param {String} message - The text to display.
184 */
185 setMinimizedContent: function(cmp, message) {
186 cmp.set("v.message", message);
187 }
188});CSS コード
1.THIS {
2 position: fixed;
3 left: auto;
4 bottom: 0;
5 right: 12px;
6 margin: 0;
7 min-width: 12em;
8 max-width: 14em;
9 height: 46px;
10 width: 192px;
11 max-height: 100%;
12 border-radius: 8px 8px 0 0;
13 text-align: center;
14 text-decoration: none;
15 display: flex;
16 flex-direction: center;
17justify-content: center;
18box-shadow: none;
19 pointer-events: all;
20 overflow: hidden;
21 background-color: rgb(0, 112, 210);
22 font-size: 16px;
23}
24
25.THIS.minimizedContainer:focus,
26.THIS.minimizedContainer:hover {
27color: rgb(255, 255, 255);
28text-decoration: underline;
29outline: none;
30background-color: rgb(0, 95, 178);
31box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
32}
33
34.THIS .messageContent {
35 display: block;
36 padding: 0 8px;
37 height: 100%;
38 color: rgb(255, 255, 255);
39}