Enhancing HTML and Javascript Development in Script Editor of Google Apps Script: Overcoming Formatting Challenges
Despite the improved Google Apps Script IDE launched in April 2022, challenges arise for HTML and Javascript development. The Script Editor's built-in formatting for these languages proves insufficient, particularly for large Javascript codebases, potentially causing errors. This report proposes a solution to address this formatting issue and streamline development within the Script Editor.
The Google Apps Script Integrated Development Environment (IDE) Script Editor received a significant update on April 13, 2022, transforming it into a more modern and streamlined development experience. Ref This enhanced IDE empowers developers to create custom solutions that extend the capabilities of Google Workspace applications for their organizations.
While the Script Editor is a valuable tool for Google Apps Script development, it presents challenges when working with HTML and Javascript. Currently, HTML and Javascript development within the Script Editor occurs directly in HTML files. While the editor offers formatting capabilities, Javascript code formatting seems less robust compared to HTML formatting. This can lead to errors, especially when dealing with large Javascript codebases.
This report proposes a workaround for this specific issue. We will explore methods to effectively develop HTML and Javascript within the Google Apps Script Script Editor, ensuring proper Javascript code formatting to enhance development efficiency and reduce errors.
In this sample, in order to use HTML and Javascript, a dialog on Google Spreadsheet is used. So, please create a new Google Spreadsheet and open the script editor.
In this section, it explains the current issue. Please copy and paste the following script and HTML to the script editor.
function openDialog() {
const html = HtmlService.createHtmlOutputFromFile("index");
SpreadsheetApp.getUi().showModalDialog(html, "sample");
}<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="sample"></div>
<script>
const array = [["A1", "B1", "C1"],["A2", "B2", "C2"],["A3", "B3", "C3"]];
const div = document.getElementById("sample");
const table = document.createElement('table');
table.border = "1";
table.style.width = "100%";
table.style["border-collapse"] = "collapse";
for (let i = 0; i < array.length; i++) {
const tr = document.createElement('tr');
for (let j = 0; j < array[i].length; j++) {
const td = document.createElement('td');
const text = document.createTextNode(array[i][j]);
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
div.appendChild(table);
</script>
</body>
</html>When you run the function openDialog, a dialog is opened and you can see the following table in the dialog. You can see that HTML and Javascript work fine.
As the next step, when you see index.html, you can notice that the format of Javascript is not done and the readability is low. When this code is formatted by the script editor, it becomes as follows.
When the code is formatted, HTML can be correctly formatted. However, you can see that Javascript cannot be correctly formatted. I think that this situation is an issue for developing Javascript.
In this section, I would like to introduce a workaround for avoiding the above situation as a sample script 2. So, before you copy and paste the following script, please clear code.gs and index.html used in the above section once. And, please copy and paste the following script and HTML to the script editor.
function javascript_() {
const array = [["A1", "B1", "C1"],["A2", "B2", "C2"],["A3", "B3", "C3"]];
const div = document.getElementById("sample");
const table = document.createElement('table');
table.border = "1";
table.style.width = "100%";
table.style["border-collapse"] = "collapse";
for (let i = 0; i < array.length; i++) {
const tr = document.createElement('tr');
for (let j = 0; j < array[i].length; j++) {
const td = document.createElement('td');
const text = document.createTextNode(array[i][j]);
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
div.appendChild(table);
}
function openDialog() {
const html = HtmlService.createTemplateFromFile("index");
html.javascript = javascript_
.toString()
.match(/^function javascript_\(\) {([\s\S\w]*)}$/)[1];
SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");
}<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="sample"></div>
<script>
<?!= javascript ?>
</script>
</body>
</html>When you run the function openDialog, a dialog is opened and you can see the following table in the dialog. You can see the same result in the above section.
As the next step, when you see the current index.html and code.gs, you can notice that both formats are not done and the readability is low. When those codes are formatted by the script editor, it becomes as follows.
When index.html and code.gs are formatted, both files can be displayed with proper formatting, improving readability. Additionally, the JavaScript code functions correctly within the dialog.
As previously mentioned, the script editor can currently format Google Apps Script within the code.gs script file. This report leverages this functionality as a workaround. JavaScript is developed in the code.gs script file, and the developed code is then imported into the index.html HTML file. This workflow allows for the development of JavaScript code with proper formatting.
It's important to note that this workaround is not applicable if the JavaScript code includes syntax incompatible with the script editor. Please exercise caution in such scenarios.
- The top abstract image was created by giving this report to Gemini.