javascript - Using HTML file to Query a Google Spreadsheet using a Textbox for Query, using App Script -
i have spreadsheet have more 1000 lines, each column field, 1 of columns has field called domain, "which value need query", application using html need query using text box html function, search spreadsheet , return values of same line in html.
now here html code:
<html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-green.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <?!= include('webpage.js'); ?> <?!= include('style'); ?> </head> <body ng-app="webapp"> <div ng-controller="webappctrl"> <div> <md-toolbar class="md-theme-light"> <div class="md-toolbar-tools"> <div>delight app</div> </div> </md-toolbar> <div id="body"> <div layout="row" layout-align="center start" layout-margin layout-fill layout-padding> <div> <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="sample3" /> <label class="mdl-textfield__label" for="sample3">enter domain</label> </div> </form> </div> </div> <div layout="row" layout-align="center start" layout-margin layout-fill layout-padding> <div id="leftcontainer" class="md-whiteframe-z2" flex="50"> <md-toolbar class="md-theme-light"> <div class="md-toolbar-tools"> <div>customer info</div> </div> </md-toolbar> pull customer info here sheet </div> <div id= "rightcontainer" class="md-whiteframe-z2" flex="50"> <md-toolbar class="md-theme-light"> <div class="md-toolbar-tools"> <div>task list</div> </div> </md-toolbar> <md-list-item> <p>verified domain owner</p> <md-checkbox class="md-secondary"></md-checkbox> </md-list-item> <md-list-item> <p>user creation</p> <md-checkbox class="md-secondary"></md-checkbox> </md-list-item> <md-list-item> <p>dual delivery</p> <md-checkbox class="md-secondary"></md-checkbox> </md-list-item> </div> </div> </div> </div> </div> </body> </html> here web app function scripts page:
function doget(e) { return htmlservice.createtemplatefromfile('index').evaluate() .setsandboxmode(htmlservice.sandboxmode.iframe) .settitle('test') } function include(filename) { return htmlservice.createhtmloutputfromfile(filename) .setsandboxmode(htmlservice.sandboxmode.iframe) .getcontent(); } function testsheet(){ var ss = spreadsheetapp.openbyid("abc123456"); logger.log(ss.getname()); } the problem have don't know how can store information user submits textbox can later search spreadsheet using snippet found here is:
function test(){ var sh = spreadsheetapp.openbyid("abc123456"); var data = sh.getdatarange().getvalues(); // read data in sheet for(n=0;n<data.length;++n){ // iterate row row , examine data in column if(data[n][0].tostring().match('searchvariable')=='searchvariable'){ data[n][5] = 'yes'};// if column contains 'xyz' set value in index [5] (is column f) } logger.log(data) sh.getrange(1,1,data.length,data[0].length).setvalues(data); // write sheet } any ideas how can achieve this?
thank you
you need data out of form, send form values server side .gs script function using google.script.run.myfunctionname().
google.script.run - client side api
there various ways can values out of input fields. can form whole, , send modified form object server, or can values individually.
if form object, google changes form object. only way .gs function can values out of form object using html name attribute. in other words, way can form object strategy work, giving every input field name attribute name.
<input name='mynamegoeshere' class="mdl-textfield__input" type="text" id="sample3" /> the google documentation shows putting google.script.run code directly click attribute of input button. can try way, or put code separate script tag.
<input type="button" value="not clicked" onclick="google.script.run .withsuccesshandler(updatebutton) .withuserobject(this) .getemail()" /> html code:
<script> //put anonymous function browsers window object window.callserver = function(theformobject) { google.script.run .search(theformobject); </script> <form> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input name='domain' class="mdl-textfield__input" type="text" id="sample3" /> <label class="mdl-textfield__label" for="sample3">enter domain</label> <input type="button" value="not clicked" onclick="callserver(this.parent.parent)"/> </div> </form> code.gs
function search(myform) { //look in view menu, , logs menu item see if form passed in logger.log('myform: ' + myform); var domain = myform.domain; logger.log('domain: ' + domain); }
Comments
Post a Comment