Fonction d'accès de l'application de réaction afin d'utiliser la fonction Sur envoyer pour les compléments Outlook

J'essaie d'utiliser On send feature for Outlook add-ins. Mon application est une application de réaction construite avec webpack. Dans le manifeste du plugin, je dois spécifier le nom du fichier et de la fonction qui sera appelée lors de l'envoi de l'élément.Fonction d'accès de l'application de réaction afin d'utiliser la fonction Sur envoyer pour les compléments Outlook

I définit la méthode comme suit:

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

Ce qui est exporté est le suivant:

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


     /***/

Comment ont le nom de la fonction à définir dans le manifeste d'appeler cette méthode.
Ou Comment définir la fonction de sorte qu'elle soit insérée en dehors de la fonction afin qu'elle puisse être appelée directement.

Source

2017-08-16 lokimidgard

J'ai trouvé une solution, mais je ne l'aime pas. Donc je suis interpellé dans des alternatives.

J'ai créé un composant qui prend un HTMLElement comme accessoires et assigne la fonction de cet élément sur 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 }); 
    } 
}

cela traduit comme suivant:

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

Et comme modèle j'utiliser suivant fichier html pour appeler le funciton sur l'élément dom:

<!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>

Alors je peux nous e la fonction validateMail.

Source

2017-08-16 13:19:13 lokimidgard

Malheureusement, l'infrastructure UILess nécessite une page HTML qui charge un fichier de fonction dans une balise de script dans l'en-tête. Une façon de contourner ce problème tout en utilisant webpack est de créer un chargeur webpack personnalisé pour le fichier de fonction javascript que le fichier de fonction UILess HTML peut récupérer comme si webpack servait le fichier comme un CDN. Ce chargeur devrait être un chargeur séparé comme un chargeur de fichiers: https://webpack.js.org/loaders/file-loader/

Source

2017-08-16 21:01:48

Fonction d'accès de l'application de réaction afin d'utiliser la fonction Sur envoyer pour les compléments Outlook

Répondre

Questions connexes