# Custom view templates with scripts

**URL:** <https://support.prodi.gy/t/custom-view-templates-with-scripts/302>\
**Category:** Uncategorized\
**Tags:** enhancement, done, front-end\
**Created:** [February 9, 2018, 10:25pm UTC](https://support.prodi.gy/t/custom-view-templates-with-scripts/302 "2018-02-09T22:25:42Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [February 20, 2018, 11:52am UTC](https://support.prodi.gy/t/custom-view-templates-with-scripts/302/6 "2018-02-20T11:52:46Z")

</div>

**Update:** All works pretty smoothly already! :🎉

![custom_js_poc](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/1X/8f7555773c209b5bdcd963d780de5de4b21025c9.gif)

The above example only needed the following `html_template` and `javascript` config:

```html
<button class="custom-button" onClick="updateText()">
    👇 Text to uppercase
</button>
<br />
<strong>{{text}}</strong>

```

```javascript
let upper = false;

function updateText() {
    const text = window.prodigy.content.text;
    const newText = !upper ? text.toUpperCase() : text.toLowerCase();
    window.prodigy.update({ text: newText });
    upper = !upper;
    document.querySelector('.custom-button').textContent = '👇 Text to ' + (upper ? 'lowercase' : 'uppercase')
}

```

Things I tested in the above example that already work:

- Dynamic update of the annotation task’s content in the HTML template.
- Keeping arbitrary state within the custom JavaScript – pretty rudimentary here, but could easily be expanded. (Still need to test ways to keep cross-task state.)
- Accessing elements in custom HTML components via the DOM – alternatively, I think you could also pass `this` to `updateText()`, but working with query selectors is often cleaner. (Nice plus: class names are unlikely to conflict with built-ins, because Styled Components mangles them when the Prodigy app is compiled.)

I’ve also added a `user_config` option to the config parameters passed in via the recipe and `prodigy.json`. This allows custom interfaces to refer to arbitrary config via `window.prodigy.config.userConfig`.

**Edit:** Dispatching custom events works as well. So you’ll also be able to do this:

```javascript
document.addEventListener('prodigyanswer', ev => {
    console.log('The answer was: ', ev.detail)
});

```

I didn’t realise you couldn’t write to the top-level `event` and had to use `event.detail`. So we might want to change it slightly to always expose an object here.

---

_[View the full topic](https://support.prodi.gy/t/custom-view-templates-with-scripts/302)._