Home » vue » Registering onSelectionChange

Registering onSelectionChange

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’ve been trying for the last couple of days to make a taskpane add-in for excel which is based on VUE.

I’ve followed the guide at link and i have attempted to register an event handler for onSelectionChange. It has been somewhat successful but it seems like it queues the events after some time. I then have to hover the taskpane or do something like ctrl+c for it to execute the queued up code.

I am a rookie with both JS and Vue so it’s highly likely i am missing an important piece of context.

my code is as follows:

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */

const Office = window.Office
Office.onReady()
  .then(
    registerSelectionChange(), // moved in here based on input from Rick
    new Vue({
      el: '#app',
      components: {App},
      template: '<App></App>'
    })
  )

async function registerSelectionChange() {
  return await Excel.run(async function (context) {
      let ws = context.workbook.worksheets.getActiveWorksheet();
      ws.onSelectionChanged.add(handleSelectionChange);
      return await context.sync()
  })
}

async function handleSelectionChange(event){
    return await Excel.run(async function(context){
        let ws = context.workbook.worksheets.getActiveWorksheet();
        let range = ws.getRange(event.address)
        range.values = [[1]]
        return await context.sync()
    })
}
Answers:

I have now discovered that there are problems with the registerSelectionChange(). The fix is to add <script> MutationObserver=null; </script> in the section.
More information here.

###

Since registerSelectionChange() calls Office APIs, you should call it inside Office.onReady. See Initializing your add-in for details. Please see if that helps.