2023年5月17日 07:13:13go评论54阅读模式

英文:

How to open a sidebar with data from a sheet, passing a variable from server to client-side in Google Apps Script?

问题

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <?!= HtmlService.createHtmlOutputFromFile('Client_side_Functions').getContent(); ?>
</head>

<body>
  <h1>Importer Data</h1>
  <div id="importerData"></div>
</body>

</html>

<script>
var importer = <?= JSON.stringify(importer) ?>;
function displayImporterData(importer) {
  google.script.run.withSuccessHandler(function(data){
    var importerDataDiv = document.getElementById("importerData");
    if (importerData && importerData.length > 0) {
      var table = document.createElement("table");
      var thead = document.createElement("thead");
      var tbody = document.createElement("tbody");
      // Table headers
      var headerRow = document.createElement("tr");
      var headers = ["Exportador", "Items", "Peso Bruto (Kg)", "Data"];
      headers.forEach(function(header) {
        var th = document.createElement("th");
        th.textContent = header;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
      table.appendChild(thead);

      // Table body - importer data
      importerData.forEach(function(rowData) {
        var row = document.createElement("tr");
        rowData.forEach(function(cellData) {
          var td = document.createElement("td");
          td.textContent = cellData;
          row.appendChild(td);
        });
        tbody.appendChild(row);
      });
      table.appendChild(tbody);

      importerDataDiv.appendChild(table);
    } else {
      importerDataDiv.textContent = "No importer data found.";
    }
  }).getImports(importer);
}
</script>

function openSideBar() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const painelSht = ss.getSheetByName('Painel');
  const importer = painelSht.getRange(row, 1).getValue();
  const js = 'Client_side_Functions';
  const html2 = HtmlService.createTemplateFromFile(js);
  html2.importer = JSON.stringify(importer);
  const html2Content = html2.evaluate().getContent();
  const htmlWindow = HtmlService.createTemplateFromFile("Sidebar");
  htmlWindow[js] = html2Content;
  const sidebarHtml = htmlWindow.evaluate().getContent();
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(sidebarHtml));
}

function getImports(importer) {
  const exportsFileId = 'fileID';
  const exportsFile = SpreadsheetApp.openById(exportsFileId);
  const exportsSht = exportsFile.getSheetByName('Sheet1');
  const exportsData = exportsSht.getDataRange().getValues().filter(e => e[1].indexOf(importer) !== -1);
  return exportsData;
}

英文:

