Как вызвать функцию в сайдбаре google таблицы?

Question

[Владимир Зуев]

Здравствуйте.
Для отладки кода надо вызвать функцию из index.html и фрейма picker.html.
Пытался вызывать функцию createModel() через такой код из файла скриптов

function runCreateModel(){
createModel()
};

Неудачно.
Пытался таким способом вызвать функцию из фрейма picker.html.

function runCreateModel(){
//createModel()
document.getElementById("iframe").contentWindow.createModel();
};

Опять неудачно. Прошу помощи. Как правильно вызвать функцию в файле скриптов из index.html и фрейма picker.html?

Answer 1

[Владимир Зуев]

А как по загрузке вызвать функцию. Можно пример.

Comments

[mityayka1]

Document.onload = () => {
google.script.run.functionFromGas()
}

Могу ошибиться с телефона

[Владимир Зуев]

А где надо разместить эти строки? В каком файле?

[mityayka1]

Владимир Зуев, в html, в скрипте

[Владимир Зуев]

mityayka1, functionFromGas() это функция которая находиться в файле html. Я правильно понял. И её я могу вызвать в файле gs.

[mityayka1]

Владимир Зуев, да. А вызвать Вы её можете, открывая html

[Владимир Зуев]

mityayka1, Из функции showSidebar я могу открыть index.html. А как открыть функцию, которая находиться в этом файле? Вставить код

Document.onload = () => {
google.script.run.functionFromGas()
}

в коде

function sidebar(){
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService
    .createTemplateFromFile("index")
    .evaluate();
  html.setTitle("Коэффициенты по цвету текста");

  ui.showSidebar(html);
};

После строки
html.setTitle("Коэффициенты по цвету текста");
Только не понятна строка
google.script.run.
Она применяется для запуска функции из файла gs. А здесь применяю для запуска функции из файла html.
На строке
Document.onload = () => {
У меня программа вылетает. Что делать?

[Владимир Зуев]

Пишет

Ошибка	ReferenceError: Document is not defined
    at sidebar(Code:22:3)
    at runCreateModel(Code:2:3)

Что делать?

[mityayka1]

Код выполняется либо на стороне клиента (в Вашем случае это файл html) для этого его нужно открыть, либо на стороне сервера.
Что мешает запустить функцию сразу на сервере (в файле.gs скрипта)?
Вы делаете что-то изначально непонятное и неправильное.

[Владимир Зуев]

mityayka1, Я же поэтому и задал вопрос как вызвать функцию в сайдбаре google таблицы? Я не знаю как вызвать функцию из html в файле gs. Вы писали что можно попробовать при загрузке html. Я как понял так и попробовал. Но видимо я что то не правильно понял. Поэтому и спрашиваю. Как запустить функцию сразу на сервере (в файле.gs скрипта) функцию лежащую в html?

[mityayka1]

Я предложил костыль, он не сработает потому что onload это событие загрузки документа.
Чтобы запустить функцию из html - ее нужно перенести в файл скрипта и запустить.

[Владимир Зуев]

mityayka1, А как этой функции выполнять свои методы из файла gs. Допустим создать новый элемент в файле html.
Привожу код

function createModel(){
 //debugger;
     const models = document.getElementById("parent");     
     let col_value = document.getElementById("color-result-nameID").textContent;
     let col_text = document.getElementById("color-result-text_col").textContent;
     let profit_ratio = document.getElementById("profit_ratio").value;
     let manager_ratio = document.getElementById("manager_ratio").value;
     let ad_ratio = document.getElementById("ad_ratio").value;
     let n = document.getElementById("color-result-divn").textContent;
     document.getElementById("color-result-divn").textContent = n+1;
    
       const model = `
       <div id = "child"; class="child-${n+1}">
         <div   class="child-1"  style="background: ${col_value}">
            <p class="collor-text"   style="color: ${col_text}" >Цвет текста<span class="letter" onclick="closeDiv(this.closest('[id^=child]'))">&#215</span></p>
         </div>
         <p style="color: ${col_value}">Кф. прибыли
            <p class="color-kf">${profit_ratio}</p></p>
         <p style="color: ${col_value}">Кф.менеджера</p>
         <p class="color-kf">${manager_ratio}</p></p>
         <p style="color: ${col_value}">Кф. рекламы</p>
         <p class="color-kf">${ad_ratio}</p></p>
      </div>
       `;
    models.insertAdjacentHTML('afterbegin', model);
   };

Мне нужно запустить функцию в редакторе кода. Чтобы я мог пошагово отработать её в редакторе кода. И найти ошибки которые она делает.

[mityayka1]

Владимир Зуев, запустите на клиенте (в браузере) и пользуйтесь отладчиком в браузере

[Владимир Зуев]

Спасибо. Только я так и не получил ответа на вопрос. Как найти userCodeAppPanel? Задавал я его раньше. Ошибки приходят такого вида в браузере

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.model (userCodeAppPanel:7)
model @ userCodeAppPanel:7

И где она эта userCodeAppPanel? Какая строка? Как можно пользоваться таким отладчиком если не знаешь где произошла ошибка? Только узнаёшь что где то есть ошибка. А если код на 1000 строк. Как найти ошибку. Вот сегодня с утра копирую одну функцию в index, html и вставляю её в picker.html.Перестаёт работать код, который до этого работал. Удалил эту функцию - опять код заработал. Как понять в чём причина такой ошибки? Поэтому и хотелось бы отлаживать программы в редакторе кода. Там всё таки проще искать ошибки.

[mityayka1]

Владимир Зуев, тяжело ответить на Ваш вопрос не видя всего проекта целиком. Консоль в браузере служит как раз для того, чтобы производить отладку кода как работа с DOM, что именно Ваш случай.

Answer 2

[mityayka1]

Вы можете вызывать функции GAS из в скриптах html шаблона с помощью google.script.run
Из GAS вызвать функцию не получится. Разве что по событию document.onload