Outlook Web Add-in：如何屏蔽点击按钮时的默认通知消息

I’ve run into this exact frustrating issue before with Outlook Web Add-ins—those auto-populated default progress messages can totally clash with the custom feedback you want to show users. The good news is there’s a simple fix using your add-in’s manifest file.

The Root Cause #

That "[Add-in Name] is working on your [Button Label] request" message is automatically triggered by Office.js whenever you have an ExecuteFunction action tied to a button, especially for asynchronous operations. To take full control of the notification experience, you just need to explicitly tell Office to suppress this default behavior.

Step-by-Step Fix #

1. Open your add-in’s manifest XML file (usually named something like manifest.xml or OfficeAddinManifest.xml).
2. Locate the <Control> node for the button you’re modifying, which wraps the <Button> element.
3. Add the <SuppressNotification>true</SuppressNotification> child element inside the <Button> tag. This tells Office not to render the default progress notification.

Here’s what the modified manifest snippet looks like:

<Control xsi:type="Button" id="MyCustomActionButton">
  <Label resid="Button_Label" />
  <Supertip>
    <Title resid="Button_Title" />
    <Description resid="Button_Description" />
  </Supertip>
  <Icon>
    <bt:Image size="16" resid="Icon_16x16" />
    <bt:Image size="32" resid="Icon_32x32" />
    <bt:Image size="80" resid="Icon_80x80" />
  </Icon>
  <Action xsi:type="ExecuteFunction">
    <FunctionName>handleCustomButtonClick</FunctionName>
  </Action>
  <!-- This line suppresses the default notification -->
  <SuppressNotification>true</SuppressNotification>
</Control>

Verify with Your Custom Notification #

After updating the manifest, re-sideload or redeploy your add-in. Now when users click the button, the default message won’t pop up, and your custom progress notification will be the only feedback they see. Here’s a quick reminder of how to structure your JavaScript code for the custom message:

function handleCustomButtonClick() {
  const customProgressMsg = "Processing your request—hang tight!";
  
  // Show your custom progress indicator
  Office.context.mailbox.item.notificationMessages.replaceAsync(
    'customProgress',
    { type: 'progressIndicator', message: customProgressMsg },
    (result) => {
      if (result.error) {
        console.error("Failed to show custom notification:", result.error.message);
      }
    }
  );

  // Run your actual async logic here
  yourAsyncBusinessLogic()
    .then(() => {
      // Update notification to success message
      Office.context.mailbox.item.notificationMessages.replaceAsync(
        'customProgress',
        { type: 'informationalMessage', message: "Request completed successfully!", icon: 'icon-success', persistent: false }
      );
    })
    .catch((err) => {
      // Update notification to error message
      Office.context.mailbox.item.notificationMessages.replaceAsync(
        'customProgress',
        { type: 'errorMessage', message: `Request failed: ${err.message}`, persistent: false }
      );
    });
}

Key Notes #

• This SuppressNotification attribute only works with ExecuteFunction type actions. If you’re using a ShowTaskpane action, the default notification behavior is different, but for your use case (triggering a function and showing custom progress), this should be perfect.
• Double-check the placement: the element needs to be inside the <Button> tag, not under the <Action> element—this is a common mistake that breaks the fix.

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