天天看點

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了

Teams的MessageExtension最新功能:Initiate actions

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。

Teams的MessageExtension最新功能:Initiate actions

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,我們就可以發送出去了

Teams的MessageExtension最新功能:Initiate actions

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

Teams的MessageExtension最新功能:Initiate actions

接下去使用者就可以點選Send,bot會再次收到一個消息,bot在消息處理的時候就可以發送這個預覽的資訊到channel裡。

新的message extension處理機制,使得message extension十分靈活,同時體驗的提升很多。官方文檔有點簡單,感興趣的同學可以一步步走一遍,就能感受到這個新機制的強大之處。

繼續閱讀