The page is to be open and a function should build a table with the data obtained from a sheet. The variable value doesn't seem to get through, nor does this give me any error:

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;base target=&quot;_top&quot;&gt;
 &lt;?!= HtmlService.createHtmlOutputFromFile(&#39;Client_side_Functions&#39;).getContent(); ?&gt;
  &lt;!-- &lt;?!= &#39;Client_side_Functions&#39; ?&gt; --&gt;
 &lt;!-- &lt;?!= Client_side_Functions ?&gt; --&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Importer Data&lt;/h1&gt;
  &lt;div id=&quot;importerData&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

&lt;script&gt;
var importer = &lt;?= JSON.stringify(importer) ?&gt;;
function displayImporterData(importer) {
  google.script.run.withSuccessHandler(function(data){
  var importerDataDiv = document.getElementById(&quot;importerData&quot;);
   if (importerData &amp;&amp; importerData.length &gt; 0) {
    var table = document.createElement(&quot;table&quot;);
    var thead = document.createElement(&quot;thead&quot;);
    var tbody = document.createElement(&quot;tbody&quot;);
    // Table headers
    var headerRow = document.createElement(&quot;tr&quot;);
    var headers = [&quot;Exportador&quot;, &quot;Items&quot;, &quot;Peso Bruto (Kg)&quot;, &quot;Data&quot;];
    headers.forEach(function(header) {
      var th = document.createElement(&quot;th&quot;);
      th.textContent = header;
      headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);

    //Table body - importer data
    importerData.forEach(function(rowData) {
      var row = document.createElement(&quot;tr&quot;);
      rowData.forEach(function(cellData) {
        var td = document.createElement(&quot;td&quot;);
        td.textContent = cellData;
        row.appendChild(td);
      });
      tbody.appendChild(row);
    });
    table.appendChild(tbody);

    importerDataDiv.appendChild(table);
  } else {
    importerDataDiv.textContent = &quot;No importer data found.&quot;;
  }
  }).getImports(importer);
}
&lt;/script&gt;

function openSideBar() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const painelSht = ss.getSheetByName(&#39;Painel&#39;);
  const importer = painelSht.getRange(row, 1).getValue();
  const js = &#39;Client_side_Functions&#39;;
  const html2 = HtmlService.createTemplateFromFile(js);
  html2.importer = JSON.stringify(importer);
  const html2Content = html2.evaluate().getContent();
  const htmlWindow = HtmlService.createTemplateFromFile(&quot;Sidebar&quot;);
  htmlWindow[js] = html2Content;
  const sidebarHtml = htmlWindow.evaluate().getContent();
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(sidebarHtml));
}


function getImports(importer) {
  const exportsFileId = &#39;fileID&#39;;
  const exportsFile = SpreadsheetApp.openById(exportsFileId);
  const exportsSht = exportsFile.getSheetByName(&#39;Sheet1&#39;);
  const exportsData = exportsSht.getDataRange().getValues().filter(e =&gt; e[1].indexOf(importer) !== -1);
  return exportsData;
}

答案1

得分: 2

以下是您要翻译的内容：

Modification points:

In your HTML template, Client_side_Functions is not used from htmlWindow[js] = html2Content; of Google Apps Script side.
In your Javascript, displayImporterData is not run.
data is not used.

When these points are reflected in your script, how about the following simple modification? I thought that in this case, your Google Apps Script can be used.

`Sidebar.html`:

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;base target=&quot;_top&quot;&gt;
  &lt;?!= Client_side_Functions ?&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Importer Data&lt;/h1&gt;
  &lt;div id=&quot;importerData&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

`Client_side_Functions.html`:

&lt;script&gt;
var importer = &lt;?!= importer ?&gt;;
function displayImporterData(importer) {
  google.script.run.withSuccessHandler(function (importerData) {
    var importerDataDiv = document.getElementById(&quot;importerData&quot;);
    if (importerData &amp;&amp; importerData.length &gt; 0) {
      var table = document.createElement(&quot;table&quot;);
      var thead = document.createElement(&quot;thead&quot;);
      var tbody = document.createElement(&quot;tbody&quot;);
      // Table headers
      var headerRow = document.createElement(&quot;tr&quot;);
      var headers = [&quot;Exporter&quot;, &quot;Items&quot;, &quot;Gross Weight (Kg)&quot;, &quot;Date&quot;];
      headers.forEach(function (header) {
        var th = document.createElement(&quot;th&quot;);
        th.textContent = header;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
      table.appendChild(thead);

      //Table body - importer data
      importerData.forEach(function (rowData) {
        var row = document.createElement(&quot;tr&quot;);
        rowData.forEach(function (cellData) {
          var td = document.createElement(&quot;td&quot;);
          td.textContent = cellData;
          row.appendChild(td);
        });
        tbody.appendChild(row);
      });
      table.appendChild(tbody);

      importerDataDiv.appendChild(table);
    } else {
      importerDataDiv.textContent = &quot;No importer data found.&quot;;
    }
  }).getImports(importer);
}
displayImporterData(importer);
&lt;/script&gt;

Reference:

HTML Service: Templated HTML

英文:

Modification points:

In your HTML template, Client_side_Functions is not used from htmlWindow[js] = html2Content; of Google Apps Script side.
In your Javascript, displayImporterData is not run.
data is not used.

When these points are reflected in your script, how about the following simple modification? I thought that in this case, your Google Apps Script can be used.

`Sidebar.html`:

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;base target=&quot;_top&quot;&gt;
  &lt;?!= Client_side_Functions ?&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Importer Data&lt;/h1&gt;
  &lt;div id=&quot;importerData&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

`Client_side_Functions.html`:

&lt;script&gt;
var importer = &lt;?!= importer ?&gt;;
function displayImporterData(importer) {
  google.script.run.withSuccessHandler(function (importerData) {
    var importerDataDiv = document.getElementById(&quot;importerData&quot;);
    if (importerData &amp;&amp; importerData.length &gt; 0) {
      var table = document.createElement(&quot;table&quot;);
      var thead = document.createElement(&quot;thead&quot;);
      var tbody = document.createElement(&quot;tbody&quot;);
      // Table headers
      var headerRow = document.createElement(&quot;tr&quot;);
      var headers = [&quot;Exportador&quot;, &quot;Items&quot;, &quot;Peso Bruto (Kg)&quot;, &quot;Data&quot;];
      headers.forEach(function (header) {
        var th = document.createElement(&quot;th&quot;);
        th.textContent = header;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
      table.appendChild(thead);

      //Table body - importer data
      importerData.forEach(function (rowData) {
        var row = document.createElement(&quot;tr&quot;);
        rowData.forEach(function (cellData) {
          var td = document.createElement(&quot;td&quot;);
          td.textContent = cellData;
          row.appendChild(td);
        });
        tbody.appendChild(row);
      });
      table.appendChild(tbody);

      importerDataDiv.appendChild(table);
    } else {
      importerDataDiv.textContent = &quot;No importer data found.&quot;;
    }
  }).getImports(importer);
}
displayImporterData(importer);
&lt;/script&gt;

Reference:

HTML Service: Templated HTML

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

How to open a sidebar with data from a sheet, passing a variable from server to client-side in Google Apps Script?

问题

答案1

Modification points:

`Sidebar.html`:

`Client_side_Functions.html`:

Reference:

Modification points:

`Sidebar.html`:

`Client_side_Functions.html`:

Reference:

Android Studio，使用Firebase实时数据库和存储，如何重新排列列表。

下拉菜单不显示，如何修复？

UPDATE: 在同一工作表中使用下拉菜单隐藏命名范围（列）

无法删除消息时指定的无效用户ID。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论

问题

答案1

Modification points:

Sidebar.html:

Client_side_Functions.html:

Reference:

Modification points:

Sidebar.html:

Client_side_Functions.html:

Reference:

发表评论

`Sidebar.html`:

`Client_side_Functions.html`:

`Sidebar.html`:

`Client_side_Functions.html`: