Outlook JS插件：替换默认Smart Alerts弹窗为自定义样式

核心结论 #

你当前使用的event.completed({ allowEvent: false, errorMessage: "..."})是SmartAlerts的标准弹窗，受微软官方限制，无法修改样式、添加富文本格式（换行/颜色/字号）或自定义按钮。要实现类似示例图的自定义弹窗，必须绕过SmartAlerts的默认提示，改用以下两种方案：

方案1：自定义对话框弹窗（推荐） #

通过displayDialogAsyncAPI弹出完全自定义的HTML页面，实现样式、内容、按钮的全控制。

1. 修改Manifest配置 #

将OnMessageSend的SendMode从PromptUser改为Cancel，避免触发默认弹窗：

<LaunchEvent Type="OnMessageSend" FunctionName="onMessageSendHandler" SendMode="Cancel"/>

2. 调整事件处理逻辑 #

在commands.js中，先取消默认发送，再唤起自定义对话框：

async function onMessageSendHandler(event) {
  // 执行你的邮件检查逻辑，这里示例为检查不通过
  const checkFailed = true;

  if (checkFailed) {
    // 阻止邮件发送
    event.completed({ allowEvent: false });
    // 弹出自定义对话框
    Office.context.ui.displayDialogAsync(
      "https://localhost:3000/custom-alert.html",
      { height: 35, width: 45, displayInIframe: true },
      (asyncResult) => {
        const dialog = asyncResult.value;
        // 监听对话框返回的用户操作
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, (args) => {
          dialog.close();
          if (args.message === "confirm-send") {
            // 用户确认发送，手动触发邮件发送
            Office.context.mailbox.item.send();
          }
        });
      }
    );
  } else {
    // 检查通过，允许发送
    event.completed({ allowEvent: true });
  }
}

3. 编写自定义弹窗页面（custom-alert.html） #

这个页面可以完全用HTML/CSS定制样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    .alert-box {
      padding: 24px;
      font-family: system-ui, -apple-system, sans-serif;
    }
    .alert-title {
      color: #dc2626;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .alert-list {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 24px;
      padding-left: 20px;
    }
    .btn-group {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    .btn {
      padding: 8px 18px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    .btn-confirm {
      background-color: #2563eb;
      color: white;
    }
    .btn-cancel {
      background-color: #6b7280;
      color: white;
    }
  </style>
</head>
<body>
  <div class="alert-box">
    <div class="alert-title">发送检查未通过</div>
    <ul class="alert-list">
      <li>邮件主题缺少必填标识</li>
      <li>附件大小超出50MB限制</li>
    </ul>
    <div class="btn-group">
      <button class="btn btn-cancel" onclick="closeDialog()">取消发送</button>
      <button class="btn btn-confirm" onclick="confirmSend()">仍要发送</button>
    </div>
  </div>
  <script>
    function confirmSend() {
      // 向主程序发送确认发送的消息
      Office.context.ui.messageParent("confirm-send");
    }
    function closeDialog() {
      Office.context.ui.messageParent("cancel");
    }
  </script>
</body>
</html>

方案2：任务窗格内显示提示（轻量方案） #

如果不需要独立弹窗，也可以在已有的任务窗格中渲染自定义提示，同时阻止发送：

async function onMessageSendHandler(event) {
  const checkFailed = true;
  if (checkFailed) {
    event.completed({ allowEvent: false });
    // 向任务窗格发送消息，触发提示渲染
    Office.context.ui.messageParent(JSON.stringify({
      type: "show-custom-alert",
      content: "<h3 style='color:red;'>发送检查未通过</h3><ul><li>主题异常</li><li>附件超限</li></ul>"
    }));
  } else {
    event.completed({ allowEvent: true });
  }
}

之后在任务窗格的JS中监听消息，将内容插入到页面指定位置即可。

关键注意点 #

• 自定义对话框的域名必须添加到Manifest的AppDomains中（本地开发就是https://localhost:3000）
• 设置SendMode="Cancel"后，必须手动调用Office.context.mailbox.item.send()完成发送
• 不同Outlook客户端（桌面/网页/移动端）对自定义对话框的支持有差异，需测试兼容性

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