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 弹出框相关推荐

IOS8中SWIFT 弹出框的显示
弹出框不管是在网页端,还是在手机APP端,都是常用的控件.在网页中实现个简单的弹出框只需要调用alert,在IOS中,也不是那么复杂,也是容易使用的. 我先用xcode6创建一个名为iOS8Swift ...
android 蒙版图片带拖动_Android实现蒙版弹出框效果
本文实例为大家分享了android蒙版弹出框效果的具体代码,供大家参考,具体内容如下自定义 package cn.lxsdb.yyd.app.dialog; import cn.lxsdb.yyd. ...
POS开发问题 - 多个弹出框的实现
业务场景如下图: 页面出现提示框: 点击确定,隐藏上面的弹出框, 继续弹出提示: 点击确定隐藏上面的弹出框,继续弹出下面提示: 点击确定隐藏上面的弹出框,继续弹出下面提示: 点击确定,跳转页面 ...
wpf 点击按钮弹出选择框_WPF-PopupWindow wpf右下角弹出框，通过按钮调用，类似QQ CSharp C#编程 238万源代码下载- www.pudn.com...
文件名称: WPF-PopupWindow下载收藏√ [ 5 4 3 2 1 ] 开发工具: C# 文件大小: 90 KB 上传时间: 2013-07-24 下载次数: 19 详细说明:w ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
Android自定义弹窗模仿微信,Android 仿微信朋友圈点赞和评论弹出框功能
本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多&q ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
android 微信点赞功能,Android 仿微信点赞和评论弹出框
wjntekaqskfhwktpgpvzhp 1. 微信弹出框微信朋友圈的点赞和评论功能,有2个组成部分: 左下角的"更多"按钮: 点击该按钮后弹出的对话框: 微信朋友圈点赞和评 ...

Teams Meeting App的 task 弹出框

Teams Meeting App的 task 弹出框相关推荐

最新文章

热门文章