Question

我尝试使用On send feature for Outlook add-ins。我的应用程序是使用webpack构建的反应应用程序。在插件清单中，我需要指定将在项目发送时调用的文件和函数名称。

我将方法定义如下：

public class InternalService {

    public void processOrder(Order order) {
        if (order.isSuccessful()) {
            InternalUtils.sendEmail("", new String[1], "", "");
            InternalUtils.sendEmail("", new String[1], "", "");
        }
    }

    public static class InternalUtils{

        public static void sendEmail(String from, String[]  to, String msg, String body){

        }

    }

    public class Order{

        public boolean isSuccessful(){
            return true;
        }

    }

}

导出的内容如下：

export function validateBody(params: any): void {
  console.log("Validate called");
  console.log(params);
  params.completed({ allowEvent: false });
}

如何在清单中定义函数名称以调用此方法或者我如何定义函数以便将其插入到函数外部，以便可以直接调用它。

Answer 1

我找到了解决方案，但我不喜欢它。因此，我可以选择其他方式。

我创建了一个组件，它将HTMLElement作为props并在渲染时将该函数分配给该元素：

-s

这将呈现如下：

class FunctionHelper extends React.Component<{  dom: HTMLElement }, {}> {

    constructor() {
        super();
    }

    render() {
        (this.props.dom as any).validateFunction = this.TestEvaluation;
        console.log('Render App');
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Welcome to React</h2>
                </div>
                <p className="App-intro">
                    To get started, edit <code>src/App.tsx</code> and save to reload.
                </p>
            </div>
        );
    }

    TestEvaluation(params: any): void {
        // console.log('Validationg Body');
        console.log("Validate called");
        console.log(params);
        params.completed({ allowEvent: false });
    }
}

作为模板，我使用以下html文件来调用dom元素上的函数：

ReactDOM.render(
  <FunctionHelper dom={document.getElementById('root') as HTMLElement} />,
  document.getElementById('root') as HTMLElement
);

然后我可以使用<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">  <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script> <title>React App</title> </head> <body> <div id="root"></div> <script> function validateMail(params) { console.log('Calling Function Validate') let element = document.getElementById('root'); element.validateFunction(params); } </script> </body> </html>函数。

Answer 2

不幸的是，UILess框架需要一个HTML页面，它在标题的脚本标记中加载一个函数文件。使用webpack时解决这个问题的一种方法是为函数文件javascript创建一个自定义webpack加载器，UILess HTML函数文件可以检索它，好像webpack像CDN一样为文件提供服务。这个加载器需要像文件加载器一样单独加载： https://webpack.js.org/loaders/file-loader/

反应应用程序的访问功能，以便使用Outlook加载项的发送功能

2 个答案: