How to make a button in appmaker perform some actions and open a URL after

Question

How can I have a button that when a user clicks it creates a Google Document based on a record's fields and after the document is created it also opens the document.

I have used the Document Sample in appmaker, I can create the Google Document, but I cannot find a way to open the URL of the Google Document (after it is created) using the same button that calls the function for creating the document.

For now, I have taken the same approach of the Document Sample to have a separate link in the application (which gets the URL of the Document after it is created). What I don't like of this solution is that a user needs to click in two different places.

Answer 1

Edit: Changed to have the same onClick-to-open functionality as the Document Sample (no ad-block warnings), but with the OP's need to be in one button. Although the ideal solution would be to use javascript await, this works. The use of AppMaker page properties are unnecessary for this question. However I kept them in for simplicity of the matter.

---

I'll expand on Pavel's answer. For speed, you can make the document and go to the link before building the contents.

Set the name, immediately commit, open link, then have the script reopen and make the changes to that document.

I used Pavel's answer, changed the name of one function and added a parameter, and added one function. The rest is a copy and paste from the Document Sample.

widget's onClick event

if (!widget.root.descendants.CreateDocFormPanel.validate()) {
  return;
}

var pageWidgets = widget.root.descendants;
var props = widget.root.properties;

props.CreatingDoc = true;
props.DocumentUrl = null;
google.script.run
  .withSuccessHandler(function(documentUrl) {
    clearForm(pageWidgets);
    props.DocumentUrl = documentUrl;
    props.CreatingDoc = false;
    var win = window.open(app.pages.DocumentSample.properties.DocumentUrl, '_blank');
    win.focus();
  })
  .withFailureHandler(function(error) {
    console.error(JSON.stringify(error));
    props.CreatingDoc = false;
  })
  .createDoc(
    pageWidgets.NameTextBox.value,
    pageWidgets.ContentTextArea.value);

client script

/**
 * Clears form widgets after creating a Google Doc.
 * @param {Object} formWidgets - widgets of a form.
 */
function clearForm(pageWidgets) {
  pageWidgets.NameTextBox.value = null;
  pageWidgets.ContentTextArea.value = null;
}

server script

/**
 * Configures a Google Doc.
 * @param {string} id - id of the Google Doc.
 * @param {string} content - content to add to a Google Doc.
 * @return {string} URL of the configured Google Doc.
 */
function configDoc(id, content) {

  // Creating the document.
  var doc = DocumentApp.openById(id);
  var body = doc.getBody();

  // Insert a document header paragraph.
  var title =
    body.insertParagraph(0, 'A Document Created by an App Maker App');
  title.setHeading(DocumentApp.ParagraphHeading.HEADING1);

  // Insert a paragraph with provided content.
  body.insertParagraph(1, content);

  // Example of bold text.
  var boldText = body.appendParagraph('Example of bold text');
  boldText.setBold(true);

  // Example of italic text.
  var italicText = body.appendParagraph('Example of italic text');
  italicText.setItalic(true);
  italicText.setBold(false);

  // Example of colored text.
  var coloredText = body.appendParagraph('Example of colored text');
  coloredText.setItalic(false);
  coloredText.setForegroundColor('#388e3c');

  // Example of text with background color.
  var textWithBackground = body.appendParagraph('Text with background color');
  textWithBackground.setForegroundColor('#000000');
  textWithBackground.setBackgroundColor('#4fc3f7');

  // Add a paragraph with link with italic style.
  var link = body.appendParagraph('Learn more about Document Service');
  link.setLinkUrl(
    'https://developers.google.com/apps-script/reference/document/');
  link.setBackgroundColor('#ffffff');
  link.setItalic(true);

  doc.saveAndClose();
  return doc.getUrl();
}

/**
 * Creates a Google Doc.
 * @param {string} name - name of the Google Doc.
 * @param {string} content - content to add to a Google Doc.
 * @return {string} URL of the created Google Doc.
 */
function createDoc(name, content) {
  var doc = DocumentApp.create(name);
  doc.saveAndClose();
  configDoc(doc.getId(), content);
  return doc.getUrl();
}

More information can be found in the DocumentApp reference documentation.