# Client JS in the node config editor?

**URL:** <https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212>\
**Category:** Developing Nodes\
**Created:** [5 May 2023 15:34 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212 "2023-05-05T15:34:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ncherry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ncherry/32/27_2.png) [@ncherry](https://discourse.nodered.org/u/ncherry)\
**Post date:** [5 May 2023 15:34 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/1 "2023-05-05T15:34:38Z")

</div>

I'm the author of the node-red-contrib-mytimeout node. A user has noted a problem with the config (string vs number). I've figured out if I add a check box in the config editor I can have the user select what they need. Now I'd like to add some client JS to the config editor but I'm not sure how to do that. Any pointers?

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [5 May 2023 18:21 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/2 "2023-05-05T18:21:51Z")

</div>

> [@ncherry](#):
>
> Now I'd like to add some client JS to the config editor

I'm not really sure what you intend to do, but usually the existing nodes are great examples of what can be made possible in the various corners of Node-RED. You'll find the source of these nodes in their [GitHub repo](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/nodes/core).

---

<div class="post-metadata">

**Author:** ![ncherry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ncherry/32/27_2.png) [@ncherry](https://discourse.nodered.org/u/ncherry)\
**Post date:** [5 May 2023 21:36 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/3 "2023-05-05T21:36:18Z")

</div>

My thinking is to check that the on and off values are not the same and if they are then just warn the user (turn the 2 fields red). There might be a reason I hadn't thought of for having the values the same.

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [5 May 2023 21:52 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/4 "2023-05-05T21:52:57Z")

</div>

In order to do that you need to define validate functions for the attributes.  
This documentation might help: [Node properties : Node-RED](https://nodered.org/docs/creating-nodes/properties#property-validation)

Working example from my own node is [here](https://github.com/cameo69/node-red-contrib-ratelimit/blob/650ed37460fbecc9d3f942c1c40fc2fd69df373c/ratelimit.html#L129).

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [5 May 2023 23:10 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/5 "2023-05-05T23:10:31Z")

</div>

> [@cameo69](#):
>
> define validate functions for the attributes

An important point in the documentation is that

> `this` can be used to access other properties of the node. This allows the validation to depend on other property values. While editing a node the `this` object reflects the current configuration of the node and **not** the current form element value. The validator function should try to access the property configuration element and take the `this` object as a fallback to achieve the right user experience.

So, each value can be tested against both the saved and the newly entered value of the other parameter, but I've found that getting the logic and ui correct can be tricky.

---

<div class="post-metadata">

**Author:** ![ncherry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ncherry/32/27_2.png) [@ncherry](https://discourse.nodered.org/u/ncherry)\
**Post date:** [7 May 2023 11:36 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/6 "2023-05-07T11:36:40Z")

</div>

Huge thanks, forgot about those. 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 May 2023 11:37 UTC](https://discourse.nodered.org/t/client-js-in-the-node-config-editor/78212/7 "2023-05-21T11:37:11Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.