Capturing input from a text input field in Google Aps script

Question

I have a spreadsheet at work that contains information on various different devices we use.

The spreadsheet contains information like the Original Equipment Manufacturer, Storage capacity, format, Etc. There are a total of 10 Columns, and up to 359 rows currently; but the spreadsheet will expand from general use.

I have created a sidebar application in google sheets using Aps script and HTML, in order to make requesting support for these objects simpler. I am running in to an issue with capturing the data typed into an input field. Here is my HTML:



  
    
    
    
    
    
    
  

  
  
    
      
         Edit a Kit  
        
          
            
            Enter Kit Name

I am trying to access the input data from the "Submit btn div" using the function "submitData()", but have been unsuccessful in doing so. In the version i've uploaded, I am simply trying to capture that information, and print it back out to the "kit contents div" but have been unsuccessful.

For clarity, I am doing this in a Google Apps scripts, as a sidebar extension to a google sheets spreadsheet. The goal is to take that input, and parse over the information for all of the informaton referenced in the first Full paragraph; and then return any items relevantr to the users search terms in the "kit contents div". I am not able to capture the input in Google Apps script though. Here is a copy of my gs code:

//This function searches for cards by the value typed into the text input field
function cardSearch(data) {
  var app = SpreadsheetApp;
  var log = app.openById("My Spreadsheet's ID");
  var kitContents = app.openById("My Spreadsheet's ID");
  var cards = log.getRange("A3:J").getValues();
  var kitType = kitContents.getRange("A3:J359").getValues();

for (i=0; i



I need help understanding how to cpature the input, and pass it back to the GS (I believe it's the same as passing it to the server) in order to run the cardSearch Function with that capturted data.

Cooper · Accepted Answer

Here's an example form that I've used to collect receipt information. You can display it as a sidebar, a dialog or run it as a webapp. It has a numerical input, a text input and a textarea. It also allows you to upload a file.

thehtml.hmtl:



  
    
    
    
    
    
    
  
   
    Receipt Information
    
      
        

        

        

        

        
Receipt Image
        

        

      
    
  
  
  Uploading. Please wait...

Codge.gs:

function onOpen() {
  SpreadsheetApp.getUi().createMenu('Receipt Collection')
    .addItem('Run as Dialog', 'showAsDialog')
    .addItem('Run as Sidebar', 'showAsSidebar')
    .addToUi();
  var sh=SpreadsheetApp.getActive().getSheetByName("Sheet1");
  sh.getRange(sh.getLastRow()+1,1).activate();
}

function uploadTheForm(theForm) {
  var rObj={};
  rObj['vendor']=theForm.vendor;
  rObj['amount']=theForm.amount;
  rObj['date']=theForm.date;
  rObj['notes']=theForm.notes
  var fileBlob=theForm.receipt;
  var fldr = DriveApp.getFolderById(receiptImageFolderId);
  rObj['file']=fldr.createFile(fileBlob);
  rObj['filetype']=fileBlob.getContentType(); 
  Logger.log(JSON.stringify(rObj));
  var cObj=formatFileName(rObj);
  Logger.log(JSON.stringify(cObj));
  var ss=SpreadsheetApp.openById(SSID);
  ss.getSheetByName('Sheet1').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
  var html=Utilities.formatString('
FileName: %s',cObj.file.getName());
  return html;
}

function formatFileName(rObj) {
  if(rObj) {
    Logger.log(JSON.stringify(rObj));
    var mA=rObj.date.split('-');
    var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
    rObj.file.setName(name);
  }else{
      throw('Invalid or No File in formatFileName() upload.gs');
  }
  return rObj;
}

function doGet() {
  var output=HtmlService.createHtmlOutputFromFile('receipts').setTitle('thehtml');
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=360, initial-scale=1');
}

function showAsDialog() {
  var ui=HtmlService.createHtmlOutputFromFile('thehtml');
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Receipts')
}

function showAsSidebar() {
   var ui=HtmlService.createHtmlOutputFromFile('thehtml');
  SpreadsheetApp.getUi().showSidebar(ui);
}

function initForm() {
  var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd")
  return {date:datestring};
}

globals.gs:

var receiptImageFolderId='upload file folder id';
var SSID='spreadsheet id';

Capturing input from a text input field in Google Aps script

Answers (1)

Related Questions