You can customize and modify the animations of your Awesome Table apps. This article explains how to insert JavaScript code from your spreadsheet to animate your content dynamically.
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
Live example (Card app)
Click the MORE/HIDE button to show or hide the project description and toggle the text on the button.
Create and set up your JavaScript template
Create the template sheet
1. Click the Add Sheet button to insert a blank sheet.
1. Click the New sheet button to insert a blank sheet.
2. Rename the new sheet. In our example, we named it Template.
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.
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.
 |
 |
You can also copy the example data source that contains the datasheet, HTML code, and CSS that works with this example.
Comments
5 comments
Hi, first-of-all you guys are awesome and I appreciate your work, however, I'm struggling to use JQuery for Card-View (is JQuery even compatible?). Please respond as soon as possible :)
Hi Jacalph Lamarque.
JQuery is beyond Awesome Table's scope of support.
Should you need assistance with the core functionality of Awesome Table, please don't hesitate to reach out.
- Randy
Dear Awesome Table support!
I am using Google forms with a field where the user can upload one or more files. When this form is submitted, Google forms mechanism upload the files to an specific folder in Google Drive and stores the file names in a row cell separated by semicolon.
Here comes my question to Awesome Table: Is it possible to use JavaScript to use a Split function, for example, to separate the files names and then display them in the panel using <img> html tag?
I am using the type of view that I send attached with very success and I would like to insert the images in the right panel where I display the information details( in portuguese: "Detalhamento das Informações").
Is it possible?
Thanks a lot,
Fernando
Is it possible to use iframe tag in the template? in order to display a page with few text inside the column?
Hi,
Could you please create a ticket on our support contact form:
https://support.awesome-table.com/hc/en-us/requests/new
Thanks
Please sign in to leave a comment.