CODEWITHSUNDEEP
reactjsoffice-jsoffice-addins
lokimidgard
lokimidgard

Reputation: 1129

Access function of react app in order to use On send feature for Outlook add-ins

I try to use On send feature for Outlook add-ins. My app is a react app build with webpack. In the plugin manifest I need to specify the file and function name that will be called on item send.

I defined the method as following:

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

What gets exported is following:

/***/ 181:
/***/ (function (module, __webpack_exports__, __webpack_require__) {

      "use strict";
      Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
      /* harmony export (immutable) */ __webpack_exports__["validateBody"] = validateBody;
      // import * as React from 'react';
      // import * as ReactDOM from 'react-dom';
      // import Test from '../Test';
      // import './index.css';
      //import './../function.ts'
      // ReactDOM.render(
      //   <Test text="index" />,
      //   document.getElementById('root') as HTMLElement
      // );
      function validateBody(params) {
        // console.log('Validationg Body');
        console.log("Validate called");
        console.log(params);
        params.completed({ allowEvent: false });
      }


      /***/

How have the function name to be defined in the manifest to call this method.
Or How can I define the function in a way that it will be inserted outside of the function so it can be called directly.

Upvotes: 0

Views: 810

Answers (2)

user7823505
user7823505

Reputation:

Unfortunately the UILess framework requires an HTML page that loads a function file in a script tag in the header. One way to get around this while using webpack is to create a custom webpack loader for the function file javascript that the UILess HTML function file can retrieve as if webpack were serving the file like a CDN. This loader would need to be a separate loader like a file loader: https://webpack.js.org/loaders/file-loader/

Upvotes: 1

lokimidgard
lokimidgard

Reputation: 1129

I have found a solution, but I don't like it. So I'm sitll interressted in alternatives.

I created a component that take an HTMLElement as props and assigne the function to this element on render:

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 });
    }
}

this will rendered as following:

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

And as template I use following html file to call the funciton on the dom element:

<!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">
  <!-- Office JavaScript API -->
  <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>

Then I can use the validateMailfunction.

Upvotes: 2

Related Questions