Вытягивание данных строки на боковую панель Google Sheets с последующей заменой новых введенных данных в исходную выбранную строку

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

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

SideBar Code.gs

//CREATE CUSTOM MENU
function onOpen() { 
  var ui = SpreadsheetApp.getUi();
  ui.createMenu("User Input SideBar Menu")
    .addItem("Constr.Sidebar Form","showFormInSidebar")
    
    .addToUi();
}
 function onSelectionChange(e) {
  
  // const range = e.range;
  // var row = range.getActiveRowIndex();
  // var address = getRange(row,1).getValues();
  // var pco = getRange(row,26).getValues();
  // var psi = getRange(row,27).getValues();
  // var pdi = getRange(row,40).getValues();
  // var pdo = getRange(row,41).getValues();
  // var qa_inspection = getRange(row,63).getValues();
  // var qa_bonus = getRange(row,64).getValues();
  // var qai_super = getRange(row,65).getValues();
  // var qa_cert = getRange(row,66).getValues();
  // var qac_bonus = getRange(row,67).getValues();

  // document.getElementById('PCO').value = pco;
  // document.getElementById('PSI').value = psi;
  // document.getElementById('PDI').value = pdi;
  // document.getElementById('PDO').value = pdo;
  // document.getElementById('QAInspectDate').value = qa_inspection;
  // document.getElementById('QAOTBONUS').value = qa_bonus;
  // document.getElementById('QAISuper').value = qai_super;
  // document.getElementById('QACertDate').value = qa_cert;
  // document.getElementById('QACBonus').value = qac_bonus;

getValuesOfActiveRow();
document.getElementById('PCO').setValue(vs[0]);
}
//OPEN THE FORM IN SIDEBAR 
function showFormInSidebar(vs) {      
  var form = HtmlService.createTemplateFromFile('Index').evaluate().setTitle( 'Details');
  SpreadsheetApp.getUi().showSidebar(form);
}

//PROCESS FORM
function processForm(formObject){ 
  var sheet = SpreadsheetApp.getActiveSheet();
  // Logger.log([formObject.first_name]);
  sheet.appendRow([
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
    formObject.SPACE,
                formObject.PCO,
                formObject.PSI,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.PDI,
                formObject.PDO,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                formObject.SPACE,
                
                formObject.QAInspectDate,
                formObject.QAOTBONUS,
                formObject.QAISuper,
                formObject.QACertDate,
                formObject.QACBonus
                
                //Add your new field names here
                ])
               ;
}

//INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// new code
function getValuesOfActiveRow() {
  var ss = SpreadsheetApp.getActive();
  var sh = ss.getSheetByName('LC 2022V2');
  let vs = sh.getRange(sh.getActiveRange().getRow(),1,1,sh.getLastColumn()).getValues().map(r => [r[0], r[25], r[26], r[48], r[49], r[88], r[89], r[90], r[91], r[92]]);
  Logger.log(vs);
  return vs[0];
  
  
}

function saveValuesActiveRow(formObject) {
  //Logger.log(form);
  var ss = SpreadsheetApp.getActive();
  var sh = ss.getSheetByName('LC 2022V2');
  //sh.getRange(sh.getCurrentCell().getRow(), 1, 1, sh.getLastColumn()).setValues([[form.PCO,form.PSI,form.PDI,form.PDO,form.QAInspectDate,form.QAOTBONUS,form.QAISuper,form.QACertDate,form.QACBonus]])
sh.getRange(sh.getCurrentCell().getRow(),26).setValues(formObject.PCO);

}

Индекс.html

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=yes">
    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous">
    <?!= include('JavaScript'); ?> <!-- See JavaScript.html file -->
    <title>Contact Details</title>
  </head>
  
  <body class = "bg-secondary text-light">
    <div class = "container">
      <?!= include('Form'); ?> <!-- See Form.html file -->
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous"></script>
  </body>
</html>

JavaScript.html

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    //google.script.run.processForm(formObject);
    google.script.run.saveValuesActiveRow(formObject);
    document.getElementById("myForm").reset();
  }
