官方文檔到目前為止對這個initiate action的說明比較簡潔,由于沒有一步步的截圖和說明,從頭到尾看一遍可能還在雲裡霧裡。
我一步步摸索着走了一遍,發現這個initiate action的功能如此強大,不敢獨享,是以寫此博文:
1. 建立bot,叫TestMsgExt,manifest檔案中的composeExtensions部分如下,特别之處是“fetchTask"這個新的屬性
"composeExtensions": [
{
"botId": "89e9cdd8-f500-4696-a701-7c2323f62a86",
"canUpdateConfiguration": true,
"commands": [
{
"id": "start",
"type": "action",
"title": "start",
"description": "start",
"initialRun": true,
"fetchTask": true,
"context": [
"commandBox",
"compose",
"message"
],
"parameters": [
{
"name": "param",
"title": "param",
"description": ""
}
]
}
]
}
],
2. 将此bot加入某個teams裡,在菜單裡就可以看到這個TestMsgExt的bot了
3. 點選後,bot就會收到如下的json
{
"name": "composeExtension/fetchTask",
"type": "invoke",
"timestamp": "2019-06-17T14:32:04.956Z",
"localTimestamp": "2019-06-18T00:32:04.956+10:00",
"id": "f:1361493733941541435",
"channelId": "msteams",
"serviceUrl": "https://smba.trafficmanager.net/apac/",
"from": {
"id": "29:1l8B9m9SOOdHTqLDgmXvSrJyHfwd2ihooa7cxgtzJ8QjQ4WFC4mA_8K2Sa7jL-xUh7g4yh8sZIiDOX6vTtoaz6w",
"name": "Tony Xia",
"aadObjectId": "56c6599d-9216-4078-a8cf-3f039d36e1fd"
},
"conversation": {
"isGroup": true,
"conversationType": "channel",
"tenantId": "aece5000-341d-493a-841d-f67e417f1447",
"id": "19:[email protected]"
},
"recipient": {
"id": "28:89e9cdd8-f500-4696-a701-7c2323f62a86",
"name": "TestMsgExt"
},
"entities": [
{
"locale": "en-US",
"country": "US",
"platform": "Windows",
"type": "clientInfo"
}
],
"channelData": {
"channel": {
"id": "19:[email protected]"
},
"team": {
"id": "19:[email protected]"
},
"tenant": {
"id": "aece5000-341d-493a-841d-f67e417f1447"
},
"source": {
"name": "compose"
}
},
"value": {
"commandId": "start",
"commandContext": "compose",
"context": {
"theme": "default"
}
},
"locale": "en-US"
}
4. 我的bot響應如下:
{
"task": {
"type": "continue",
"value": {
"card": {
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"body": [
{
"type": "TextBlock",
"text": "Please enter the following information:"
},
{
"type": "TextBlock",
"text": "Name"
},
{
"type": "Input.Text",
"spacing": "None",
"title": "New Input.Toggle",
"placeholder": "Placeholder text"
},
{
"type": "TextBlock",
"text": "Date of birth"
},
{
"type": "Input.Date",
"spacing": "None",
"title": "New Input.Toggle"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit1",
"data": {
"id": "Submit1"
}
},
{
"type": "Action.Submit",
"title": "Submit2",
"data": {
"id": "Submit2"
}
}
],
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
}
}
}
}
Teams在收到我bot的響應後會顯示如下的對話框,對話框裡的内容就是我上面json裡的adapative card。
5. 如果我們走官方文檔中的"Compose extension result response" (https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/messaging-extensions/create-extensions#compose-extension-result-response) ,bot會收到如下請求:
{
"name": "composeExtension/submitAction",
"type": "invoke",
"timestamp": "2019-06-17T14:36:26.449Z",
"localTimestamp": "2019-06-18T00:36:26.449+10:00",
"id": "f:2286900813950650039",
"channelId": "msteams",
"serviceUrl": "https://smba.trafficmanager.net/apac/",
"from": {
"id": "29:1l8B9m9SOOdHTqLDgmXvSrJyHfwd2ihooa7cxgtzJ8QjQ4WFC4mA_8K2Sa7jL-xUh7g4yh8sZIiDOX6vTtoaz6w",
"name": "Tony Xia",
"aadObjectId": "56c6599d-9216-4078-a8cf-3f039d36e1fd"
},
"conversation": {
"isGroup": true,
"conversationType": "channel",
"tenantId": "aece5000-341d-493a-841d-f67e417f1447",
"id": "19:[email protected]"
},
"recipient": {
"id": "28:89e9cdd8-f500-4696-a701-7c2323f62a86",
"name": "TestMsgExt"
},
"entities": [
{
"locale": "en-US",
"country": "US",
"platform": "Windows",
"type": "clientInfo"
}
],
"channelData": {
"channel": {
"id": "19:[email protected]"
},
"team": {
"id": "19:[email protected]"
},
"tenant": {
"id": "aece5000-341d-493a-841d-f67e417f1447"
},
"source": {
"name": "compose"
}
},
"value": {
"commandId": "start",
"commandContext": "compose",
"context": {
"theme": "default"
},
"data": {
"id": "Submit1",
"undefined": ""
}
},
"locale": "en-US"
}
bot需要做如下響應,”preview“和”attachments“裡的内容是可以根據自己的内容進行變化的,我這裡使用了官方文檔裡的json。
{
"composeExtension": {
"type": "result",
"attachmentLayout": "list",
"preview": {
"contentType": "application/vnd.microsoft.card.thumbnail",
"content": {
"title": "85069: Create a cool app",
"images": [
{
"url": "https://placekitten.com/200/200"
}
]
}
},
"attachments": [
{
"contentType": "application/vnd.microsoft.teams.card.o365connector",
"content": {
"sections": [
{
"activityTitle": "[85069]: Create a cool app",
"activityImage": "https://placekitten.com/200/200"
},
{
"title": "Details",
"facts": [
{
"name": "Assigned to:",
"value": "[Larry Brown](mailto:[email protected])"
},
{
"name": "State:",
"value": "Active"
}
]
}
]
}
}
]
}
}
可以看到我們的輸入框裡就有了一個adaptive card,我們就可以發送出去了
6. 如果我們走官方文檔中的"Response with an adaptive card message sent from a bot" (https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/messaging-extensions/create-extensions#respond-with-an-adaptive-card-message-sent-from-a-bot) ,bot會收到如下請求:
{
"name": "composeExtension/submitAction",
"type": "invoke",
"timestamp": "2019-06-17T14:40:29.473Z",
"localTimestamp": "2019-06-18T00:40:29.473+10:00",
"id": "f:6033114440747937164",
"channelId": "msteams",
"serviceUrl": "https://smba.trafficmanager.net/apac/",
"from": {
"id": "29:1l8B9m9SOOdHTqLDgmXvSrJyHfwd2ihooa7cxgtzJ8QjQ4WFC4mA_8K2Sa7jL-xUh7g4yh8sZIiDOX6vTtoaz6w",
"name": "Tony Xia",
"aadObjectId": "56c6599d-9216-4078-a8cf-3f039d36e1fd"
},
"conversation": {
"isGroup": true,
"conversationType": "channel",
"tenantId": "aece5000-341d-493a-841d-f67e417f1447",
"id": "19:[email protected]"
},
"recipient": {
"id": "28:89e9cdd8-f500-4696-a701-7c2323f62a86",
"name": "TestMsgExt"
},
"entities": [
{
"locale": "en-US",
"country": "US",
"platform": "Windows",
"type": "clientInfo"
}
],
"channelData": {
"channel": {
"id": "19:[email protected]"
},
"team": {
"id": "19:[email protected]"
},
"tenant": {
"id": "aece5000-341d-493a-841d-f67e417f1447"
},
"source": {
"name": "compose"
}
},
"value": {
"commandId": "start",
"commandContext": "compose",
"context": {
"theme": "default"
},
"data": {
"id": "Submit2",
"undefined": ""
}
},
"locale": "en-US"
}
bot需要傳回一個adaptive card用來給使用者預覽,注意這裡的type是botMessagePreview,這個是新的一種type。
{
"composeExtension": {
"type": "botMessagePreview",
"activityPreview": {
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"body": [
{
"type": "TextBlock",
"text": "Please enter the following information:"
},
{
"type": "TextBlock",
"text": "Name"
},
{
"type": "Input.Text",
"spacing": "None",
"title": "New Input.Toggle",
"placeholder": "Placeholder text"
},
{
"type": "TextBlock",
"text": "Date of birth"
},
{
"type": "Input.Date",
"spacing": "None",
"title": "New Input.Toggle"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit1",
"data": {
"id": "Submit1"
}
},
{
"type": "Action.Submit",
"title": "Submit2",
"data": {
"id": "Submit2"
}
}
],
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
}
]
}
}
}
然後teams就會彈出對話框讓使用者進行對要發送的内容進行預覽,預覽的内容就是上面attachment裡描述的adaptive card
接下去使用者就可以點選Send,bot會再次收到一個消息,bot在消息處理的時候就可以發送這個預覽的資訊到channel裡。
新的message extension處理機制,使得message extension十分靈活,同時體驗的提升很多。官方文檔有點簡單,感興趣的同學可以一步步走一遍,就能感受到這個新機制的強大之處。