Google UiApp中suggestBox的替代方案

时间：2014-03-11 21:21:48

标签： google-apps-script jquery-autocomplete suggestbox

我正在尝试创建一个相对简单的应用程序（或者至少在两周前看起来像这样）来编制图书馆的定期摄入量。我需要一个带有两个框的表单：用于期刊标题的文本输入和用于发布日期的日期输入。然后我需要此表单提交到Google电子表格。我可以使用通用表单，但我需要它在输入信息时自动填写期刊标题 我正在使用Google Apps，Spreadsheets和Sites，因为它们是免费的，可以完成我想要的大部分工作。这是关键点。我可以创建一个HTML服务，从Google表格中完美地自动完成。 I basically followed this post exactly。
我可以创建一个UiApp脚本来提交到工作表。我只是不能同时做一个项目。代码如下：

function doGet() {
  var doc = SpreadsheetApp.openById(SPREADSHEET_ID);
  var app = UiApp.createApplication().setTitle('Periodical Intake');
  // Create a grid with 3 text boxes and corresponding labels
  var grid = app.createGrid(3, 2);
  grid.setWidget(0, 0, app.createLabel('Title:'));

  // Text entered in the text box is passed in to pTitle
  // The setName method will make those widgets available by
  // the given name to the server handlers later
  grid.setWidget(0, 1, app.createTextBox().setName('pTitle').setId('pTitle'));
  grid.setWidget(1, 0, app.createLabel('Date:'));
  grid.setWidget(1, 1, app.createDateBox().setName('date').setId('date'));


  // Text entered in the text box is passed in to city.

  // Create a vertical panel..
  var panel = app.createVerticalPanel();

  // ...and add the grid to the panel
  panel.add(grid);

 // Here's where this script diverges from the previous script.
  // We create a horizontal panel called buttonPanel to hold two buttons, one for submitting the contents of the form
  // to the Spreadsheet, the other to close the form.

  var buttonPanel = app.createHorizontalPanel();

  // Two buttons get added to buttonPanel: button (for submits) and closeButton (for closing the form)
  // For the submit button we create a server click handler submitHandler and pass submitHandler to the button as a click handler.
  // the function submit gets called when the submit button is clicked.
  var button = app.createButton('submit');
  var submitHandler = app.createServerClickHandler('submit');
  submitHandler.addCallbackElement(grid);
  button.addClickHandler(submitHandler);
  buttonPanel.add(button);

  // For the close button, we create a server click handler closeHandler and pass closeHandler to the close button as a click handler.
  // The function close is called when the close button is clicked.
  var closeButton = app.createButton('close');
  var closeHandler = app.createServerClickHandler('close');
  closeButton.addClickHandler(closeHandler);
  buttonPanel.add(closeButton);


  // Create label called statusLabel and make it invisible; add buttonPanel and statusLabel to the main display panel.
  var statusLabel = app.createLabel().setId('status').setVisible(false);
  panel.add(statusLabel);

  panel.add(buttonPanel);

  app.add(panel);
  return app;
}

// Close everything return when the close button is clicked
function close() {
  var app = UiApp.getActiveApplication();
  app.close();
  // The following line is REQUIRED for the widget to actually close.
  return app;
}

// function called when submit button is clicked
function submit(e) {

  // Write the data in the text boxes back to the Spreadsheet
  var doc = SpreadsheetApp.openById(SPREADSHEET_ID);
  var lastRow = doc.getLastRow();

  var cell = doc.getRange('a1').offset(lastRow, 0);
  cell.offset(0, 1).setValue(e.parameter.pTitle);
  cell.offset(1, 2).setValue(e.parameter.date);


  // Clear the values from the text boxes so that new values can be entered
  var app = UiApp.getActiveApplication();
  app.getElementById('pTitle').setValue('');
  app.getElementById('date').setValue('');
  // Make the status line visible and tell the user the possible actions
  app.getElementById('status').setVisible(true).setText('The periodical ' + e.parameter.pTitle + ' was entered.' +
  'To add another, type in the information and click submit. To exit, click close.');
  return app;
}​

