How to run HTML from google library?

Question

I have a Google Library with HTML form, process form script addNewItemand script to run the form in popup window addItem.

function addItem()
{
  var html = HtmlService.createHtmlOutputFromFile('input/form.html');
  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Add New Recipe');
  
}

function addNewItem(form_data)
{
  var url = "SPREADSHEET_URL_TO_DATA_COLLECTION";
  var ss = SpreadsheetApp.openByUrl(url);
  var sheet = ss.getSheetByName('List');  
  var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
  
  var dishName = form_data.dish_name;
  var cuisineName = form_data.cuisine_name;
  var placeName = form_data.place_name;
  var categoryName = form_data.category_name;
  var num = sheet.getRange(sheet.getLastRow(), 1).getValue() + 1 || sheet.getLastRow();
    
  sheet.appendRow([num, dishName, cuisineName, placeName, categoryName, asiaTime]);
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <form id="myform">
    <div class="block form-group">
    <label for="dish_name">Dish name</label>
    <input type='text' name='dish_name' id="dish_name" required="required"/>
    </div>
   
    <div class="block form-group">
    <label for="place_name">Place</label>
        <select id="place_name" name="place_name" type="text" required>
       
             <option value="LL4H">LL4H</option>
             <option value="LL4T">LL4T</option>              
        </select>
    </div>
    
    <div class="block form-group">
    <label for="cuisine_name">Cuisine</label>
        <select id="cuisine_name" name="cuisine_name" type="text" required>
       
             <option value="Asian">Asian</option>
             <option value="Western">Western</option>              
        </select>
    </div>
    
    <div class="block form-group">
    <label for="category_name">Category</label>
        <input id="category_name" name="category_name" type="text" list="quote-choices" required>
        <datalist id="quote-choices">
             <option value="Starter">Starter</option>
             <option value="Main course">Main course</option> 
             <option value="Veggi side">Veggi side</option>
             <option value="Carbs side">Carbs side</option>
             <option value="Dessert">Dessert</option>
             <option value="Dough">Dough</option>
             <option value="Sauce">Sauce</option>
             <option value="Drink">Drink</option>
             <option value="Other">Other</option>
        </datalist>
    </div>
    <div class="block">
    <button type="submit" class="action">Submit</button>
    </div>
    </form>
    <script>
      document.querySelector("#myform").addEventListener("submit", 
      function(e)
      {
      e.preventDefault();    //stop form from submitting
      console.log(this)
      google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
      }
      );
    </script>
  </body>
</html>

I connected this Library with the Google Spreadsheet and declared new function to run library script to open the form.

function createRecipe() {
  RecipeBuilder.addItem();
}

function addNewItem(form_data) {
  RecipeBuilder.addNewItem(form_data);
}

Form appears in popup window well.

I click Submit to submit my data from the form, but serverside process does not start.

How to run this form correct? Where I'm wrong? How to fix it?

UPDATED

It's still does not work with library but works well if I put it in bound-container script of some spreadsheet. Unfortunately, I can't use it in bound-container because full code of addNewItem(form_data) function must replicate current spreadsheet. Finally it will be 1000+ Google Spreadsheets with same numbers of bound-containers. It will be super complicated to update it

Tanaike · Accepted Answer · 2020-05-02 23:20:11Z

3

I believe your goal and situation as follows.

You want to use addItem(), addNewItem(form_data) and input/form.html as a GAS library.
When you call this library from the client side, when the submit button is clicked, the data is not sent.
- You want to remove this issue.
The library name is RecipeBuilder.

For this, how about this modification?

Modification points:

I think that the reason of your issue is google.script.run.addNewItem(this);. In this case, when addNewItem(this) is run, this function is searched from the GAS project. By this, an error occurs like Uncaught TypeError: google.script.run.addNewItem is not a function. I think that this is the reason of your issue.

In order to remove this issue, how about the following modification? In this modification, one more function is added to the client side.

Modified script:

function createRecipe() {
  RecipeBuilder.addItem();
}

// Added
function addNewItem(form_data) {
  RecipeBuilder.addNewItem(form_data);
}

By this, when google.script.run.addNewItem(this); is run at the library side, addNewItem of client side is run, and then, RecipeBuilder.addNewItem of the library side is run.

Note:

In your Javascript of library side, google.script.run.addNewItem(this); and google.script.host.close(); are run in order. But google.script.run works with the asynchronous process. So if the process of addNewItem(this) is slow, the dialog might be closed before addNewItem(this) is run. So I think that the following modification might be also used.
- From
```
google.script.run.addNewItem(this);
google.script.host.close();//close this dialogbox
```
- To
```
google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
```

Reference:

Class google.script.run

answered May 2, 2020 at 23:20

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Timogavk Over a year ago

Thank you very much! I was very close to this solution, but knowledge still very poor. One more question. How can I get log in console? Because now I see addItem() log only without addNewItem()

Tanaike Over a year ago

@Timogavk Thank you for replying. At first, can I ask you whether my proposal resolved your issue? Because I cannot understand about I was very close to this solution, but knowledge still very poor.. About your new question, unfortunately, I cannot understand about How can I get log in console? Because now I see addItem() log only without addNewItem(). From this, I cannot understand about what you want to do. This is due to my poor English skill. I deeply apologize for this. If you can cooperate to resolve your issue, I'm glad.

Timogavk Over a year ago

I just asked about how to log server side scripts

Tanaike Over a year ago

@Timogavk Thank you for replying. You want to retrieve the log in Google Apps Script side in the GAS library. If my understanding is correct, in that case, you can retrieve the log by putting console.log("sample") to the function of addItem and addNewItem in the library. When you run the function createRecipe at the client, for example, you can confirm the log at Stackdriver logs for other executions are available in the Apps Script Dashboard and here.

Tanaike Over a year ago

@Timogavk When the function you ran is opened at Apps Script Dashboard, you can see the log at Stackdriver logs.

Mehdi Khoshnevis · Accepted Answer · 2020-05-02 22:20:33Z

1

I recommend you put your scripts into:

document.addEventListener('DOMContentLoaded', event => {
    // your code here
});

answered May 2, 2020 at 22:20

Mehdi Khoshnevis

3101 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to run HTML from google library?

UPDATED

2 Answers 2

Modification points:

Modified script:

Note:

Reference:

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATED

2 Answers 2

Modification points:

Modified script:

Note:

Reference:

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related