2

What are JavaScript templates?

JavaScript template let you add behaviors to your Awesome Table app. For example, you can:

• include dynamic changes (display dates and times, show or hide sections of a page) or updates to your content (update a block of text with input entered by users)
• manipulate and/or animate images and other HTML elements
• perform operations or form validation

JavaScript template

• Google Sheets
• Microsoft 365

Live example (Card app)

Click the MORE/HIDE button to show or hide the project description and toggle the text on the button.

Copy this template

Create and set up your JavaScript template

Create the template sheet

• Google Sheets
• Microsoft 365

2. Rename the new sheet. In our example, we named it Template.

• Google Sheets
• Microsoft 365

Set up the JavaScript template

Add a new column for the JavaScript template. You can specify what columns of your template sheet will hold the JavaScript template by having <script> as the column’s header.

You can try this with our example by copying and pasting the following JavaScript code to cell C2.

The JavaScript code below lets you show or hide the summary section containing the description, and this also toggles the text on the button.

Copy to clipboard

function hideShow(button) {
 //retrieving the two elements we want to hide and show on the press of the button
 const seeMoreDiv = button.parentNode.querySelector(".seemore");
 const placeholderDiv = button.parentNode.querySelector(".placeholder");
 //if the element is hidden, display it and update the text in the button
 if(seeMoreDiv.style.display == "none"){
 seeMoreDiv.style.display = "block";
 placeholderDiv.style.display = "none";
 button.innerHTML = "HIDE";
 }
 //if the element is visible, hide it and update the text in the button
 else{
 seeMoreDiv.style.display = "none";
 placeholderDiv.style.display = "block";
 button.innerHTML = "MORE";
 }
}

The JavaScript code above lets you show or hide the Summary section and toggles the text on the button.

warning Make sure that the Awesome Table editor’s Template sheet and Template range fields are updated, especially when you add new columns to your template sheet. Always click Update app to apply your changes.