<head>
<?!= include('style') ?> <!-- MUST be in <head> -->
</head>
Best at bottom of <body> or wrapped in window.onload if in <head>.
<body>
...
<?!= include('navigate') ?>
</body>
Put them where you want them rendered.
<!-- Inside a section or modal -->
<div class="toolbar">
<?!= include('logout_button') ?>
</div>
✅ CSS → <head> only
✅ JS → <body> bottom preferred, <head> with caution
✅ HTML → wherever visually/logically appropriate
⚠️ Avoid putting <script> includes before the DOM is ready unless wrapped
// Serve the main HTML template
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setTitle("Sample Web App")
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // allow embedding if needed
}
// Include partials like style, logout_button, etc.
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
// Reload the Index template (e.g., after logout)
function loadTemplate(name) {
return HtmlService.createTemplateFromFile(name).evaluate().getContent();
}
// Load dynamic page sections (e.g., main area routing)
function loadHtmlPartial(pageName) {
try {
return HtmlService.createHtmlOutputFromFile(pageName).getContent();
} catch (e) {
return `<p style="color:red;">Page "${pageName}" not found.</p>`;
}
}
<html>
<head>
<base target="_top">
<!-- ✅ CSS should always be in <head> -->
<?!= include('style') ?>
<!-- ✅ Optional: JS in <head> only if needed early, and wrapped -->
<script>
window.addEventListener('DOMContentLoaded', () => {
console.log("DOM is ready (early script)");
});
</script>
</head>
<body>
<!-- ✅ Visible page content -->
<div class="container">
<h1>Welcome</h1>
<p>This is the home screen.</p>
<!-- ✅ Inline reusable component like a button -->
<div>
<?!= include('logout_button') ?>
</div>
<!-- ✅ Insert conditional content here -->
<div id="mainArea"></div>
</div>
<!-- ✅ Best location for JS: bottom of <body> -->
<?!= include('navigate') ?>
<?!= include('utilities') ?>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 2em;
}
.btn {
padding: 10px 20px;
margin: 5px;
border: none;
cursor: pointer;
font-size: 14px;
}
.btn.red { background-color: #e74c3c; color: white; }
</style>
<button class="btn red" onclick="logout()">Log Out</button>
<script>
function navigate(page) {
google.script.run.withSuccessHandler(function(html) {
document.body.innerHTML = html;
}).loadHtmlPartial(page);
}
</script>
<script>
function logout() {
sessionStorage.removeItem('EMP_ID');
google.script.run.withSuccessHandler(html => {
document.open();
document.write(html);
document.close();
}).loadTemplate('Index');
}
</script>