How can I use a Library, which displays drafts and sends email into a Container-Bound Project?

Question

I have 2 Google Apps Script Projects.

1. SheetsLib - This is a Library which I created, it contains my go-to functions.
2. TestFile - This is a container-bound script, which utilizes the SheetsLib.

SheetsLib contains the following functions which are relevant for this question:

1. displayDraftsSelector - Displays the draftSelector Html Page in the Sidebar.
2. draftSelector - Html file, which contains a js script as well that calls back-end function to populate a <select>
3. getDraftsArr - Server function which returns all gmail drafts from the user.

The SheetsLib function(s) do work, i.e. I have test functions to confirm that. My goal is to enhance this library, so that I can use it in multiple projects with the functionality to allow a user to choose an existing Gmail Draft and send it to selected users (in the active Spreadsheet).

PROBLEM In my new container-bound script, which has access to the Library, I can only show the sidebar but not call a back-end function (which resides in the Library) when I press a button in sidebar:

1. I load the view successfully using displayDraftsSelector() which shows the view draftSelector. This is all functionality from the Library.
2. Then, the view calls the getDraftsArr() and this is what gets the error. But that function does exist in the Library (and it does work as intended).

The following is the error I see in the console when the sidebar loads:

Uncaught TypeError: google.script.run.withSuccessHandler(...).withFailureHandler(...).getDraftsArr is not a function

What should happen ideally is that, the back-end function getDraftsArr() is called and its result populates the select item. Then the user can select one draft in the sidebar. When the user confirms using a button, the active rows are the recipients. Overall, this all works when I copy-> paste, but what cannot figure out is how to keep the functionality in a library.

The following is the function located in the Library which I am trying to call.

    // back-end in Library Project
    function getDraftsArr(){
      let output = [];
      const messages = GmailApp.getDraftMessages();
      
      messages.forEach( message => {  
        output.push({
          id: message.getId(),
          subject: message.getSubject()
        });
      });
      
      return JSON.stringify(output)  
    }

The following is in the back-end of the library

    // front-end in Library Project    
    <select id="draftsSelect"></select>
 
    <script>
    function getDrafts(){
    const draftsSelect = document.getElementById("draftsSelect");
    google.script.run
      .withSuccessHandler( updateDrafts )
      .getDraftsArr();         
              
    function updateDrafts( drafts ){                
      var options = "";
      var draftsParsed = JSON.parse(drafts);        
                  
      draftsParsed.forEach( draft => {                   
        options += "<option value='" + draft.id + "'>" + draft.subject + "</option>";
      });
      draftsSelect.innerHTML = options;        }                          
    }
    </script>

Answer 1

If you can create a dummy function. Then the dummy function to create is this one:

function executeLibraryFunctionsByName(funcname) {
  libraryname[funcname]();
}

This function will allow you to call all of your library functions by name. I'm not sure that this will work if your libary name has a space in it. In that case change it's name. Note: don't put quotations around the libraryname. Just write the libaryname with no quotes and I would avoid spaces and it becomes the 'this' for your function.

As an example I have a library xyzSUS1 and I can use a button like this:

<input type="button" value="test" onClick="google.script.run.callLibraryFunctionsByName('selectColumnsSkipHeader');" />

in my sidebar to run the library function xyzSUS1.selectColumnsSkipHeader() .

the command in function declaration in my gs code is this:

function callLibraryFunctionsByName(funcname) {
  xyzSUS1[funcname]();//the this for funcname because xyzSUS1
}

Answer 2

Thanks to @Rubén for the link to this: stackoverflow.com/q/59271952/1595451

Basically the solution was to create a function in my container-script with the same name as the back-end function which are in the library, which then call the library.

So in my Library I had getDraftsArr(){}before, and now I added the following to my container-bound project:

function getDraftsArr(){
  return SheetsLib.getDraftsArr()
}

That did the trick.