使用Google表单创建侧边栏
我刚刚找到了一个旧表单并获取了嵌入代码。我将其加载到另一个项目上的侧边栏中,并粘贴了iframe嵌入代码,它完美地加载了,只是大小有点问题。我运行了表单,确实将数据加载到包含它的电子表格中。
我想我会添加一个完整的示例。这是一个简单的示例,用于将时间戳文本输入到电子表格中。它有两种方法。第一种技术使用标准的html、javascript、JQuery和Google脚本。第二种技术只需创建一个表单并将其嵌入到一个简单的html页面中即可完成。这两个版本都适合放在侧边栏中,并且都链接到电子表格页面,其中文本被加载并打上时间戳。
Code.gs:
function onOpen()
{
SpreadsheetApp.getUi().createMenu('My Tools')
.addItem('createTextEntryForm', 'createTextEntryForm')
.addToUi();
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('formBar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
function createTextEntryForm()
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var form=FormApp.create('Form On A Sidebar');
form.setDescription('Enter Your Message and Push Submit when complete.')
.setConfirmationMessage('Message Saved and TimeStamped.')
.setAllowResponseEdits(true)
.setAcceptingResponses(false)
.setDestination(FormApp.DestinationType.SPREADSHEET, ss.getId());
var containerLink=form.addParagraphTextItem();
containerLink.setTitle('Enter your comment now.')
.isRequired();
}
sidebar.html是表单的HTML版本:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea>
<br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>
formBar.html是表单嵌入的位置:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<iframe src="FormURL?embedded=true#start=embed" width="300" height="550" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</body>
</html>
这是电子表格和侧边栏的外观:
![enter image description here](https://istack.dev59.com/OkAzy.webp)
![enter image description here](https://istack.dev59.com/BQ0tt.webp)