Teams的MessageExtension最新功能：Initiate actions

官方文檔到目前為止對這個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:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"recipient": {"id": "28:89e9cdd8-f500-4696-a701-7c2323f62a86","name": "TestMsgExt"},"entities": [{"locale": "en-US","country": "US","platform": "Windows","type": "clientInfo"}],"channelData": {"channel": {"id": "19:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"team": {"id": "19:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"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:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"recipient": {"id": "28:89e9cdd8-f500-4696-a701-7c2323f62a86","name": "TestMsgExt"},"entities": [{"locale": "en-US","country": "US","platform": "Windows","type": "clientInfo"}],"channelData": {"channel": {"id": "19:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"team": {"id": "19:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"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:larryb@example.com)"},{"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:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"recipient": {"id": "28:89e9cdd8-f500-4696-a701-7c2323f62a86","name": "TestMsgExt"},"entities": [{"locale": "en-US","country": "US","platform": "Windows","type": "clientInfo"}],"channelData": {"channel": {"id": "19:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"team": {"id": "19:bf1cbc367561473db0c3fe762c11b508@thread.skype"},"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