How do I get data from a prompt or dialog and put it in a Google Doc via Google Web App Script

Question

I want to create a Google Doc with a Google Script and name the new doc from user input.

The code that follows does create the new doc (Web App attached to a button on a new Google Site). Now I want to add code that gets the song title from the user. I just have no idea how to do this after three days of looking.

Closest code I could find is: write data in google sheet using a web script app

But it is for Google Sheets, not Docs.

My code so far, which works to create the doc is:

Code.gs

function createNewLandscapeSong() {
  var doc = DocumentApp.create('Rename with song title');
  var title = "replace with song title"
  var url = doc.getUrl();
  var body = doc.getBody();
  var paragraph = body.insertParagraph(0, "");
  var text1 = paragraph.appendText("© replace with writer(s)");
  text1.setFontSize(8);
  var rowsData = [['PUT FIRST VERSE/CHORUS HERE.', 'PUT SECOND VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
  var style = {};
  body.insertParagraph(0, title)
  .setHeading(DocumentApp.ParagraphHeading.HEADING3);
  table = body.appendTable(rowsData);
  style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
  table.setAttributes(style);

  return {
   url: url,
   title: title
  };
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="button" value="Create New Song Doc"
      onclick="google.script.run
          .withSuccessHandler(openNewDoc)
          .createNewLandscapeSong()" />
    <script>
       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>
  </body>
</html>

So, I know somewhere in this code I need to add code that prompts the user to enter a song title and then I need to set that up as a variable and insert it as the name of the document and the title of the song (my "var doc" and "var title"). I just don't know how to do that.

Revised code based on Sandy's input:

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

function createNewLandscapeSong(objArgs) {
  var docName = objArgs.docName;
  var songTitle = objArgs.songTitle;
  var songWriters = objArgs.songWriters;

  Logger.log('title: ' + title)

  var doc = DocumentApp.create(docName);

  var url = doc.getUrl();
  var body = doc.getBody();
  var paragraph = body.insertParagraph(0, "");
  var text = paragraph.appendText(songWriters);
  text.setFontSize(8);
  var rowsData = [['PUT FIRST VERSE/CHORUS HERE.', 'PUT SECOND     VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
  var style = {};
  body.insertParagraph(0, songTitle)
  .setHeading(DocumentApp.ParagraphHeading.HEADING3);
  table = body.appendTable(rowsData);
  style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
  table.setAttributes(style);

  return {
   url: url,
   title: title
  };
}

    Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Fill in fields below to name Google Lyric Document and add the song title and writers.<br><br>
    <input id="idNewDocName" type="text" placeholder="Google Doc Name"><br><br>
    <input id="idNewSongTitle" type="text" placeholder="Song Title"><br><br>
    <input id="idNewSongWriters" type="text" placeholder="Song Writers"><br><br>

    <button onclick="saveUserInput()">Create New Lyric Doc</button>

    <script>
      window.saveUserInput = function() {
      var docName = document.getElementById('idNewDocName').value;
      var songTitle = document.getElementById('idNewSongTitle').value;
      var songWriters = document.getElementById('idNewSongWriters').value;

    console.log('songTitle: ' + songTitle)

    google.script.run
      .withSuccessHandler(openNewDoc)
      .createNewLandscapeSong({docName:docName,songTitle:songTitle, songWriters: songWriters})

      }

       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

Alan Wells Alan Wells · Accepted Answer · 2019-02-19T15:16:31

You need a couple of input fields. This example shows one way to get values out of input fields. This example does not use a form tag because using a form tag can result in the browser tab being refreshed after the form submission with is confusing to people and is often not what they want.

To debug the code, in the Chrome browser, hit the f12 key to open the developer tools. After clicking the button you should see the value of the song title in the console log. Pass the data to the server code as an object. After running the code, from the code editor click the View menu, and choose Logs to see the log print out.

This shows one way to get user input from a Web App and pass it to the server code in Apps Script.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <input id="idNewDocName" type="text" placeholder="New Doc Name">
    <input id="idNewSongTitle" type="text" placeholder="New Song Title">

    <button onclick="saveUserInput()">Create New Song Doc</button>

    <script>
      window.saveUserInput = function() {
        var docName = document.getElementById('idNewDocName').value;
        var songTitle = document.getElementById('idNewSongTitle').value;

        console.log('songTitle: ' + songTitle)

        google.script.run
          .withSuccessHandler(openNewDoc)
          .createNewLandscapeSong({docName:docName,songTitle:songTitle})

      }

       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

Code.gs

function createNewLandscapeSong(objArgs) {
  var docName = objArgs.docName;
  var title = objArgs.songTitle;

  Logger.log('title: ' + title)

  var doc = DocumentApp.create(docName);

  var url = doc.getUrl();
  var body = doc.getBody();
  var paragraph = body.insertParagraph(0, "");
  var text1 = paragraph.appendText("© replace with writer(s)");
  text1.setFontSize(8);
  var rowsData = [['PUT FIRST VERSE/CHORUS HERE.', 'PUT SECOND VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
  var style = {};
  body.insertParagraph(0, title)
  .setHeading(DocumentApp.ParagraphHeading.HEADING3);
  table = body.appendTable(rowsData);
  style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
  table.setAttributes(style);

  return {
   url: url,
   title: title
  };
}

How do I get data from a prompt or dialog and put it in a Google Doc via Google Web App Script

1 Answers

Code.gs