</script>

Form.htm

    <form id = "myForm" onsubmit = "handleFormSubmit(this)">
      <div class = "form-group">
        <label for = "PCO">PCO</label>
        <input class = "form-control form-control-sm" type = "text" class = "form-control" id = "PCO" name = "PCO" placeholder = "PCO" value = "<?= row[0] ?>"/>
      </div>
      <div class = "form-group">
        <label for = "PSI">PSI</label>
        <input class = "form-control form-control-sm" type = "text" class = "form-control" id = "PSI" name = "PSI" placeholder = "PSI" value = "<?= row[1] ?>"/>
      </div>
      <div class = "form-group">
        <label for = "PDI">PDI</label>
        <input class = "form-control form-control-sm" type = "text" class = "form-control" id = "PDI" name = "PDI" placeholder = "PDI" value = "<?= row[2] ?>"/>
      </div>
      <div class = "form-group">
        <label for = "PDO">PDO</label>
        <input class = "form-control form-control-sm" type = "text" class = "form-control" id = "PDO" name = "PDO" placeholder = "PDO" value = "<?= row[3] ?>"/>
      </div>
      <div class = "form-group">
        <label for = "QAInspectDate">QA Inspection Date</label>
        <input class = "form-control form-control-sm" type = "date" class = "form-control" id = "QAInspectDate" name = "QAInspectDate" placeholder = "QAInspectDate" value = "<?= row[4] ?>"/>
      </div>
      <div class = "form-group">
        <label for = "QAOTBONUS">QA OT BONUS</label>
        <select class = "form-control form-control-sm" id = "QAOTBONUS" name = "QAOTBONUS" value = "<?= row[5] ?>"/>
          <option value = "" selected>Choose...</option>
          <option value = "Fail1st">Fail 1st</option>
          <option value = "Fail2nd">Fail 2nd</option>
          <option value = "Fail3rd">Fail 3rd</option>
          <option value = "Pass1st">Pass 1st</option>
          <option value = "Pass2nd">Pass 2nd</option>
          <option value = "Pass3rd">Pass 3rd</option>
        </select>
      </div>
       <div class = "form-group">
        <label for = "QAISuper">QAI Super</label>
        <input class = "form-control form-control-sm" type = "text" class = "form-control" id = "QAISuper" name = "QAISuper" placeholder = "QAISuper" value = "<?= row[6] ?>"/>
      </div> 
      <div class = "form-group">
        <label for = "QACertDate">QA Cert Date</label>
        <input class = "form-control form-control-sm" type = "date" class = "form-control" id = "QACertDate" name = "QACertDate" placeholder = "QACertDate" value = "<?= row[7] ?>"/>
      </div>
      <div class = "form-group">
        <label for = "QACBonus">QAC Bonus</label>
        <input class = "form-control form-control-sm" type = "text" class = "form-control" id = "QACBonus" name = "QACBonus" placeholder = "QACBonus" value = "<?= row[8] ?>"/>
      </div> 
       <button type = "submit" class = "btn btn-primary">Submit</button>
    </form>

Ваш сценарий слишком сложен для расшифровки, но если вы извлекаете объекты даты из листа электронной таблицы, они не будут перенесены на вашу боковую панель. Вам нужно отформатировать даты как строку. Сначала попробуйте это, чтобы убедиться, что вы получаете их на свою боковую панель.

TheWizEd 05.04.2022 20:42

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

Anarchyz 05.04.2022 23:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Описание

Я думаю, что сложность в вашем сценарии заключается в том, что ваша электронная таблица настолько длинная (< 50 столбцов), что вам трудно редактировать определенные столбцы. Поэтому вместо этого вам нужен диалог со значениями столбцов, которые вам обычно приходится редактировать в более сжатой форме.

Вот пример использования HTMLTemplate для получения значений выбранной строки в пользовательском диалоговом окне, редактирования значений и возврата новых значений в электронную таблицу.

