How to console.log after ItemSend event is triggered in Outlook JS Addin

Question

I am having really problems dealing with ItemSend event, due to yo generator provided by MS Outlook addins which uses webpack to bundle the code, not exposing to global scope then the necessary functions for the event.

I have the correct XML in the manifest

<ExtensionPoint xsi:type="Events">
  <Event Type="ItemSend" FunctionExecution="synchronous" FunctionName="itemSendHandler" />
</ExtensionPoint>

And itemSendHandler is global, my main.js is

import { updateEventMetadataToServer, getUserCktId } from './cktApi.js'
import { initializeForm, fetchEventDataFromOutlook, fetchEventDataFromServer, setMsgOnFormConsole } from './form.js'
import { storeEventMetadata, loadEventMetadata, loadCustomProperty } from './outlookApi.js'

window.itemSendHandler = itemSendHandler 

test1 = 1 // for debug
function itemSendHandler (event) {
  fetchDataFromOutlookAndSubmitOrUpdateEventToCkt((err) => {
    if (err) {
      Office.context.mailbox.item.notificationMessages.replaceAsync('NoSend', { type: 'errorMessage', message: err.message })
      setTimeout(() => { event.completed({ allowEvent: false }) }, 3000)
    } else {
      const message = {
        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
        message: 'Event submitted/updated to CKT' + test1,
        icon: 'Icon.80x80',
        persistent: true
      }
      Office.context.mailbox.item.notificationMessages.replaceAsync('action', message)
      setTimeout(() => { event.completed({ allowEvent: true }) }, 10000)
    }
  })
}

function fetchDataFromOutlookAndSubmitOrUpdateEventToCkt (_callback) {
  const callback = (err) => {
    if (typeof _callback === 'function') {
      _callback(err)
    }
  }

  fetchEventDataFromOutlook((err) => {
    if (err) {
      console.error('There was some error fetching data from Outlook:', err)
      callback(Error('There was some error fetching data from Outlook to CKT Addin'))
    } else {
      console.success('Data fetched from Outlook assigned to form')
      test1 = 20
      loadEventMetadata((metadata) => {
        console.log('METADATA loded from Outlook: ', metadata)
        test1 = JSON.stringify(metadata) + ''
        submitUpdateEvent(metadata, (err) => {
          if (err) {
            console.error('There was an error on submitUpdateEvent', err)
            callback(Error('There was some error submitting/updating the event to CKT server'))
          } else {
            console.success('Data submited/updated to server')
            callback()
          }
        })
      })
    }
  })
}

• Any idea how to console.log in the Edge/webview2 DEV console after we click Send button? I can't simply debug because after I click the Send button, no console.log is displayed. I am consoling for debug on the Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage which is quite odd
• Any idea why loadEventMetadata fetches metadata on normal conditions but fails when itemSend is fired?

Answer 1

Take a look at this documentation: https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/debug-autolaunch

This isn't actually your scenario, but the same regkey works. (Make sure to not include "{}" around your add-in id. So set the following regkey:

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\Developer\5283AFBB-806E-2D05-BBAF-EF3384D30022

[Replace the GUID with your own Add-in ID]

And in that key hive set a DWORD of UseDirectDebugger = 1.

When your add-in launches (taskpane, execute function, itemsend, etc.) you should get a dialog that looks like this:

From there you can attach a debugger to the WebView and debug your add-in, then hit Ok