The following code is a mixture of Google Apps Script, JavaScript, HTML and jQuery with the purpose of creating a HTML dialogue box in a Google Sheet that will seamlessly transition between 2 pieces of text at a click of a button.
This was developed as part of an Add-on I built where I needed a welcome page that contained a continue button for the user to click. Rather than having the box close and a new one open however (an action which looked very poor to see) I wanted the existing box to remain open and my new set of text to take it's place.
Apps Script Code
Firstly we will create our modal dialogue box that will be triggered from a Menu item in a Google Sheet and presented via the user interface:
var ss = SpreadsheetApp.getUi();
var html = HtmlService.createTemplateFromFile('welcomeForm')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(280)
.setWidth(450);
ss.showModalDialog(html, ' ');
Next we create our menu item that will trigger the above dialogue box when we select it:
SpreadsheetApp.getUi()
.createMenu('Custom')
.addItem('Display HTML', 'openHTML')
.addToUi();
HTML/jQuery Code
Now we create a HTML file in the Script Editor and start to populate it with our content and jQuery feature. Let's start by bringing in the jQuery CDN before our <head> tag:
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
Moving down to the <body> we start to piece together our content, remembering to use div tags to section everything off so we can control it via jQuery later on:
<!-- Create a 'container' div to wrap everything within for jQuery to work. -->
<div id="container">
<!-- Text enclosed in Heading 1 style tags. -->
<h1>Welcome everybody</h1>
We will create a Form section next as that is what I originally had for the user to enter some information:
<!-- Create HTML Form. -->
<form id="welcomeForm" name="welcomeForm">
<!-- Text enclosed in Heading 2 style tags. -->
<h2>Welcome</h2>
<!-- Add text enclosed in Paragraph tags. -->
<p>This is the first section of text we want to display by default.</p>
<!-- Create a button that calls the Function 'showNextText' further down this page -->
<input type="button" value="Continue" id="continue" name="continue" onClick="showNextText()" />
</form>
Finishing this with a button allows us to trigger the transition to swap out the text we want to display. So next we create another section of text following the principles above and then move down to after the </body> tag for our scripting code to handle the transition. We start with the jQuery that will run once the page has loaded and hide our second section of text (as we only want this to appear on our button click):
$(document).ready(function() {
$("div #nextText").hide()
})
So our section of HTML within the div tag 'nextText' is hidden when the dialogue box first appears. Now clicking our button will trigger the next Function we assigned it that will swap over the content on show:
function showNextText(){
$("div #welcome").hide() // hide anything inside of 'welcome' div tag
$("div #nextText").show() // show anything inside of 'nextText' div tag
}
And that provides us with a smooth transition!
Download
Show/hide sections of HTML with jQuery in a Google Sheet download (please use 'Overview' > 'Make a copy' for your own version).
| /* | |
| Create Menu item in Google Sheet | |
| */ | |
| function onOpen() { | |
| SpreadsheetApp.getUi() | |
| .createMenu('Custom') | |
| .addItem('Display HTML', 'openHTML') | |
| .addToUi(); | |
| } | |
| /* | |
| Create initial HTML form. | |
| */ | |
| function openHTML() { | |
| var ss = SpreadsheetApp.getUi(); | |
| var html = HtmlService.createTemplateFromFile('welcomeForm') | |
| .evaluate() | |
| .setSandboxMode(HtmlService.SandboxMode.IFRAME) | |
| .setHeight(280) | |
| .setWidth(450); | |
| ss.showModalDialog(html, ' '); | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <!-- Add link to jQuery CDN (slim minified): https://code.jquery.com/ so that we can use it | |
| in this HTML page --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" | |
| integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> | |
| <head> | |
| <base target="_top"> | |
| </head> | |
| <body> | |
| <!-- Create a 'container' div to wrap everything within for jQuery to work. --> | |
| <div id="container"> | |
| <!-- Text enclosed in Heading 1 style tags. --> | |
| <h1>Welcome everybody</h1> | |
| <!-- Create a 'welcome' div to be able to call and animate this section via jQuery. --> | |
| <div id="welcome"> | |
| <!-- Create HTML Form. --> | |
| <form id="welcomeForm" name="welcomeForm"> | |
| <!-- Text enclosed in Heading 2 style tags. --> | |
| <h2>Welcome</h2> | |
| <!-- Add text enclosed in Paragraph tags. --> | |
| <p>This is the first section of text we want to display by default.</p> | |
| <!-- Create a button that calls the Function 'showNextText' further down this page --> | |
| <input type="button" value="Continue" id="continue" name="continue" onClick="showNextText()" /> | |
| </form> | |
| </div> | |
| <!-- Create a 'nextText' div to be able to call and animate this section via jQuery. --> | |
| <div id="nextText"> | |
| <!-- Create HTML Form. --> | |
| <form id="nextForm" name="nextForm"> | |
| <!-- Text enclosed in Heading 2 style tags. --> | |
| <h2>Great work</h2> | |
| <!-- Add text enclosed in Paragraph tags. --> | |
| <p>This second piece of text has now seamlessly replaced the first.</p> | |
| </form> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| /* Main JQuery Function that is called on page load. The '$' represents JQuery | |
| We call the div by its 'id' (from the above webpage 'body') and then choose to | |
| show/hide that section of text on the webpage. Hence clicking a button could reveal | |
| the next section of text without rendering a new webpage. */ | |
| $(document).ready(function() { | |
| // Handler for .ready() called. | |
| $("div #nextText").hide() | |
| }) | |
| /* | |
| Function to run on button-click that hides some divs and shows others - hence | |
| text appears/disappears on the page without creating an entirely new one. | |
| */ | |
| function showNextText(){ | |
| $("div #welcome").hide() // hide anything inside of 'welcome' div tag | |
| $("div #nextText").show() // show anything inside of 'nextText' div tag | |
| } | |
| </script> | |
| </html> |
No comments:
Post a Comment