Teams Meeting App的 task 弹出框
前幾篇文章我們介紹了 Teams Meeting App 的各種類型和如何從無到有的使用 net6 和 c# 來開發一個 Teams Meeting app，那今天我們開始討論一些 meeting app 的高級互動： task 彈出框。我們先來快速修改一下之前的代碼，看看什么是 task 彈出框。
打開?MainPage.cshtml?文件，加入如下代碼：
<body style="background: white"> ...<button onclick="add()">Add</button><script>microsoftTeams.initialize();const add = (status) => {let taskInfo = {title: "Add an item",height: 250,width: 250,url: `https://96ae-49-189-236-3.ngrok.io/TaskDialog`,};microsoftTeams.tasks.startTask(taskInfo, (err, result) => {});};</script> </body>要注意的是，上面url的domain是ngrok生成的域名，所以大家自己的代碼肯定和這個不太一樣。我們在頁面上增加了一個按鈕，當用戶點擊按鈕后，我們調用了 teams js sdk的?tasks.startTask()?方法，這個方法可以傳入彈出框的寬度，高度和標題。
然后我們增加一個?TaskDialog.cshtml?文件，內容如下：
@page <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js"integrity="sha384-6oUzHUqESdbT3hNPDDZUa/OunUj5SoxuMXNek1Dwe6AmChzqc6EJhjVrJ93DY/Bv"crossorigin="anonymous"></script> </head> <body style="background: white"><button onclick="sendResult()">OK</button><script>microsoftTeams.initialize();const sendResult = () => {const taskResult = {};microsoftTeams.tasks.submitTask(taskResult);return true;}</script> </body> </html>在TaskDialog頁面里，我們放了一個按鈕，當用戶點擊按鈕后，我們調用 teams 的?tasks.submitTask()?并且傳入 task 的結果。
然后我們運行并且安裝這個app到一個meeting里，啟動會議，點擊 app 側邊欄的按鈕，可以看到 teams 會彈出我們預先定義好的對話框頁面。
這就是 task 彈出框的最最基本版，大家看到這里可能在想，如果和這個彈出框里的一些內容傳遞側邊欄呢？我們這就來試一下。
首先，我們修改一下?TaskDialog.cshtml?文件：
<body style="background: white">Value: <input type="text" id="inputValue" /><button onclick="sendResult()">OK</button><script>microsoftTeams.initialize();const sendResult = () => {const v = document.getElementById('inputValue');const taskResult = {inputValue: v.value};microsoftTeams.tasks.submitTask(taskResult);return true;}</script> </body>我們增加了一個輸入框，然后當用戶點擊 OK 按鈕的時候，我們把輸入框的內容讀取出來，保存到?taskResult?變量里，然后把它傳給?microsoftTeams.tasks.submitTask()?函數。
在?MainPage.cshtml?里，我們也把接收到的值顯示在界面上。
<body style="background: white"> ...<button onclick="add()">Add</button><div id='result'></div><script>microsoftTeams.initialize();const add = (status) => {let taskInfo = {title: "Add an item",height: 250,width: 250,url: `https://96ae-49-189-236-3.ngrok.io/TaskDialog`,};microsoftTeams.tasks.startTask(taskInfo, (err, result) => {document.getElementById('result').innerText = result.inputValue;});};</script> </body>可以看到 callback 函數的第二個參數就是從Task彈出框的返回值。
我們運行一下 app，看一下結果。
在彈出框里輸入一些文字，然后點擊 OK 按鈕，就可以看到你輸入的文字內容顯示在了主頁面上。
看到這里相信大家腦海里已經有很多應用的場景了，趕快開始coding吧
總結
以上是生活随笔為你收集整理的Teams Meeting App的 task 弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jkd8新特性
- 下一篇： PDF有编辑密码怎么办？该怎么去除