HTML with CSS and JS files separation with library function

[ludovic....@gmail.com]

I know that it uses HtmlService to render userforms from HTML codes and that there is no native ways to write JS and CSS codes in separate files.

There is a trick to use a PHP-like function such as

//

function include(file : string) {

    return HtmlService.createHtmlOutputFromFile(file).getContent();

};

and deal with the CSS and JS codes as HTML ones..

I think it makes sense to keep such functions in an external library which I name as library, right?

I I write the following code in a HTML file (where Userforms/ is a folder which includes client-css.html and client-js.html and other stuffs).

<!-- <?!= library.include("Userforms/client-css") ?> -->

..

<!-- <?!= library.include("Userforms/client-js") ?> -->

1 . Why comments are ignored in this case? (I only added them because it makes me wondering..)

2. it seems that the include function in the library library is only looking for the html files in the library project, but not in the calling project?

Exception: No HTML file named Userforms/client-css was found. 

Thanks for any insights!

[Alan Wells]

If I understand correctly,  your goal to be able to use the same client side JS and CSS "files" in multiple different Apps Script apps.

And the strategy that you are considering is to put those reusable files into a library.

But you need a way to retrieve the content from the library.

An Apps Script file is not structured to have folders.

It is possible to show groupings of files in a code editor, in "folders" but my understanding is that the files in an Apps Script file don't really get saved to folders.

If you were using something like text/json files to store code on Google Drive, that's different, but then you'd need to use the Google Drive API or Apps Script Drive service.

A library is nothing but a different Apps Script file than the Apps Script file that is using the library.

Apps Script files are basically JSON files.

I haven't provided a solution for you, but at the least hopefully we can get some clarity about what is possible.

[Andrew Roberts]

When you say folders are you meaning you've got the chrome extension installed  that lets you organise your files into folders in the old online editor?

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/bf0d7e9a-a39b-4076-b32e-20b711bacee1n%40googlegroups.com.

[ludovic....@gmail.com]

Thanks for your replies.

No, my question was about the include function which I don't want to rewrite in all of my projects. Nevertheless, it seems that it causes an issue as it need the specified file in the calling project an not the library one..

 I agree that it wouldn't be the end of the word as it only represents 3 lines of code, but I believe that is function is sufficiently basic to be shared from a library. I will probably also end un with many other functions with will be identical in my projects.

I don't use Chrome, but Edge. I didn't know that there where extensions to manage scripts into folder. I installed an extension to change the syntax color highlighting though. Actually, I found no way to add folders from the online editor, but folders are created as they are in clasp which is rather handy. 

[Alex]

I suppose this depends of a HtmlService context.

Try something like this in your lib

/**

 *

 * @param {string} filename

 * @param {GoogleAppsScript.HTML.HtmlService} hs

 */

function include(filename, hs) {

  return (hs || HtmlService).createHtmlOutputFromFile(filename).getContent();

}

In your projects

function test(){

  Logger.log(Lib.include('Userforms/client-css', HtmlService));

}

If your lib contains the file 'Userforms/client-css' then you can

  Logger.log(Lib.include('Userforms/client-css')); // With the default context

[Alex]

Be careful I'm not sure that you can mix contexts in one invoke.