te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>Using a passed parameter in an HTML to call a google function - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Using a passed parameter in an HTML to call a google function - Stack Overflow

programmeradmin1浏览0评论

I am using Google Apps Scripts from a DOC. The function test3 calls the HTML function MultiSelect. I am trying to use the 'role' from the MultiSelect to call the function getItems(role). In the HTML I successfully parse the parameters from 'data' and displaying them using an 'alert'. I am failing miserably in trying how to use the parsed parameter 'role' to make the call to getItems from HTML. I have tried: role, $role, {{role}}, ${{role}}, ${role}, {{$role}}. Any help would be appreciated!!

function test3() {
  var role = "EventProducer";
  var row = 2;
  var col = 3;
  var html = HtmlService.createHtmlOutputFromFile('MultiSelect')
      .setTitle('Select the Team Members for this Event')
      .setWidth(300);
  var data = { role: role, row: row, col: col };
  var idData = "SelectMember_htmlservice";
  var strAppend = "<div id='" + idData + "' style='display:none;'>" + Utilities.base64Encode(JSON.stringify(data)) + "</div>";
  html.append(strAppend);
  DocumentApp.getUi().showSidebar(html);
}

function getItems(role) {
  var items = getDropdownOptions(role);
  return items;
}

function writeToPEO(selectedItems) {
  var sheet = DocumentApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  cell.setValue(selectedItems.join(", ")); // Join array items with comma and space
}

The HTML is:

<!DOCTYPE html>
<script>    
    function getDataFromHtml(idData) {
      if (!idData)
          idData = "SelectMember_htmlservice";
      var dataEncoded = document.getElementById(idData).innerHTML;
      var data = JSON.parse(atob(dataEncoded));
      //alert("1=>"+data.role+"  "+data.row+"  "+data.col);
      return data;
    }

    function initialize() {
      var data = getDataFromHtml();
      //alert("2=>"+data.role+"  "+data.row+"  "+data.col);
      document.getElementById('role').innerText = data.role;
      document.getElementById('row').innerText = data.row;
      document.getElementById('col').innerText = data.col;

      //alert("In initialize:  "+'role'+"::"+'row'+"::"+'col');
    }

    window.onload = initialize;
</script>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <H2 id="role"></H2>
    <H2 id="row"></H2>
    <H2 id="col"></H2>
    <div id="checkboxes"></div>
    <br>
    <button onclick="submit()">Submit}</button>
    <script>
      // Load items from the server-side function getItems
      google.script.run.withSuccessHandler(function(items) {
        var container = document.getElementById('checkboxes');
        items.forEach(function(item) {
          var checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.id = item;
          checkbox.value = item;
          
          var label = document.createElement('label');
          label.htmlFor = item;
          label.appendChild(document.createTextNode(item));
          
          container.appendChild(checkbox);
          container.appendChild(label);
          container.appendChild(document.createElement('br'));
        });
      }).getItems().'role';//<== This is where I want to pass the value contained in 'role'
      
      function submit() {
        var selectedItems = [];
        var checkboxes = document.getElementById('checkboxes').querySelectorAll('input[type=checkbox]:checked');
        checkboxes.forEach(function(checkbox) {
          selectedItems.push(checkbox.value);
        });
        
        // Write the selected items back to the document
        //google.script.run.writeToSheet(selectedItems);
        
        // Optionally close the sidebar
        google.script.host.close();
      }
    </script>
  </body>
</html>

I am using Google Apps Scripts from a DOC. The function test3 calls the HTML function MultiSelect. I am trying to use the 'role' from the MultiSelect to call the function getItems(role). In the HTML I successfully parse the parameters from 'data' and displaying them using an 'alert'. I am failing miserably in trying how to use the parsed parameter 'role' to make the call to getItems from HTML. I have tried: role, $role, {{role}}, ${{role}}, ${role}, {{$role}}. Any help would be appreciated!!

