How to set cell value from google sheet as default value of textarea for HTML sidebar?

问题

I have a standalone Google script using as library. This library contains HTML form using like sidebar with one <textarea> element and scripts. I want to get some value from a cell of active google spreadsheet to set it as default value of <textarea> element in the sidebar. And then update it with manually typing text and send it as new value to the source cell keeping sidebar is open.

Library's scripts

function showSidebar() {
    var html = HtmlService.createHtmlOutputFromFile('method.html')
        .setTitle('Cooking method')
        .setWidth(300);
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
        .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();//modified 
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}

HTML sidebar

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function()
      {
         google.script.run
             .withSuccessHandler(updateMethod)
             .getDefaultMethod();
      });
      function updateMethod(method_val)
      {
         document.getElementById('method').innerHTML=method_val;
      }
    </script>
  </head>
  <body>
    <form id="mysidebar">
    <div class="block form-group">
    <label for="method"></label>
        <textarea id="method" name="method" rows="30" cols="40">
        </textarea>
    </div>   

    <div class="block">
    <button type="submit" class="action">Add cooking method</button>
    </div>
    </form>
    <script>
    document.querySelector("#mysidebar").addEventListener("submit", 
    function(e)
    {
    e.preventDefault();    //stop form from submitting
    google.script.run.withSuccessHandler().addNewMethod(this);
    }
    )
    </script>
  </body>
</html>

functions on the client spreadsheet. Library's name is RecipeBuilder

```
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('method.html')
    .setTitle('Cooking method')
    .setWidth(900);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}
```

My script does not work. Sidebar appears with blank <textarea> and does not send updated value to the cell. Where I'm wrong and how to fix it? Can I make sidebar more widely then 300?

回答1:

I believe your goal as follows.

You want to set the value retrieved from the cell "A2" of the Method sheet in the active Spreadsheet as the default value for textarea.
When the "Add cooking method" button is clicked, you want to retrieve the values from textarea and put the values to the cell "A2" of the Method sheet in the active Spreadsheet.
You want to know the reason of the issue of Sidebar appears with blank <textarea> and does not send updated value to the cell..

For this, how about this answer?

Modification points:

About getDefaultMethod() in the client side, in your script, it is required to return the value from RecipeBuilder.getDefaultMethod(). In your current script, the value is not returned. So when the HTML is loaded, the value retrieved from the cell "A2" of the Method sheet in the active Spreadsheet is not set to textarea.
About addNewMethod() in the GAS library side, var ss = SpreadsheetApp.getActiveSpreadsheet; is not run the method. So please add ().
- I think that this is the reason of your issue.

Modified script:

When your script is modified, please modify as follows.

Please modify getDefaultMethod() of the client side as follows.

From:

function getDefaultMethod(){
  RecipeBuilder.getDefaultMethod();
}

To:

function getDefaultMethod(){
  return RecipeBuilder.getDefaultMethod();  // Modified
}

And, please modify addNewMethod() of the GAS library side as follows.

From:

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet;
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

To:

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();  // Modified
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

Note:

In your script, if the client side is NOT the container-bound script of Google Spreadsheet and the Google Spreadsheet of client side doesn't have the sheet of Method, an error occurs. So please be careful this.

来源：https://stackoverflow.com/questions/61570211/how-to-set-cell-value-from-google-sheet-as-default-value-of-textarea-for-html-si

标签

javascript

html

google-apps-script

google-sheets