# Add Input Widget Type / Decrease repeat code in HTML file

**URL:** <https://discourse.nodered.org/t/add-input-widget-type-decrease-repeat-code-in-html-file/54366>\
**Category:** Developing Nodes\
**Created:** [27 November 2021 11:03 UTC](https://discourse.nodered.org/t/add-input-widget-type-decrease-repeat-code-in-html-file/54366 "2021-11-27T11:03:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![EJSRobinson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ejsrobinson/32/36585_2.png) [@EJSRobinson](https://discourse.nodered.org/u/EJSRobinson)\
**Post date:** [27 November 2021 11:03 UTC](https://discourse.nodered.org/t/add-input-widget-type-decrease-repeat-code-in-html-file/54366/1 "2021-11-27T11:03:01Z")

</div>

I have a set of node types which share editor config functionality. As such, I have a large amount of repeated code in each node type's HTML file, primarily residing in OnEditPrepare.

I'd like these nodes to share the functionality from a common source. The functionality is complex and deals directly with the local node-input fields within that node therefore I cannot use simply getJson to call remote functions.

I had the idea of creating a new input widget that could be used between many node types with self-contained functionality, in the same manner is the current searchBox or TypedInput widget. I've been looking at the node-RED source and it seems this is not likely to be possible so therefore am open to alternative solutions.

Any suggestions are appreciated.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 November 2021 15:06 UTC](https://discourse.nodered.org/t/add-input-widget-type-decrease-repeat-code-in-html-file/54366/2 "2021-11-28T15:06:57Z")

</div>

Well the first step would be to move as much as possible out of the oneditprepare function into their own functions. As in [node-red-contrib-uibuilder/uibuilder.html at vNext · TotallyInformation/node-red-contrib-uibuilder (github.com)](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/vNext/nodes/uibuilder.html).

The next step might be to move the common functions into a separate libary and reference that as a link in your node's html files. However, that has the downside of needing you to be careful about name clashes since you would effectively be creating functions in the window context. You would want to choose a sensible prefix unlikely to clash with anyone else's.

Alternatively, you could use a build step when creating your node. You can see an example of this in the vNext branch of uibuilder. [TotallyInformation/node-red-contrib-uibuilder at vNext (github.com)](https://github.com/TotallyInformation/node-red-contrib-uibuilder/tree/vNext). Check out the `src` folder and the scripts defined in package.json. In that way, you could have your common code in a separate file that you insert into the main js section for each node's html file. The build step would do that for you and you can use a watch function to continuously rebuild as you make changes.

Oh, and of course, you can use API's defined in your node's .js file, passing in the appropriate data. That way, you have common code at the back-end. That works well as long as you aren't trying to handle massive data which is unlikely in an editor panel.

---

<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:** [27 January 2022 15:07 UTC](https://discourse.nodered.org/t/add-input-widget-type-decrease-repeat-code-in-html-file/54366/3 "2022-01-27T15:07:29Z")

</div>

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