如何在HTML对话框中嵌入Google脚本(GS)内容

时间:2018-10-05 00:50:55

标签: html google-apps-script google-sheets

我正在为我的Google工作表构建一个UI,并且编写了.gs函数以返回所需的值。我还编写了HTML对话框来显示所需的窗口。

我知道如何用静态文本填充对话框,但是我不知道如何将.gs函数返回的值打印到对话框中。

HTML

<html>
  <head>
    <base target="_top">
  </head>
  <body>

    I want to have the value returned from the .gs function visible here as text. 

  <select id="simple" name="simple">
       <option> or even better here </option>
       <option>another option</option>
       <option>yet another option</option>
  </select>
  </body>
</html>

gs

function getCellContent() {
    var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("MySheet");
    var value = ss.getRange('A2').getValue();
    return value;
};

我觉得我已经阅读了整个互联网,却对这些基本知识一无所获。

3 个答案:

答案 0 :(得分:0)

您可以使用scriplets将值打印到HTML中。例如

<html>
    <body>
        <h1> Cell content: </h1>
        <p> <?= getCellContent() ?> </p>
    </body>
</html>

答案 1 :(得分:0)

解决方案在代码之外,我已经附加了。

还有另一个功能可以在屏幕上显示窗口。在我之前的代码中是:

.GS

Unhandled rejection TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at stringify (/mnt/c/Development/tendesign/lfc-v2/node_modules/express/lib/response.js:1119:12)
    at ServerResponse.json (/mnt/c/Development/tendesign/lfc-v2/node_modules/express/lib/response.js:260:14)
    at /mnt/c/Development/tendesign/lfc-v2/dist/routers/user.router.js:21:57
    at tryCatcher (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/mnt/c/Development/tendesign/lfc-v2/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:763:18)
    at tryOnImmediate (timers.js:734:5)
    at processImmediate (timers.js:716:5)

但正确的是,它应该像这样:

[ user {
    dataValues:
     { id: 706,
       name: 'Sandra Will',
       email: 'sandra@design.us',
       params: '["ADMIN", "MANAGER", "USER"]',
       active: '1' },
    _previousDataValues:
     { id: 706,
       name: 'Sandra Will',
       email: 'sandra@design.us',
       params: '["ADMIN", "MANAGER", "USER"]',
       active: '1' },
    _changed: {},
    _modelOptions:
     { timestamps: false,
       validate: {},
       freezeTableName: false,
       underscored: false,
       underscoredAll: false,
       paranoid: false,
       rejectOnEmpty: false,
       whereCollection: null,
       schema: null,
       schemaDelimiter: '',
       defaultScope: {},
       scopes: [],
       indexes: [],
       name: [Object],
       omitNull: false,
       sequelize: [Sequelize],
       hooks: {},
       uniqueKeys: {} },
    _options:
     { isNewRecord: false,
       _schema: null,
       _schemaDelimiter: '',
       raw: true,
       attributes: [Array] },
    __eagerlyLoadedAssociations: [],
    isNewRecord: false },
  user {
    dataValues:
     { id: 710,
       name: 'Tommy Craw',
       email: 'thomas.craw@cargo.com',
       params: '["ADMIN", "MANAGER", "USER"]',
       active: '1' },
    _previousDataValues:
     { id: 710,
       name: 'Tommy Craw',
       email: 'thomas.craw@cargo.com',
       params: '["ADMIN", "MANAGER", "USER"]',
       active: '1' },
    _changed: {},
    _modelOptions:
     { timestamps: false,
       validate: {},
       freezeTableName: false,
       underscored: false,
       underscoredAll: false,
       paranoid: false,
       rejectOnEmpty: false,
       whereCollection: null,
       schema: null,
       schemaDelimiter: '',
       defaultScope: {},
       scopes: [],
       indexes: [],
       name: [Object],
       omitNull: false,
       sequelize: [Sequelize],
       hooks: {},
       uniqueKeys: {} },
    _options:
     { isNewRecord: false,
       _schema: null,
       _schemaDelimiter: '',
       raw: true,
       attributes: [Array] },
    __eagerlyLoadedAssociations: [],
    isNewRecord: false },
  user {
    dataValues:
     { id: 711,
       name: 'LeeAnne',
       email: 'leeanne.craw@cargo.com',
       params: '["ADMIN", "MANAGER", "USER"]',
       active: '1' },
    _previousDataValues:
     { id: 711,
       name: 'LeeAnne',
       email: 'leeanne.craw@cargo.com',
       params: '["ADMIN", "MANAGER", "USER"]',
       active: '1' },
    _changed: {},
    _modelOptions:
     { timestamps: false,
       validate: {},
       freezeTableName: false,
       underscored: false,
       underscoredAll: false,
       paranoid: false,
       rejectOnEmpty: false,
       whereCollection: null,
       schema: null,
       schemaDelimiter: '',
       defaultScope: {},

感谢您的耐心等候。

答案 2 :(得分:0)

使用AppsScript时,我遇到了类似的问题。纯HTML可以很好地渲染,但是html内的Scriplets无法渲染。就我而言,问题很简单。她的例子可能对某些人有帮助。

所以我的Code.gs脚本包含:

function onOpen() {
    var ui = SpreadsheetApp.getUi();
    ui.createMenu('Menu')
        .addItem('Open Html Dialog', 'openDialog')
        .addToUi();
}
function getCellContent() {
    return 'Some content';
}
function openDialog() {
  var html = HtmlService.createTemplateFromFile('index')
                        .evaluate();
  SpreadsheetApp
    .getUi()
    .showModalDialog(html, 'Dialog title');
}

我有一个名为index.html

的模板
<body>
  <h1>Content: <? getCellContent() ?></h1>
</body>

请注意,上述操作失败了,因为我使用的是<?,它被大多数模板引擎解析为常规JavaScript语句(例如循环,条件等),而不是用于评估的<?=表达式(您要评估并输出到html视图的内容)。因此,此(<?=)起作用了:

<?= getCellContent() ?>