侧边栏脚本可保留用户输入，同时也将响应发送到各个页面上的特定单元格

问题描述 投票：0回答：1

学习谷歌应用程序脚本，我陷入困境。我正在尝试结合我在其他帖子中找到的两种解决方案。第一个在这里引用：使用 Apps 脚本属性服务值预填充 Google Sheet 侧边栏，我试图将最后的用户响应保留在侧边栏中。此处引用了第二个：Google Sheets 侧边栏表单，用于将数据传递到特定工作表和特定单元格，我在其中向特定单元格发送响应。我尝试了多种解决方案，但无法让两者一起工作。

Code.gs
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Sidebar')
    .addItem('Show sidebar', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  var userName = Session.getActiveUser().getEmail();
  var scriptProperties = PropertiesService.getScriptProperties();
  const html = HtmlService.createTemplateFromFile('index');
  html.data = {
    'fullName': scriptProperties.getProperty('fullName'),
    'emailAddress': scriptProperties.getProperty('emailAddress'),
    'mobileNumber': scriptProperties.getProperty('mobileNumber'),
    'city': scriptProperties.getProperty('city'),
    'day': scriptProperties.getProperty('weekday'),
    'selectTime': scriptProperties.getProperty('triggerTime')
  };

  var popFullName = scriptProperties.getProperty('fullName');
  var evaluatHTML = html.evaluate().setTitle('Sidebar')
  SpreadsheetApp.getUi().showSidebar(evaluatHTML)
};

function setfullName(fullName) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('fullName', fullName);
};

function setEmailAddress(emailAddress) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('emailAddress', emailAddress);
};

function setMobileNumber(mobileNumber) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('mobileNumber', mobileNumber);
};

function setCity(city) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('city', city);
};

function setday(day) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('weekday', day);
};

function setselectTime(selectTime) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('triggerTime', selectTime);
};

//This section sends responses from the form to each sheet
function appendRowFromFormSubmit(index) {
  let spread = SpreadsheetApp.getActiveSpreadsheet();
  spread.getSheetByName("Sheet1").getRange("B7").setValue(form.fullName); 
  spread.getSheetByName("Sheet2").getRange("A1").setValue(form.emailAddress); 

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <style>
      .form-row {
        margin-bottom: 15px;
      }
    </style>
  </head>
  
  <body>
    <div class="content-body">
      <div class="row">
        <div class="input-field col s12">
          <input id="fullName" type="text" class="validate" />
          <label class="active" for="fullName">Full Name</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <input id="emailAddress" type="text" class="validate" />
          <label for="emailAddress">Email Address</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <input id="mobileNumber" type="number" class="validate" />
          <label for="mobileNumber">Mobile Number</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <input id="city" type="text" class="validate" />
          <label for="city">City</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <select id="day">
            <option value="">Choose</option>
            <option value="MONDAY">MONDAY</option>
            <option value="TUESDAY">TUESDAY</option>
            <option value="WEDNESDAY">WEDNESDAY</option>
            <option value="THURSDAY">THURSDAY</option>
            <option value="FRIDAY">FRIDAY</option>
            <option value="SATURDAY">SATURDAY</option>
            <option value="SUNDAY">SUNDAY</option>
          </select>
          <label>Select Day</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <select id="selectTime">
            <option value="">Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
          </select>
          <label>Select Time</label>
        </div>
      </div>

      <div class="row">
        <button id="btn" class="btn waves-effect waves-light" onclick="setValueToProperties()" type="submit" name="action">Submit</button>
      </div>

      <div class="row">
        <button class="btn waves-effect waves-light" onClick="google.script.host.close()">Close</button>
      </div>
    </div>

    <input id="test1" type="text" class="validate" />


    <script>
      function setValueToProperties() {
        const fullName = document.getElementById("fullName").value;
        google.script.run.setfullName(fullName);

        const emailAddress = document.getElementById("emailAddress").value;
        google.script.run.setEmailAddress(emailAddress);

        const mobileNumber = document.getElementById("mobileNumber").value;
        google.script.run.setMobileNumber(mobileNumber);

        const city = document.getElementById("city").value;
        google.script.run.setCity(city);

        const day = document.getElementById("day").value;
        google.script.run.setday(day);

        const selectTime = document.getElementById("selectTime").value;
        google.script.run.setselectTime(selectTime);
      }
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var elems = document.querySelectorAll("select");
        var instances = M.FormSelect.init(elems);
      });
    </script>

    <script>
      var data = JSON.parse("<?=JSON.stringify(data)?>");
    </script>

    <script>
      $(document).ready(function(){
        const keys = ["fullName", "emailAddress", "mobileNumber", "city", "day", "selectTime"];
        $.each(keys, function(index, item){
          $("#"+item).val(data[item]);       
        });
      });
    </script>

