Create a copy to clipboard button in Sidebar using Google's `Apps Script`

Question

Is there a way to create a copy to clipboard button in Sidebar using Google's Apps Script?

My current code is the following, but the copy button is not working:

function createCalendarEvent() {
  
    var html = HtmlService.createHtmlOutput()
      .setTitle("Πληροφορίες για Ημερολόγιο")
      .setContent('<div><p id="item-to-copy">Test</p>' + '\n\n<button onclick='+"copyToClipboard()"+'>Copy</button></div>')
      var ui = SpreadsheetApp.getUi(); // Or DocumentApp or SlidesApp or FormApp.
      ui.showSidebar(html);
}

function copyToClipboard() {
    const str = document.getElementById('item-to-copy').innerText;
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
   

document.body.removeChild(el); }

The second function is javascipt.

Can you help me please?

Edit When I click F12 on the browser, I get the following error:

Uncaught ReferenceError: copyToClipboard is not defined
    at HTMLButtonElement.onclick (userCodeAppPanel:1)
onclick @ userCodeAppPanel:1

Answer 1

Modification points:

• From The second function is javascipt., in your script, if copyToClipboard() is put to the HTML file of the script editor, in that case, html in your script doesn't include the function. By this, such error occurs.
• Or, if copyToClipboard() is put to the Google Apps Script file of the script editor, copyToClipboard() cannot be run from HTML side. By this, such error occurs.

In order to run copyToClipboard(), I would like to propose the following modification.

Modified script:

HTML&Javascript side:

Please copy and paste the following script to the HTML file of the script editor in Google Apps Script project. The filename is index.html.

<div>
  <p id="item-to-copy">Test</p>
  <button onclick="copyToClipboard()">Copy</button>
</div>
<script>
function copyToClipboard() {
  const str = document.getElementById('item-to-copy').innerText;
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}
</script>

Google Apps Script side:

Please copy and paste the following script to the Google Apps Script file of the script editor in Google Apps Script project.

function createCalendarEvent() {
  var html = HtmlService.createHtmlOutputFromFile("index").setTitle("Πληροφορίες για Ημερολόγιο")
  var ui = SpreadsheetApp.getUi(); // Or DocumentApp or SlidesApp or FormApp.
  ui.showSidebar(html);
}

• When createCalendarEvent() is run, the script loads the HTML & Javascript from index.html file.

Note:

• If you want to use setContent, you can also use the following scripts.

  • HTML&Javascript side:

      <script>
      function copyToClipboard() {
        const str = document.getElementById('item-to-copy').innerText;
        const el = document.createElement('textarea');
        el.value = str;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
      }
      </script>
    

  • Google Apps Script side:

      function createCalendarEvent() {
        var javascript = HtmlService.createHtmlOutputFromFile("index").getContent();
        var htmlData = `<div><p id="item-to-copy">Test</p><button onclick="copyToClipboard()">Copy</button></div>${javascript}`;
        var html = HtmlService.createHtmlOutput()
        .setTitle("Πληροφορίες για Ημερολόγιο")
        .setContent(htmlData)
        var ui = SpreadsheetApp.getUi(); // Or DocumentApp or SlidesApp or FormApp.
        ui.showSidebar(html);
      }
    

References:

• Class HtmlService
• HTML Service: Create and Serve HTML