Code gs:
// code.gs
function showSidebar() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('Sidebar')
.setTitle('My Sidebar');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('DialogBox')
.setWidth(400)
.setHeight(500);
SpreadsheetApp.getUi().showModalDialog(html, 'DialogBox');
}
function triggerSidebarFunction() {
// This function can be used to trigger something in the sidebar
const ui = SpreadsheetApp.getUi();
// Optionally, you can call a client-side function in the sidebar
//ui.alert("Test triggered in Sidebar!");
// Return a message to the client-side (DialogBox.html)
return "Test triggered in Sidebar!";
}
// Function to trigger a client-side function in the sidebar
function triggerSidebarActionFromServer() {
// Use google.script.run to call the client-side function in the sidebar
const htmlOutput = HtmlService.createHtmlOutput('<script>google.script.host.triggerSidebarAction();</script>');
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Triggering Sidebar Action');
}
Sidebar.html:
<!-- Sidebar.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function openDialog() {
google.script.run.showDialog();
}
// Function to handle updates from the server
function handleUpdate(message) {
alert(message); // Display the message in an alert
}
// Function to be triggered by the server
function triggerSidebarAction() {
alert("Sidebar action triggered!");
}
</script>
</head>
<body>
<button onclick="openDialog()">Open Dialog</button>
</body>
</html>
DialogBox.html:
<!-- DialogBox.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function triggerTest() {
// Call a server-side function to trigger something in the sidebar
google.script.run.withSuccessHandler(function(response) {
// Optionally, handle the response from the server
console.log(response); // Log the response to the console
}).triggerSidebarFunction();
// Close the dialog box after triggering the test
google.script.host.close();
}
</script>
</head>
<body>
<button onclick="triggerTest()">Trigger Test</button>
</body>
</html>
LinkedIn
Twitter
