如何使用Google电子表格作为后端创建HTML数据输入表单

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

我有一个Google电子表格，每天都会在其中添加一些行，并使用Google电子表格，客户反馈小组会进行跟进。

Google电子表格数据。

Ref ID        Company Name       Contact No.1     Contact No.2     Project Name Agent ID Client Name Product      Ref Code         Date        Days Passed     Status    Comment    Notes      Final_Status
ITUL-1        XYZZZZ             +1 804           +1 804           Alpha        12345    Karl        Lite         LIT-1            12/12/2018  6               Accept    Satisfied  Need call  Submit & Next

上述Google Spreadsheet始终在后端具有以下数据：

参考ID公司名1号联络人第二联络人项目名代理ID

将根据用户的响应从HTML UI捕获其余提到的细节，最后单击“提交并下一步”或“下一步”。

用户必须首先在HTML UI上输入“代理ID”，因此，将逐个Ref ID详细信息提供给特定的“代理ID”用户。

如所附的屏幕快照中所述，根据googlespreadsheet，信息的左侧将是静态的，而右侧的信息将由用户根据电话对话进行填充。

下面提到的细节将被下拉或基于用户输入的单选选项：

Product : Lite, Lite-I, Elite
Ref Code: LIT-1, LIT-2, LIT-3
Status  : Accept, Reject, Pending
Comment : Satisfied, Call Back, Pending

下面提到的细节将被得出：

Days Passed: It will be derived from the current system year - year mentioned in the `Date`

下面提到的细节将作为用户输入的自由文本。

Client Name
Notes
Final_Status

[注：将分配和显示代理，仅显示Ref ID不为空白且Agent ID为空白或Googlespreadsheet中标记的“提交并下一个”以外的那些Final_Status。

[我们需要在Google Spread表格中再添加一列，当Final_Status标记为“ Submit＆Next”或“ Next”后，该列会根据系统日期捕获日期时间戳记

提交和下一个按钮仅在用户捕获了所有详细信息后才启用。仅当选择Comment选项时，“下一个按钮”才会启用。

enter image description here

html forms google-apps-script google-api google-form
1个回答
0
投票

似乎Google Apps Developer文档提供了与此类似的指南：

可用于构建Web应用程序或在Google文档，表格和表单中添加自定义用户界面。

https://developers.google.com/apps-script/guides/html

看起来您需要授予Google Apps脚本访问权限，然后添加一个：

https://developers.google.com/apps-script/guides/standalone

您可以创建一个独立的脚本，或手动连接您的项目：

转到Google云端硬盘，然后点击新建>更多>连接更多应用。

[当“将应用程序连接到驱动器”窗口出现时，在搜索框中键入“脚本”，然后按Enter。

单击Google Apps脚本列表旁边的连接。

Google的脚本示例说您的脚本看起来像这样：

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Dialog title');
}

带有相应的HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   My Google Sheets Interface.
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

这里似乎有不错的文档：

https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app

所以我想这是一个不错的起点。您要实现的目标看起来确实可行，我认为将其调整为Google脚本支持的功能即可。

祝你好运！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.