Outlook Add-in：如何让ItemSend触发的函数访问当前窗格HTML

问题描述 #

我正在Visual Studio中开发Outlook Add-in，当用户撰写邮件时会弹出一个窗格，用户可通过复选框选择数据。需要实现的是：在邮件发送时调用一个函数，读取该页面上的数据并执行后续操作。

已在清单中配置了ItemSend对应的ExtensionPoint，并指定了functionFile.html（该文件通过script标签关联functionFile.js）。当邮件发送时，onEmailOrEventSend函数会被触发，但该函数无法访问原页面的HTML。

清单配置代码：

<FunctionFile resid="functionFile" />
<ExtensionPoint xsi:type="Events">
  <Event Type="ItemSend" FunctionExecution="synchronous" FunctionName="onEmailOrEventSend" />
</ExtensionPoint>

可行解决方案 #

方法1：使用Office.context.roamingSettings存储用户选择的数据 #

任务窗格和ItemSend事件的函数处于不同浏览器上下文，无法直接共享DOM，但可以通过Office提供的roamingSettings跨上下文存储数据：

1. 任务窗格实时保存用户选择：
   当用户勾选/取消复选框时，将状态存入roamingSettings：

   // 任务窗格中的代码
   document.getElementById('your-checkbox-id').addEventListener('change', function() {
     const isChecked = this.checked;
     Office.context.roamingSettings.set('userSelection', isChecked);
     Office.context.roamingSettings.saveAsync(function(result) {
       if (result.status === Office.AsyncResultStatus.Succeeded) {
         console.log('数据保存成功');
       }
     });
   });
   

2. ItemSend事件中读取数据：
   在functionFile.js里直接读取存储的数据：

   // functionFile.js中的代码
   function onEmailOrEventSend(event) {
     const userSelection = Office.context.roamingSettings.get('userSelection');
     // 执行后续操作
     if (userSelection) {
       console.log('用户已勾选复选框');
     } else {
       console.log('用户未勾选复选框');
     }
     // 允许邮件发送（如需阻止，调用event.completed({allowEvent: false})）
     event.completed({allowEvent: true});
   }
   

方法2：使用邮件自定义属性存储数据 #

将用户选择的数据附加到当前邮件的自定义属性中，发送时读取这些属性：

1. 任务窗格设置自定义属性：

   // 任务窗格中的代码
   function saveSelectionToItem() {
     const isChecked = document.getElementById('your-checkbox-id').checked;
     Office.context.mailbox.item.loadCustomPropertiesAsync(function(result) {
       const customProps = result.value;
       customProps.set('userCheckboxSelection', isChecked);
       customProps.saveAsync(function(saveResult) {
         if (saveResult.status === Office.AsyncResultStatus.Succeeded) {
           console.log('自定义属性保存成功');
         }
       });
     });
   }
   // 绑定复选框变化事件
   document.getElementById('your-checkbox-id').addEventListener('change', saveSelectionToItem);
   

2. ItemSend事件读取自定义属性：

   // functionFile.js中的代码
   function onEmailOrEventSend(event) {
     Office.context.mailbox.item.loadCustomPropertiesAsync(function(result) {
       const customProps = result.value;
       const userSelection = customProps.get('userCheckboxSelection');
       // 执行后续逻辑
       console.log('用户选择状态：', userSelection);
       event.completed({allowEvent: true});
     });
   }
   

注意事项 #

• roamingSettings是当前用户的全局存储，适用于跨邮件的数据共享；自定义属性绑定到当前邮件，仅对该邮件有效，按需选择即可。
• 若ItemSend事件设为synchronous，需注意异步操作的执行时长，避免超时导致邮件发送被阻止；复杂异步逻辑可考虑将FunctionExecution改为asynchronous（需清单支持）。

内容的提问来源于stack exchange，提问作者Ritesh734