<script>
     function submitForm(index) {
       google.script.run.appendRowFromFormSubmit(document.getElementById("test1"));
     }
   </script>    

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>
google-apps-script sidebar
1个回答
0
投票

我相信您的目标如下。

  • 你有一个侧边栏。
  • 当您打开侧边栏时，您希望将最新的项目加载到每个输入标签。
  • 单击“提交”按钮后，您要将“fullName”和“emailAddress”的值分别放入“Sheet1”的“B7”单元格和“Sheet2”的“A1”单元格中。

当我看到你的显示脚本时，Javascript中的

submitForm
没有被使用。而且，我认为 
PropertiesService
可以通过将值包含在对象中来使用一次。当这些反映在你的脚本中时，下面的修改如何？

Google Apps 脚本：

请按如下方式修改您的 Google Apps 脚本。

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Sidebar').addItem('Show sidebar', 'showSidebar').addToUi();
}

function showSidebar() {
  const html = HtmlService.createTemplateFromFile('index');
  const scriptProperties = PropertiesService.getScriptProperties();
  const str = scriptProperties.getProperty("obj");
  html.data = str || "{}";
  const evaluatHTML = html.evaluate().setTitle('Sidebar');
  SpreadsheetApp.getUi().showSidebar(evaluatHTML);
}

function setObj(obj) {
  PropertiesService.getScriptProperties().setProperty('obj', JSON.stringify(obj));
  const spread = SpreadsheetApp.getActiveSpreadsheet();
  spread.getSheetByName("Sheet1").getRange("B7").setValue(obj.fullName);
  spread.getSheetByName("Sheet2").getRange("A1").setValue(obj.emailAddress);
}

HTML 和 JavaScript：

请按如下方式修改您的 HTML 和 Javascript。我没有修改你的 HTML 部分。我只修改了Javascript。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <style>
      .form-row {
        margin-bottom: 15px;
      }
    </style>
  </head>
  
  <body>
    <div class="content-body">
      <div class="row">
        <div class="input-field col s12">
          <input id="fullName" type="text" class="validate" />
          <label class="active" for="fullName">Full Name</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <input id="emailAddress" type="text" class="validate" />
          <label for="emailAddress">Email Address</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <input id="mobileNumber" type="number" class="validate" />
          <label for="mobileNumber">Mobile Number</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <input id="city" type="text" class="validate" />
          <label for="city">City</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <select id="day">
            <option value="">Choose</option>
            <option value="MONDAY">MONDAY</option>
            <option value="TUESDAY">TUESDAY</option>
            <option value="WEDNESDAY">WEDNESDAY</option>
            <option value="THURSDAY">THURSDAY</option>
            <option value="FRIDAY">FRIDAY</option>
            <option value="SATURDAY">SATURDAY</option>
            <option value="SUNDAY">SUNDAY</option>
          </select>
          <label>Select Day</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <select id="selectTime">
            <option value="">Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
          </select>
          <label>Select Time</label>
        </div>
      </div>

      <div class="row">
        <button id="btn" class="btn waves-effect waves-light" onclick="setValueToProperties()" type="submit" name="action">Submit</button>
      </div>

      <div class="row">
        <button class="btn waves-effect waves-light" onClick="google.script.host.close()">Close</button>
      </div>
    </div>

    <input id="test1" type="text" class="validate" />

    <script>
      const keys = ["fullName", "emailAddress", "mobileNumber", "city", "day", "selectTime"];

      document.addEventListener("DOMContentLoaded", function () {
        var elems = document.querySelectorAll("select");
        var instances = M.FormSelect.init(elems);
      });

      $(document).ready(function(){
        const data = <?!= data ?>;
        $.each(keys, function(index, item){
          $("#"+item).val(data[item]);
        });
      });

      function setValueToProperties() {
        const obj = keys.reduce((o, e) => (o[e] = document.getElementById(e).value, o), {});
        google.script.run.setObj(obj);
      }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>
  • 打开侧边栏后，在输入标签中输入值，然后单击“提交”按钮，这些值将被放入PropertiesService中，并将“fullName”和“emailAddress”的值放入“Sheet1”和“A1”的单元格“B7”和“A1”中分别是“Sheet2”的“。当您重新打开侧边栏时，最新值将加载到输入标签中。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.