2

What are HTML templates?

HTML templates contain the HTML code that gives framework or structure to your app and the relevant {{markers}} that make your template dynamic. A template enhances your Awesome Table app and improves the user experience:

• Use HTML code to specify the layout or the way you want to present your data
• Use markers if you also want to make your template dynamic: {{markers}}

{{markers}} (template markers) are variables that correspond to column-headers in your Google Sheets or Microsoft 365 datasheet. The data associated with each {{marker}} is retrieved and displayed accordingly.  

HTML template with HTML code and {{markers}}. For every row of your data, the template is inserted with the value from the Deadline, Status, Image, FileLink, Title, and Owner columns.

• Google Sheets
• Microsoft 365

warning To ensure the best performance, we recommend not using any HTML within your datasheet (for example, elements such as <strong>, <ul>, <li>, specifying cases, or IDs.)

Live example

Copy this template

 Creating and setting up your HTML template

1. Create the customizable column for your template

In your datasheet (labelled Data in our example), insert a new column for the HTML template and rename it (Layout in our example). Since we’re creating a Cards app demo, specify the CardsContent keyword in the second row.

• Google Sheets
• Microsoft 365

warning Make sure that the Awesome Table editor’s data source range is updated when new columns are added to your datasheet. In our example, the data range should indicate “A1:O”.
  

2. Set up the HTML template

• Google Sheets
• Microsoft 365

Then, rename as needed (Template in our example).

• Google Sheets
• Microsoft 365

Enter the same column-header designated as the HTML template-column in our datasheet as the new sheet’s name (‘Layout’ in cell A1). This is the HTML template that Awesome Table will use for the content of the datasheet.

Then, enter the HTML code & {{markers}} that will be used in cell A2. We gave our Cards app a simple structure to house dynamic markers with corresponding static labels in our example.

• Google Sheets
• Microsoft 365

Copy to clipboard

<p>Deadline: <strong>{{Deadline}}</strong></p>
<p> Status: <strong>{{Status}}</strong></p>

<img src="{{Image}}" />

<hr>

<a href="{{FileLink}}">{{Title}}</a>
<p>Owner: <strong>{{Owner}}</strong></p>

Completed HTML template with the {{markers}} highlighted.

• Google Sheets
• Microsoft 365

Here’s how our app will look like after completing the HTML template:

Copy this template