如果可以在UiApp中使用jQuery（我认为不是这样），我可以使用我的getAvailableTags函数。另一个建议是使用suggestBox但似乎已被弃用。我的智慧结束了。已经两周了，我觉得我没有到任何地方。有人可以请图书管理员帮忙吗？

1 个答案:

答案 0 :(得分：0)

以下是使用HTMLService构建的表单示例，该表单将数据保存在电子表格中。我还有一个你不需要的文件上传，但我认为它可能引起别人的兴趣...... 使用现有的code borrowed from Mogsdad.

可以轻松集成自动填充功能

code.gs：

    function doGet() {
      return HtmlService.createHtmlOutputFromFile('index');
    }    

   function serverFunc(theForm) {
      var fileBlob = theForm.theFile;         // This is a Blob.
      var name = theForm.name;
      var number = theForm.number;
      var adoc = DocsList.createFile(fileBlob);   
      var sh = SpreadsheetApp.openById('1dx0mr4Dy64jqmliTjFyHF7rZW4TZ_PPkWyA_H3WTRcA').getSheetByName('Sheet1');
      sh.getRange(sh.getLastRow()+1,1,1,4).setValues([[adoc.getName(),adoc.getUrl(),name,number]]);
       return adoc.getUrl();
    }

index.html：

<style>
p {
margin:40px;
font-family:arial,sans-serif;
font-size:10pt;
color:#AAA
}
</style>
<p>
Test this file upload form :
<br><br>
<form>
   Enter you name    <input type="text" name="name" ><br>
   Enter your number <input type="text" name="number"><br>
   select your file  <input type="file" name="theFile"><br>
   <input type="button"  value="UpLoad" id="button" onclick="google.script.run.withSuccessHandler(cliHandler).serverFunc(this.parentNode)">
</form>
</div><br>
<div id="url" >
</div><br>
<div id="urlText" >
</p>

<script>

function cliHandler(e){
   document.getElementById('button').value = "Your file has been uploaded" ; 
   var divUrl = document.getElementById('url');
   divUrl.innerHTML = '<a href="' + e + '">Open the file</a>';
   document.getElementById('urlText').innerHTML = "url : "+e;
   }

</script>

编辑：这是一个基于您的代码的版本，其中包含工作表单和自动填充功能：

code.gs 

function doGet() {
  return HtmlService.createTemplateFromFile('Autocomplete').evaluate().setTitle('Periodical Intake');
}


function getAvailableTags() {

  var ss = SpreadsheetApp.openById("0Agz7u97dbdECdGh6QVcyb2NVeFByTnlYeU5KcDdSRWc");
  var s = ss.getSheetByName("Cataloging Key");
  var data = s.getDataRange().getValues();
  var headers = 0; // number of header rows to skip at top
  var tagColumn = 0; // column # (0-based) containing tag

  var availableTags = [];
  for (var row=headers; row < data.length; row++) {
    availableTags.push(data[row][tagColumn]);
  }

  return( availableTags );
}


function doPost(e) {
  var title = e.title;
  var date = e.date;
  Logger.log(title+'  '+date);
}

Autocomplete.html 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
p {
margin:40px;
font-family:arial,sans-serif;
font-size:10pt;
color:#AAA
}
</style>
<p>
Test this file upload form :
<br><br>
<div>
<form class="ui-widget" >
      <input id="title" type=text placeholder="Periodical Title:" name="title" /><br />
      <input id="date"  type=date placeholder="Publication Date: " name="date" /><br>
      <input type="button" value="Submit"
      onclick="google.script.run.doPost(this.parentNode)" />
</form>

</div><br>
<div id="url" >
</div><br>
<div id="urlText" >
</p>

<script>
// This code in this function runs when the page is loaded.

$(function() {
  google.script.run.withSuccessHandler(buildTagList).getAvailableTags();
});

function buildTagList(availableTags) {
  $( "#title" ).autocomplete({
    source: availableTags
  });
}

</script>
相关问题
最新问题