MrMus MrMus - 3 days ago 4
HTML Question

fill sidebar form from sheet

In google sheet, I want to fill a form in a sidebar with values from the active sheet. Since I can't use a click on cell trigger, i want to use a function that takes the value of the active cell when a button in the sidebar is clicked.
I wrote this code but it didn't work unfortunately,

I am new to Apps script so excuse my low level code :)
Thank you !

test_sidebar.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>

function tSubmit(form){

google.script.run.withSuccessHandler(updateT).getT(form);
}

function updateT(cellValue){
var div=document.getEelementById('T');
div.innerHTML='<input name="T" size = 10 value=' + cellValue + '>K'
}

</script>
</head>
<body>
<form>
<font color="red">Select conditions of interest:</font><p>
<ul><input value=T type="Button" onClick="tSubmit(this)"><div id="T"> = <input name="T" size = 10>K</div></ul>
<ul><i>P</i> = <input name="P" size = 10>bar</ul>
</form>
</body>
</html>


code.gs :

function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}

function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('test_sidebar')
.setTitle('My custom sidebar')
.setWidth(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}

function getT(form){
var cellValue= SpreadsheetApp.getActiveSheet().getActiveCell().getValue();
return cellValue;
}

Answer

You have a typo in the html file. Remove the extra e in getElementByID to make it:

var div=document.getElementById('T');

Also, there is no need to try to pass the form, which is also causing a problem anyway, so just remove those portions. You final codes will be:

test_sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
   <script>

 function tSubmit(){

      google.script.run.withSuccessHandler(updateT).getT();
 }

 function updateT(cellValue){
 var div=document.getElementById('T');
 div.innerHTML='<input name="T" size = 10 value=' + cellValue + '>K'
 }

   </script>
  </head>
  <body>
  <form>
    <font color="red">Select conditions of interest:</font><p>
<ul><input value=T type="Button" onClick="tSubmit()"><div id="T"> = <input name="T" size = 10>K</div></ul>
<ul><i>P</i> = <input name="P" size = 10>bar</ul>
</form>
  </body>
</html>

code.gs :

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('test_sidebar')
      .setTitle('My custom sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

function getT(){
  var cellValue= SpreadsheetApp.getActiveSheet().getActiveCell().getValue();
  return cellValue;
}
Comments