What are the options for launching a script app, without running it from the editor?

Question

What are the options for launching a script app, without running it from the editor?

105 views Asked by Cristian Cris At 24 July 2022 at 18:16

I saw some examples, but I could not understand how they work and how to add the script to be launched on Google Doc. I would like to be able to launch the script of a personal function, without having to enter the editor and click run. As it will be shared with colleagues, I would like to avoid that by mistake they delete the data from the script. Are there any alternatives? It would be to put the startup in the sidebar or in the menu. And also an explanation of how the operation takes place, and how to connect the script.

Original Q&A

There are 2 answers

TheWizEd On 24 July 2022 at 22:26

Yuri's solution shows some of the basics of using a sidebar. I've expaned on that to show how to access text within the Google Doc.

I'm using templated HTML to seperate HTML from CSS from javascript. Notice in the HTML_SideBar.html file the use of the include commands. This pulls different files together to form the entire page and then using html.evaluate() later the page is ready to display.

First you need the sidebar.

HTML_SideBar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('CSS_SideBar'); ?>    
  </head>
  <body>
    <input id="testInput" type="text"><br>
    <input id="insertText" type="button" value="Insert Text" onclick="insertTextOnClick()"><br>
    <input id="getText" type="button" value="Get Text" onclick="getTextOnClick()">
    <?!= include('JS_SideBar'); ?>    
  </body>
</html>

Next is the

CSS_Sidebar.html

<style>
  input {
    font-size: large;
  }
</style>

Then there is the javascript used by the HTML page

JS_SideBar.html

<script>
  function insertTextOnClick() {
    try {
      let text = document.getElementById("testInput").value;
      google.script.run.insertText(text);
    }
    catch(err) {
      alert("Error in insert text: "+err);
    }
  }
  function getTextOnClick() {
    try {
      google.script.run.withSuccessHandler(
        function(text) {
          document.getElementById("testInput").value = text;
        }
      ).getText();
    }
    catch(err) {
      alert("Error in get text: "+err);
    }
  }
</script>

All of this requires the server side code to display the sidebar and interact with the document from the client (browser).

Code.gs

function onOpen() {
  let ui = DocumentApp.getUi();
  let menu = ui.createMenu("Side Bar");
  menu.addItem("Show SideBar","showSideBar");
  menu.addToUi();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function showSideBar() {
  try {
    let html = HtmlService.createTemplateFromFile("HTML_SideBar");
    DocumentApp.getUi().showSidebar(html.evaluate());
  }
  catch(err) {
    Logger.log("Error in showSideBar: "+err);
  }
}

function insertText(text) {
  try {
    let cursor = DocumentApp.getActiveDocument().getCursor();
    if (cursor) {
      // Attempt to insert text at the cursor position. If the insertion returns null, the cursor's
      // containing element doesn't allow insertions, so show the user an error message.
      let element = cursor.insertText(text);
      if( !element ) {
        DocumentApp.getUi().alert('Cannot insert text here.');
      }
    }
    else {
      DocumentApp.getUi().alert('Cannot find a cursor.');
    }
  }
  catch(err) {
    Logger.log("Error in insertText: "+err);
  }
}

function getText() {
  try {
    var selection = DocumentApp.getActiveDocument().getSelection();
    // If nothing is selected show the user an error message
    if (selection) {
      let text = "";
      var rangeElements = selection.getRangeElements();
      rangeElements.forEach( rangeElement => {
          let element = rangeElement.getElement().asText().getText()
          text = text+element;
        }
      )
      return text;
    } else {
      DocumentApp.getUi().alert('Nothing is selected.');
    }
  }
  catch(err) {
    Logger.log("Error in getText: "+err);
  }
}

If you try to run this from the menu item it will expect you to authorize the use of the various Google services involved in the process.

Follow these steps to authorize the script.

Refernces

**Yuri Khristich** · Accepted Answer · 2022-07-24T20:03:03+00:00

If you want a sidebar it can be done this way:

Make two files in Script Editor: 'Code.gs' and 'sidebar.html'

Code.gs

function onOpen() {
  DocumentApp.getUi().createMenu('️ Scripts')
  .addItem('Show sidebar', 'launchSideBar')
  .addToUi()
}

function launchSideBar() {
  DocumentApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('Sidebar Title'))
}

function hello() {
  DocumentApp.getUi().alert('Hello!'); // just an example, you can put your code here
}

sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="button" value="Hello" onClick="google.script.run.hello();" />
  </body>
</html>

After reload the document it will give the menu 'Scripts' and command 'Show sidebar'

After click on the command it will show the sidebar with the button 'Hello'

Button Hello will run the function hello().

Update

But actually, since you have to make a custom menu to show the sidebar anyway, it makes sense don't use a sidebar at all and use a custom menu only.

In this case you don't need the file 'sidebar.html' and your 'Code.gs' will look like this:

function onOpen() {
  DocumentApp.getUi().createMenu('️ Scripts')
  .addItem('Hello', 'hello')
  .addItem('Bye-bye', 'bye')
  .addToUi()
}

function hello() {
  // just an example, you can put any code here
  DocumentApp.getUi().alert('Hello!'); 
}

function bye() {
  // just an example, you can put any code here
  DocumentApp.getUi().alert('Bye!'); 
}

// etc

It will get you the menu 'Scripts' with the commands 'Hello' and 'Bye-bye' that run the functions hello() and bye() respectively.

TechQA.

What are the options for launching a script app, without running it from the editor?

There are 2 answers

Related Questions in GOOGLE-APPS-SCRIPT

Related Questions in GOOGLE-DOCS

Related Questions in GOOGLE-EXPERIMENTS

Popular Questions

Popular Tags

Trending Questions