创建对话框页面
1.在项目根目录下的 ./src 文件夹中，新建文件夹“dialogs”。
2.在 ./src/dialogs 文件夹中，新建文件“popup.html”，“popup.tsx”。
3.将下面的标记添加到 popup.html 中。 注意：
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. -->
<!-- See LICENSE in the project root for license information -->
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dialog for My Office Add-in</title>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
<!-- Template styles -->
</head>
<body class="ms-font-m ms-Fabric">
<div id="dia"></div>
</body>
</html>
将下面代码写入popup.tsx中：
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useState } from 'react';
Office.onReady(() => {
// If needed, Office.js is ready to be called
});
function Dial() {
const [user, setUser]: any = useState(0);
const handleChange = (e) => {
let name = e.target.value;
setUser(name)
}
const handleSubmit = () => {
console.log({ user });
Office.context.ui.messageParent(user);
}
return <div>
<input onChange={handleChange} value={user}></input>
<button onClick={handleSubmit}>submit</button>
</div>
}
ReactDOM.render(
<Dial />,
document.getElementById("dia")
);
4.更新 webpack 配置设置
打开项目根目录中的 webpack.config.js 文件，并完成以下步骤。
1.在 config 对象内找到 entry 对象并为 popup 添加新条目。
popup: "./src/dialogs/popup.js"
完成此操作之后，新的 entry 对象将与此类似：
entry: {
vendor: ["react", "react-dom", "core-js", "office-ui-fabric-react"],
taskpane: ["react-hot-loader/patch", "./src/taskpane/index.tsx"],
commands: "./src/commands/commands.ts",
popup: "./src/dialogs/popup.tsx"
},
2.在 config 对象中找到 plugins 数组，并添加下列对象至数组的结尾。
new HtmlWebpackPlugin({
filename: "popup.html",
template: "./src/dialogs/popup.html",
chunks: ["polyfills", "popup"]
}),
完成此操作之后，新的 plugins 数组将与此类似：
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
to: "taskpane.css",
from: "./src/taskpane/taskpane.css"
},
{
to: "[name]." + buildType + ".[ext]",
from: "manifest*.xml",
transform(content) {
if (dev) {
return content;
} else {
return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
}
}
}
]
}),
new ExtractTextPlugin("[name].[hash].css"),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["taskpane", "vendor", "polyfills"]
}),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["commands"]
}),
new HtmlWebpackPlugin({
filename: "popup.html",
template: "./src/dialogs/popup.html",
chunks: ["polyfills", "popup"]
}),
new webpack.ProvidePlugin({
Promise: ["es6-promise", "Promise"]
})
],
打开 ../taskpane/components/App.tsx文件,在render() return 中加入一个button及一个label
<br />
<button onClick={this.handleOpen}>打开对话框</button>
<br />
<label id="user-name"></label><br /><br />
添加下列声明至文件结尾。 此变量用于保留父页面执行上下文中的对象，以用作对话框页面执行上下文的中间对象
var dialog = null;
增加一个handleOpen方法
handleOpen = () => {
Office.context.ui.displayDialogAsync(
'https://localhost:3000/popup.html',
{ height: 45, width: 55 },
result => {
dialog = result.value;
dialog.addEventHandler(Office.EventType.DialogMessageReceived, arg => {
document.getElementById("user-name").innerHTML = arg.message;
dialog.close();
});
}
)
}
以上代码已经完成了整个对话框的使用，
原理如下:
1.先在taskpane中用button点击触发事件handleOpen，
2.handleOpen 事件利用Office.context.ui.displayDialogAsync方法 定义窗口的地址，长及宽，
利用message获取回调值，更新Label
3.在input框输入值，单击submit键，会调用Office.context.ui.messageParent()方法，将值回调，
官方文档：
https://docs.microsoft.com/zh-cn/office/dev/add-ins/develop/dialog-api-in-office-add-ins