Я использую событие mouseenter, чтобы определить, покидает ли пользователь боковую панель, чтобы выбрать новую строку, и возвращается на боковую панель, и обновляет значения из выбранной строки.

Вот мой тестовый лист с боковой панелью перед изменением каких-либо значений. Измените значение и нажмите кнопку отправки, чтобы посмотреть, что произойдет.

Код.gs

function onOpen(e) {
  let ui = SpreadsheetApp.getUi();
  let menu = ui.createMenu("Test");
  menu.addItem("Show SideBar","showSideBar");
  menu.addToUi();
}

function showSideBar() {
  try {
    let html = HtmlService.createTemplateFromFile("HTML_SideBar");
    html.data = getSelectedRow();
    html = html.evaluate();
    SpreadsheetApp.getUi().showSidebar(html);
  }
  catch(err) {
    SpreadsheetApp.getUi().alert(err);
  }
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function getSelectedRow() {
  let cell = SpreadsheetApp.getCurrentCell();
  let sheet = cell.getSheet();
  let row = sheet.getRange(cell.getRow(),1,1,sheet.getLastColumn()).getValues()[0];
  row.forEach( (col,index) => { if ( col instanceof Date ) row[index] = Utilities.formatDate(col,"GMT","MM/dd/yyyy") } );
  return JSON.stringify({ range: cell.getA1Notation(), row: row });
}

function setSelectedRow(row) {
  let cell = SpreadsheetApp.getCurrentCell();
  let sheet = cell.getSheet();
  sheet.getRange(cell.getRow(),1,1,sheet.getLastColumn()).setValues([row]);
}

HTML_Боковая панель.html

<!DOCTYPE html>
<html>
  <head>
    <base target = "_top">
  </head>
  <body>
    <div id = "mainContainer">
      <? var row = JSON.parse(data) ?>
      <label for = "currentRange">Current Range:</label>
      <input id = "currentRange" type = "text" value = "<?= row.range ?>">
      <label for = "column1">Column 1:</label>
      <input id = "column1" type = "text" value = "<?= row.row[0] ?>">
      <label for = "column2">Column 2:</label>
      <input id = "column2" type = "text" value = "<?= row.row[1] ?>">
      <label for = "column3">Column 3:</label>
      <input id = "column3" type = "text" value = "<?= row.row[2] ?>">
      <label for = "column4">Column 4:</label>
      <input id = "column4" type = "text" value = "<?= row.row[3] ?>">
      <label for = "column5">Column 5:</label>
      <input id = "column5" type = "text" value = "<?= row.row[4] ?>">
    </div>
    <input id = "submitButton" type = "button" value = "Submit changes" onclick = "submitOnClick()">
    <?!= include("JS_SideBar"); ?>
  </body>
</html>

JS_SideBar.html

<script>
  function mainContainerMouseEnter() {
    try {
      google.script.run.withSuccessHandler(
        function (row) {
          row = JSON.parse(row);
          document.getElementById("currentRange").value = row.range;
          document.getElementById("column1").value = row.row[0];
          document.getElementById("column2").value = row.row[1];
          document.getElementById("column3").value = row.row[2];
          document.getElementById("column4").value = row.row[3];
          document.getElementById("column5").value = row.row[4];
        }
      ).withFailureHandler(
        function (err) {
          alert(err);
        }
      ).getSelectedRow();
    }
    catch(err) {
      alert("Error in mainContainerMouseEnter: "+err);
    }
  }

  function submitOnClick() {
    try {
      row = [];
      row[0] = document.getElementById("column1").value;
      row[1] = document.getElementById("column2").value;
      row[2] = document.getElementById("column3").value;
      row[3] = document.getElementById("column4").value;
      row[4] = document.getElementById("column5").value;
      google.script.run.withFailureHandler(
        function (err) {
          alert(err);
        }
      ).setSelectedRow(row);
    }
    catch(err) {
      alert("Error in submitOnClick: "+err);
    }
  }

  (function () {
    document.getElementById("mainContainer").addEventListener("mouseenter",mainContainerMouseEnter);
  })();
</script>

Рекомендации

Другие вопросы по теме