JavaScript and Dynamic Data

The Template editor provides an HTML and a CSS tab but no JavaScript one. You can still use JavaScript though!

To use JS in your Templates, you can open a script tag and start working.

HTML

<script>
  // Write some JavaScript in here.
</script>

Accessing the Document payload

To make using JavaScript in your Template more powerful, you can access your Document payload as a JavaScript object.

Start by enabling JavaScript injection for your Template in its Settings tab:

Let's say you defined your payload as follows:

JSON

{
  "movie": {
    "title": "12 Monkeys",
    "year": 1995
  }
}

You can now access the payload data this way:

HTML

<script>
  const movieTitle = $docPayload.movie.title;
  const titleDiv = document.getElementById('mt');
  titleDiv.textContent = movieTitle;
</script>

<div id="mt"></div>

Data access limitation with JavaScript

When accessing data with JS, you cannot insert it using the {{movieTitle}} syntax. This syntax is specific to Liquid and is thus executed way before your JS code.

That being said, you can generate JS code using Liquid:

<script>
  const movieTitle = "{{movieTitle | upcase}}";
</script>

Related articles

Debugging your JavaScript