花都定制型网站建设,网站建设如何在宣传部备案,没有网站可以做京东联盟吗,驻马店 网站制作前几篇文章我们介绍了 Teams Meeting App 的各种类型和如何从无到有的使用 net6 和 c# 来开发一个 Teams Meeting app#xff0c;那今天我们开始讨论一些 meeting app 的高级互动#xff1a; task 弹出框。我们先来快速修改一下之前的代码#xff0c;看看什么是 task 弹出框…前几篇文章我们介绍了 Teams Meeting App 的各种类型和如何从无到有的使用 net6 和 c# 来开发一个 Teams Meeting app那今天我们开始讨论一些 meeting app 的高级互动 task 弹出框。我们先来快速修改一下之前的代码看看什么是 task 弹出框。
打开 MainPage.cshtml 文件加入如下代码
body stylebackground: white
...button onclickadd()Add/buttonscriptmicrosoftTeams.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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srchttps://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.jsintegritysha384-6oUzHUqESdbT3hNPDDZUa/OunUj5SoxuMXNek1Dwe6AmChzqc6EJhjVrJ93DY/Bvcrossoriginanonymous/script
/head
body stylebackground: whitebutton onclicksendResult()OK/buttonscriptmicrosoftTeams.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 stylebackground: whiteValue: input typetext idinputValue /button onclicksendResult()OK/buttonscriptmicrosoftTeams.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 stylebackground: white
...button onclickadd()Add/buttondiv idresult/divscriptmicrosoftTeams.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吧
