Кнопки Office Add-in не вызывают функции

Question

Я работал над этим проектом, надстройкой простого оглавления для Excel. Я не могу заставить свои кнопки срабатывать. Я могу отладить и увидеть свою панель задач, но нажатие на мои кнопки ничего не делает.

Есть 2 кнопки: создать и удалить. Мой js файл здесь .

РЕДАКТИРОВАТЬ

Используя ScriptLab, приведенный ниже код является тем, что я успешно протестировал. Однако, когда я попытался перенести его обратно на VS, при нажатии кнопки ничего не делают.

$("#run").click(() => tryCatch(run));

async function run() {
  await Excel.run(async (context) => {

    var sheets = context.workbook.worksheets;
    sheets.load("items/name");
    var sheetName = 'Table of Contents';
    await context.sync();

    return context.sync()
      .then(function () {

        var toc = sheets.items.find(ws => ws.name == sheetName);
        if (!toc) {
          toc = sheets.add(sheetName);
          context.sync();
        } else {
          toc.getUsedRange().clear();
        }
        toc.load("name, position");
        context.sync();

        var values = [];
        var count = 0;
        sheets.items.forEach((ws) => {
          if (ws.name !== sheetName) {
            values.push([(count + 1), "=HYPERLINK(\"#\"&\"'\" & \"" + ws.name + "\" & \"'!A1\",\"" + ws.name + "\")"]);
            count++;
          }
        })

        toc.position = 0;
        toc.activate();
        toc.getRange("A:A").format.columnWidth = 2;
        toc.getRange("B:B").format.columnWidth = 20;
        toc.getRange("C:C").format.columnWidth = 200;
        toc.getRange("C:C").format.wrapText = true;
        toc.getRange("1:1").format.rowHeight = 5;
        toc.getRange("3:3").format.rowHeight = 5;
        toc.getRange("B2").values = [["Table of Contents"]];
        toc.getRange("B2").format.font.size = 18;
        toc.getRange("B2").format.font.bold = true;

        if (values.length === 0) {
          console.log('error 1');
          return context.sync();
        }

        var dataRangeAddress = `B4:C${3 + (count || 1)}`;
        var dataRange = toc.getRange(dataRangeAddress);
        context.sync();
        dataRange.values = values;
        toc.calculate(false);

        return context.sync();
      });

    await context.sync();
  });
};

/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
  try {
    await callback();
  } catch (error) {
    // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
    console.error(error);
  }
};

Answer 1

Одна вещь, которую я заметил, это то, что у вас есть for ... in l oop, работающий поверх sheets.items:

for (i in sheets.items)

Но WorksheetCollection.items - это массив. Использование массива for ... in l oop над массивом считается плохой практикой. (См. для ... в .) Кроме того, выполнение чего-то нестандартного делает затруднительным для других думать о вашем коде.

Что более важно, вам нужно получить больше информации о том, что идет не так. Пожалуйста, скачайте ScriptLab tool . Вы можете использовать его для тестирования ваших методов, и у него есть хорошая консоль, которая будет сообщать вам об ошибках.

ОБНОВЛЕНИЕ: Я также вижу, что ваша функция removeTableOfContents проверяет истинность !sheet, но в файле не объявляется переменная с именем sheet, поэтому !sheet всегда будет считаться верным.

Answer 2

Изначально я работал с шаблоном и настраивал его. Это было создано в более ранней версии VS (2015) до обновления до 2019. Таким образом, я обнаружил небольшие различия в соглашениях об именах.

Эта конкретная проблема была связана с функцией Office.initialize в «элементе». и переменные messageBanner. Корректировка этого кода позволяет работать кнопкам. Я подозреваю, что если бы я не создал оригинальный проект в более ранней версии, он, вероятно, работал бы просто отлично.

Оригинальный / оскорбительный код:

    var element = document.querySelector('.ms-MessageBanner');
    messageBanner = new fabric.MessageBanner(element);

Скорректированный / рабочий код:

    var element = document.querySelector('.MessageBanner');
    messageBanner = new components.MessageBanner(element);