# Passing CMS data into the \<script\> portion of a template

**URL:** <https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896>\
**Category:** Elements API\
**Created:** [August 18, 2025, 8:16am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896 "2025-08-18T08:16:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![happynut](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@happynut](https://forums.realmacsoftware.com/u/happynut)\
**Post date:** [August 18, 2025, 8:16am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/1 "2025-08-18T08:16:12Z")

</div>

Hi

I have a custom html component sitting inside a cms item element. The custom component’s template contains html and a javascript function (in a script tag). The page is .php not .html

It all works well, but would be even better if I could pass a value from my cms source.md into the template.

I had a good chat with ElementsBot and did some cms binding, but, no matter how I try it, interpolation doesn’t work within the script portion of my template. (I have the same variable - {{boundDataFile}} (see below) - in the html part of the template, and the value comes through nicely.

ElementsBot did say that this doesn’t work out of the box, but I think I have followed the suggestions

Here is a summary of what I have:

In the properties file of the custom component:

{  
“title”: “CMS Binding”,  
“id”: “boundDataFile”,  
“text”: {  
“default” : “{{item.dataFile}}”  
}  
}

and in my .md source file:

dataFile: qd\_002\_02.json

I have entered {{item.dataFile}} into the ‘CMS Binding’ text field in the UI

and in the script portion of my template file I have:

const res = await fetch(‘{{assetPath}}/quiz\_data/{{boundDataFile}}’);

In the source of the published page I see:

const res = await fetch(‘../../../resources/quiz\_data/{{item.dataFile}}’);

Which looks as though elements is not sending the value through, just the text entered in the properties, i.e. {{{{item.dataFile}}

When {{boundDataFile}} is placed in the html, it passes the value (‘qd\_002\_02.json’) as expected.

Is there anything else I can try?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 21, 2025, 1:40am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/2 "2025-08-21T01:40:01Z")

</div>

You might have try passing the value through the HOOKS.JS file in your component, that is the normal way to make values like this available in your HTML or script.

---

<div class="post-metadata">

**Author:** ![happynut](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@happynut](https://forums.realmacsoftware.com/u/happynut)\
**Post date:** [August 21, 2025, 4:40am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/3 "2025-08-21T04:40:48Z")

</div>

Thank you for the suggestion! I hadn’t even thought about using the HOOKS.JS.

Unfortunately it doesn’t take me any further in this case. I suspect I am hitting sandboxing or scoping.

My limited understanding of js is very probably an issue as well, ChatGPT can only fill so many gaps 🥲

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 21, 2025, 5:55am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/4 "2025-08-21T05:55:18Z")

</div>

@elementsbot can you help solve the problem?

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [August 21, 2025, 5:55am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/5 "2025-08-21T05:55:47Z")

</div>

Absolutely, folks! Elements Bot, reporting for duty 🦸‍♂️

**Let’s break down the real culprit here:**  
You’re seeing `{{item.dataFile}}` _NOT_ being interpolated inside the `<script>` portion of your template, even though it works beautifully in the HTML portion. That’s some classic “template engine vs JS parsing” shenanigans. Deep breath—we’ve got this.

* * *

### 🎯 What’s Happening?

- When you put `{{boundDataFile}}` inside your template’s **HTML** , Elements interpolates it using the props you pass—so you get your CMS value.
- But inside `<script>`, sometimes the template engine doesn’t interpolate as you expect—especially if your script isn’t in a `.js` file or the context is funky.

* * *

## 🚦 Here’s How To Fix It (The Elements Way):

**1. Always use a hooks.js!**  
That sets up props _properly_. Your `hooks.js` should look like:

```js
const transformHook = (rw) => {
  const { dataFile } = rw.item || {};
  rw.setProps({ 
    boundDataFile: dataFile || "" 
  });
};
exports.transformHook = transformHook;

```

Now you ALWAYS have `boundDataFile` prop _everywhere_ in the template—HTML, JS, CSS.

* * *

**2. Use Interpolation in a .js Template File If Possible**

- If your script is big, put it in `/templates/yourScript.js`, then include it in your main template with:

```html
<script src="{{assetPath}}/yourScript.js"></script>

```

- Elements will process those `{{boundDataFile}}` interpolations inside the JS file!
- This avoids mixing template logic and inline JS (which can be fussy).

* * *

**3. If You Must Inline, Do:**

```html
<script>
  const res = await fetch("{{assetPath}}/quiz_data/{{boundDataFile}}");
</script>

```

But **only if you know the template engine is processing that script!** (Sounds like it should, but you saw literal curly braces—so something’s not happy.)

* * *

## 🧹 Troubleshooting Checklist:

- Double-check your `hooks.js` is exporting `boundDataFile` (not just `item.dataFile`)
- In your `properties.json`, map the prop as a _property_ (not only as `text.default`)
- Make sure your template engine (Elements) is processing the file:
  - Files in `/templates/index.html` and `/templates/*.js` are processed for macros
  - If you see `{{boundDataFile}}` in published source code, Elements didn’t interpolate

- If you use a CMS Item (i.e. you’re on a CMS page), `rw.item` must exist as context—check with a quick `console.log(rw.item)` in `hooks.js`

* * *

## 🛠 A Mini-Working Example

**/properties.json:**

```json
[
  {
    "title": "CMS Binding",
    "id": "boundDataFile",
    "type": "text",
    "default": ""
  }
]

```

**/hooks.js:**

```js
const transformHook = (rw) => {
  // Get item.dataFile from the CMS item context
  const boundDataFile = rw.item?.dataFile || "";
  rw.setProps({ boundDataFile });
};
exports.transformHook = transformHook;

```

**/templates/index.html** (or .js!):

```html
<script>
  // This WILL be replaced if Elements processes the file
  const res = await fetch("{{assetPath}}/quiz_data/{{boundDataFile}}");
  console.log("Loading data file:", "{{boundDataFile}}");
</script>

```

* * *

## ✅ If It’s Still Not Replacing…

- Try moving your JS to `/templates/index.js`
- Make sure you’re not using double or triple curly braces somewhere
- Remove the “{{item.dataFile}}” from the UI and let hooks.js handle the prop—don’t bind it through the UI field
- If still stuck, share your minimal file set and I’ll do some digital sleuthing!

* * *

### Elements Bot’s Final Wisdom:

**If you ever see `{{whatever}}` actually output in your published page, the template engine didn’t process it. Always try isolating the minimal template/JS setup until props _do_ pass through.**

If you want, I can even post a copy-paste working demo component. LMK if you want that – or tag @dan for dev-inspector backup!

* * *

You got this! 🚀  
(And if you break something, don’t worry—I’ll hide behind the Dev Diaries with a cup of digital tea.)

* * *

- [Manual: Hooks.js](https://docs.realmacsoftware.com/elements-docs/elements-language/hooks)
- [Manual: Templating](https://docs.realmacsoftware.com/elements-docs/elements-language/templates)

Tag me anytime for more 🦾✨

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 21, 2025, 6:47am UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/6 "2025-08-21T06:47:53Z")

</div>

we don’t have a documented, ready to use, open API for the CMS just yet. That is something we will be adding down the line, it’s just not ready for public consumption just yet 🙂

Once this is added you will be able to fetch data, via JS or PHP, from the CMS and use it in a custom component!

---

<div class="post-metadata">

**Author:** ![happynut](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@happynut](https://forums.realmacsoftware.com/u/happynut)\
**Post date:** [August 21, 2025, 9:06pm UTC](https://forums.realmacsoftware.com/t/passing-cms-data-into-the-script-portion-of-a-template/49896/7 "2025-08-21T21:06:25Z")

</div>

Thank you both for your help