function test3() {
  var role = "EventProducer";
  var row = 2;
  var col = 3;
  var html = HtmlService.createHtmlOutputFromFile('MultiSelect')
      .setTitle('Select the Team Members for this Event')
      .setWidth(300);
  var data = { role: role, row: row, col: col };
  var idData = "SelectMember_htmlservice";
  var strAppend = "<div id='" + idData + "' style='display:none;'>" + Utilities.base64Encode(JSON.stringify(data)) + "</div>";
  html.append(strAppend);
  DocumentApp.getUi().showSidebar(html);
}

function getItems(role) {
  var items = getDropdownOptions(role);
  return items;
}

function writeToPEO(selectedItems) {
  var sheet = DocumentApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  cell.setValue(selectedItems.join(", ")); // Join array items with comma and space
}

The HTML is:

<!DOCTYPE html>
<script>    
    function getDataFromHtml(idData) {
      if (!idData)
          idData = "SelectMember_htmlservice";
      var dataEncoded = document.getElementById(idData).innerHTML;
      var data = JSON.parse(atob(dataEncoded));
      //alert("1=>"+data.role+"  "+data.row+"  "+data.col);
      return data;
    }

    function initialize() {
      var data = getDataFromHtml();
      //alert("2=>"+data.role+"  "+data.row+"  "+data.col);
      document.getElementById('role').innerText = data.role;
      document.getElementById('row').innerText = data.row;
      document.getElementById('col').innerText = data.col;

      //alert("In initialize:  "+'role'+"::"+'row'+"::"+'col');
    }

    window.onload = initialize;
</script>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <H2 id="role"></H2>
    <H2 id="row"></H2>
    <H2 id="col"></H2>
    <div id="checkboxes"></div>
    <br>
    <button onclick="submit()">Submit}</button>
    <script>
      // Load items from the server-side function getItems
      google.script.run.withSuccessHandler(function(items) {
        var container = document.getElementById('checkboxes');
        items.forEach(function(item) {
          var checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.id = item;
          checkbox.value = item;
          
          var label = document.createElement('label');
          label.htmlFor = item;
          label.appendChild(document.createTextNode(item));
          
          container.appendChild(checkbox);
          container.appendChild(label);
          container.appendChild(document.createElement('br'));
        });
      }).getItems().'role';//<== This is where I want to pass the value contained in 'role'
      
      function submit() {
        var selectedItems = [];
        var checkboxes = document.getElementById('checkboxes').querySelectorAll('input[type=checkbox]:checked');
        checkboxes.forEach(function(checkbox) {
          selectedItems.push(checkbox.value);
        });
        
        // Write the selected items back to the document
        //google.script.run.writeToSheet(selectedItems);
        
        // Optionally close the sidebar
        google.script.host.close();
      }
    </script>
  </body>
</html>
Share Improve this question edited 2 days ago Wicket 38.3k9 gold badges77 silver badges192 bronze badges asked Feb 17 at 17:25 Ira KirschnerIra Kirschner 514 bronze badges 10
  • Can you give samples of your SelectMember_htmlservice so we could check what data your're sending? – Lime Husky Commented Feb 17 at 17:36
  • Please make a minimal reproducible example that can be copy/paste/run without changes to illustrate the issue. – Lime Husky Commented Feb 17 at 17:38
  • You might wish to try an html validator. You may find some inconsistencies in running google.script.run.getItems() before hmtl is loaded – Cooper Commented Feb 17 at 17:41
  • Have you tried adding the .evaluate() method in your HTML? – Lime Husky Commented Feb 17 at 17:43
  • I’m voting to close this question because the HTML code structure is wrong. There should not be any HTML tag outside of the HTML tag. In this case, the first script tag is outside the HTML tag. Please spend some time learning the basics of HTML5. – Wicket Commented 2 days ago
 |  Show 5 more comments

1 Answer 1

Reset to default 1

Just move the server call to the initialize function and pass it directly:

function initialize() {
  const data = getDataFromHtml();
  //.... 
  //....
  google.script.run.withSuccessHandler(/*the full handler function...*/).getItems(data.role);
}      
发布评论

评论列表(0)

  1. 暂无评论