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).
No comments:
Post a Comment