时间戳

首页 > 解决方案 > 我正在尝试向我的 google 表格添加一些脚本在侧边栏中显示各种 gif

google-apps-script - 我正在尝试向我的 google 表格添加一些脚本在侧边栏中显示各种 gif

问题描述

我想根据工作表中单元格的值显示具有不同 gif（总共 7 个）的不同 html 页面。当我的学生扫描他们的二维码（以记录他们的出勤率）时，一个特定的单元格介于 1-15 之间，我想让该数字在侧边栏中调用不同的 gif。我能够显示带有 gif 的侧边栏，但我不知道如何根据单元格中的值更改 html 页面。到目前为止，我有 2 个带有不同 gif 的 html 页面，但我计划有 7 个并使用嵌套的 if 语句来调用不同的页面。我将下面的脚本作为 javascript 包含在内，因为我看不到 google 应用程序脚本选项。任何帮助将不胜感激。谢谢。

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar () {
 var htmlA = HtmlService.createHtmlOutputFromFile('tomato')
 var htmlB = HtmlService.createHtmlOutputFromFile('cucumber')
      .setTitle('My custom sidebar')
      .setWidth(200);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
var cellValueRange = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').getRange("H2"); 
var cellValue = cellValueRange.getValue();
if(cellValue = 1){
.showSidebar(htmlA);}
else if(cellValue = 2){
.showSidebar(htmlB);}
     
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
 <img src="https://media.giphy.com/media/kDwLZpqtiTObyo4qc8/giphy.gif"> <input type="button" value="Close" onclick="google.script.host.close()" />

<style> 

body{
background-image:url("https://drive.google.com/file/d/1v0uW1hxmCwGhjnInIiXwempyorFHFo07/view?usp=sharing")
}
</style>   
  </body>
</html>

标签： google-apps-script

解决方案

  • 您有 7 个 gif 图像的 URL。
  • 您想将脚本从 2 页扩展到 7 页。
  • 您想通过电子表格中“Sheet1”的“H2”中的值更改 gif 图像的 URL。
  • 您想使用相同的 HTML 样式。
    • 在你的脚本中，htmlA又htmlB是不同的。但是您想使用相同的 HTML。

如果我的理解是正确的，那么这个修改呢？在这个修改中，我使用了模板化的 HTML。请认为这只是几个答案之一。

HTML&Javascript 方面：

从： 
<img src="https://media.giphy.com/media/kDwLZpqtiTObyo4qc8/giphy.gif">
至： 
<img src="<?= url ?>">

Google Apps 脚本方面：

请showSidebarss()进行如下修改。在运行脚本之前，请进行以下设置。

  • 将图像的 URL 设置为gifImages.
  • 将 HTML 的文件名设置为var html = HtmlService.createTemplateFromFile('index');.
修改后的脚本： 
function showSidebarss() {
  // Please set URLs of gif images.
  var gifImages = {
    "1": "https://media.giphy.com/media/kDwLZpqtiTObyo4qc8/giphy.gif",
    "2": "### URL for value 2 ###",
    "3": "### URL for value 3 ###",
    ,
    ,
    ,
  };

  // Retrieve value as a key.
  var cellValueRange = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').getRange("H2"); 
  var cellValue = cellValueRange.getValue();

  // Show sidebar.
  var html = HtmlService.createTemplateFromFile('index'); // Please set this.
  html.url = gifImages[cellValue.toString()]; // Set url for <?= url ?>.
  SpreadsheetApp.getUi().showSidebar(html.evaluate());
}
  • 即使删除toString()了 of，该脚本也可能有效。cellValue.toString()

笔记：

  • 这是一个简单的修改。所以请根据您的情况进行修改。

参考：

编辑：

如果要showSidebarss()在编辑“Sheet1”的“H2”单元格时运行，请修改如下。

在使用此脚本之前。请showSidebarss()按如下方式安装 OnEdit 触发器。

如何安装 OnEdit 触发器：

  • 打开脚本编辑器。
    • 编辑 -> 当前项目的触发器。
    • 单击“添加触发器”。
    • 为“选择要运行的功能”设置“showSidebarss”。
    • 为“选择事件源”设置“来自电子表格”。
    • 将“选择事件类型”设置为“编辑时”。

安装触发器后，当您编辑“Sheet1”的“H2”单元格时，showSidebarss()会自动运行。

修改后的脚本：

function showSidebarss(e) {
  if (e && e.source.getSheetName() == "Sheet1" && e.range.getA1Notation() == "H2") {
    // Please set URLs of gif images.
    var gifImages = {
      "1": "https://media.giphy.com/media/kDwLZpqtiTObyo4qc8/giphy.gif",
      "2": "### URL for value 2 ###",
      "3": "### URL for value 3 ###",
      ,
      ,
      ,
    };

    // Retrieve value as a key.
    var cellValueRange = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').getRange("H2"); 
    var cellValue = cellValueRange.getValue();

    // Show sidebar.
    var html = HtmlService.createTemplateFromFile('index'); // Please set this.
    html.url = gifImages[cellValue.toString()]; // Set url for <?= url ?>.
    SpreadsheetApp.getUi().showSidebar(html.evaluate());
  }
}

笔记

  • 在当前阶段，没有任何方法可以使用 Google Apps Script 更改已打开的侧边栏的 HTML。因此，作为一种解决方法，我使用了通过覆盖侧边栏来更改 HTML 的方法。

参考：

推荐阅读