1

I have js library which has some inbuilt functionalities required for our application. Now i want to import my js library and its css files in Gmail addon. After that i want bind a function to that button id so that whenever the button is clicked function in my library executes.

How can i do that? Please see sample code

As per the sample code myLib.js has function myFunc() which takes component id and url to be opened. So i created button and binding myFunc to it. How can i do the same thing using googlescript for gmail addon.

Thanks in Advance

   <head>
      <script src="https://*/app.bundle.js"> </script>
      <script src="https://*/app.bundle.css"> </script>
      <script src="https://*/myLib.js"> </script>
   </head>
   <body>
     <button id="app">Clickhere</button>
     <script>
        myFunc('#app',URL);
     </script>
   </body>
vinay narayana
  • 197
  • 1
  • 2
  • 10

1 Answers1

1

Gmail Add-ons (if what you are talking about is indeed a Gmail Add-on) use Card-based interface and cannot be created with custom html and 'css'. Once built such an interface, create a function that executes your library's function:

/**
 * Triggers library function;
 * @param {Object} e event object;
 */
function myTrigger(e) {
  //access event object's params;
  var parameters = e.parameters; 
  var id  = parameters.id;
  var url = parameters.url;      

  //you can reference lib functions by prepending its name;
  myLibrary.myFunc();
}

Import your library by clicking on the project's command bar button Resources, then choose Libraries and import your project (assuming your library can be converted into an apps script project, if not, there is not much that you can do). Besides, Google discourages from using libraries in Add-ons.

You can, of course, load the external non-GAS library via UrlFetchApp.fetch() by using eval() (ctrq have a great tutorial on how to do that), but you are probably aware that eval() brings security risks to your app.

Then, configure an Action on a target Ui element (most likely a TextButton):

//...created a TextButton and wrote it into a var tb;

//create parameters object (aquire id and url however you want)
var parameters = {
 id  : '', 
 url : '' 
};

//reference Enum loadIndicator (only NONE or SPINNER currently);
var loadIndicator = CardService.LoadIndicator.SPINNER;

//create Action to set;
var action = CardService.newAction();
    action.setFunctionName('myTrigger'); //reference trigger function;
    action.setLoadIndicator(loadIndicator); //set a load indicator, if not invoked equals NONE;
    action.setParameters(parameters) //every key in this object are strings!;

//set Action to TextButton;
tb.setOnClickAction(action);
Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
  • Thanks for the response. I implemented as you said. But when i call Mylibrary.myFunc(). it is giving error like myFunc() was not found but it was loaded into myLibrary variable. I think the error is because we are loading the library file as. `var appCode = UrlFetchApp.fetch('https://*/app.bundle.js').getContentText(); var style = UrlFetchApp.fetch('https://*/app.bundle.css').getContentText(); var myLibrary = UrlFetchApp.fetch('https://*/myLib.js').getContentText();` as this. it was actually loading in string format. so i am unable to call myFunc in it. How can i load it as object ? – vinay narayana May 30 '19 at 06:04
  • if i do eval(UrlFetchApp.fetch('https://*/app.bundle.js').getContentText()); i am getting error like. **Missing name after . operator** – vinay narayana May 30 '19 at 06:22
  • @vinaynarayana - everything is OK with your loading procedure and eval() - please, make sure your library does not contain anything that apps script cannot parse (a big chunk of ES6) - e.g. classes, arrow functions (if not using typescript), etc. It parses a sample library absolutely fine. – Oleg Valter is with Ukraine May 30 '19 at 11:16