4

Since manipulating clipboard is forbidden in Google App, I want to find a workaround by using Clipboard.js library.

My questions are:

1. How should I import a Clipboard.js library to Google App Script?

2. And how to call the functions in other pages (eg. trying to call the function calculateWeight() from BMI.gs in index.html?

What I've tried:

I've tried to paste the source code of the Clipboard.js into a file called Clipboard.js.html and put everything inside the tag.

What I want achieve:

Copy a text string with a click on the "COPY" button.

>>what I want to achieve

I've spent a few hours looking for solutions but still can't find related info. Any help would be greatly appreciated. Thank you!

Forever Newbie
  • 67
  • 6

1 Answers1

3

Your script can have more than one html file, and per the HTML Services: Best Practices, you should have your HTML, CSS and (client side) Javascript in separate files. So in your case your index.html file will be all the HTML code and will have a couple lines added. It could start as shown below: 

<!DOCTYPE html>
<html>
  <head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>
    <?!= include('myCSS'); ?>
    <title>Give it a Title</title>
  </head>
  <body>
      ...
      All the Body stuff
      ...
  </body>
    <?!= include('myScript'); ?>
</html>

At the top of this is a line to include clipboard JS from a hosted location. I found that via a web search for clipboard.js. This is where I get access to the clipboard.js library There is a line right underneath this:

<?!= include('myCSS'); ?>

In a server side file (.gs file) I have the following so that I can include other HTML files from the one I load in my doGet() function:

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

I am loading the HTML in my doGet using this code to use Templated HTML:

function doGet(passed) {

  if(passed.parameter.festival && passed.parameter.year){
    passedParameter = passed.parameter.festival + ' ' + passed.parameter.year;
  }

  var result=HtmlService.createTemplateFromFile('index').evaluate()
        .setTitle('My Title')
        .setWidth(1285)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return result;
}

Under the File pull-down you create a new HTML file called myCSS and add your CSS there:

<style>
  h1 {
     color: #0F6B5E;
     font-size: 300%;
     text-align:center;
     vertical-align: middle;
     font-family: 'Raleway', sans-serif;
     font-weight:bold;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
  }
</style>

Create a new HTML file called myScript and add the screipt you want used in your HTML page here. This is the Client Side script as opposed to SErver Side script, which is all in the Script files. (HTML files will show the .html extension in the list of files while server side Script files will have .gs) If your calculateWeight() function is used to calculate and display items in the HTML page, then place it in this file:

<script>
  //Script to load after the page has loaded
  $(function() {
  google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
      });

  calculateWeight() {
    //code goes here
  }

function showMenuYear(menuItems) {
  var list = $('#optionListYear');
  var desiredValue = '<?!= passedParameter ?>';

  list.find('option').remove();  // remove existing contents

  list.append('<option value="-1">Select a Festival and Year</option>');

  for (var i = 0; i < menuItems.length ; i++) {
    list.append('<option value=' + menuItems[i].sheetrow + '>' + menuItems[i].fullFestival + '</option>');
    if (menuItems[i].fullFestival === desiredValue){
      list.val(menuItems[i].sheetrow);
    }
  }

  setFormList();

}
function setFormList() {
//    alert('In setFormList ');
//    alert($('#optionListYear').val());

  var replacement = document.getElementById("OverallGrid");
  replacement.innerHTML = "Retrieving Registrations...";

  if ($('#optionListYear').val() === "-1") {
//    if(passedData.year && passedData.festival){replacement.innerHTML = passedData.festival & " " & passedData.year;};
    replacement.innerHTML = "Select a Festival/Year above.";
    return;
  }
  google.script.run.withSuccessHandler(showRegistrationsTable).withFailureHandler(loadFailed).getValidRegistrations($('#optionListYear').val());
  }

  function loadFailed(error){
    var replacement = document.getElementById("OverallGrid");

    var displayMessage = "Error loading data: " + error.name + ' ' + error.message;

    if (error.message.includes("is missing (perhaps it was deleted?)") ) {
      displayMessage = "You do not have access to these registrations." 
    }

    replacement.innerHTML = displayMessage;

  }
</script>

In this code, the lines starting with google.script.run will run a Server Side function, passing a variable to the function if needed. If Successful, the Client side function defined in withSuccessHandler(successFunction) will be used with any returned data being passed. So in my example the showMenuYear(menuItems) function is run on the Client side with menuItems being set to the returned value from the Server side function getDropDownContent(). If the Server side returns an error, the loadFailed(error) function is executed. This all comes from the line:

google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
Karl_S
  • 3,364
  • 2
  • 19
  • 33