# Inherit config to all custom nodes

**URL:** https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698
**Category:** Developing Nodes
**Created:** [4 May 2024 11:56 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698 "2024-05-04T11:56:04Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)
#### Post date: [4 May 2024 11:56 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/1 "2024-05-04T11:56:04Z")

</div>

Hi everybody,

I'm creating an integration with multiple nodes. Each of these need a configuration node type and other html configs like checkbox etc. How can I embed the necessary html and script parts in each html file without replicating the code in all nodes...

Thanks in advance!

Marco

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [4 May 2024 12:09 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/2 "2024-05-04T12:09:44Z")

</div>

Not 100% certain what you mean. a config node (like the ones using in MQTT nodes) are setup once and re-used on each MQTT node that uses them.

If you mean your regular nodes have similar HTML options, then you have to add them to each node.

You could programmatically build the edit form using an imported script. but you would need to handle the `oneditprepare` and the `oneditsave` to load and extract the values.

---

<div class="post-metadata">

### Author: ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)
#### Post date: [4 May 2024 12:39 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/3 "2024-05-04T12:39:13Z")

</div>

Yes, the latter. Thanks I will add them manually

---

<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: [4 May 2024 13:19 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/4 "2024-05-04T13:19:28Z")

</div>

For the Editor HTML, you can load a resource file for common JS and CSS. You can load HTML dynamically as well. There is an example in the `uib-element` node for UIBUILDER where a 2nd tab of advanced settings may need to be different for each element type. I use a single node config variable that is an object to give me a standard config variable to work with no matter what data the optional tab might record from the admin user.

For the runtime, you can use a simple node.js module. You `require` the module in each runtime js but node.js is clever enough to only load it once and simply re-uses it. In UIBUILDER, most of my reusable code is contained in such library modules and I use classes but export the class instance not the class so that I am only ever using 1 instance. You don't have to use classes but I find them more logical to work with than JavaScripts prototype model. JS classes use prototypes under the skin but using classes hides the weirdness. This is especially useful as we are about to move to node.js v18 as a baseline for Node-RED because we now finally have access to private methods as well as private variables.

---

<div class="post-metadata">

### Author: ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)
#### Post date: [4 May 2024 13:50 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/5 "2024-05-04T13:50:10Z")

</div>

Thanks!

You mean those?

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/resources/uib-element.js>

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/nodes/uib-element/customNode.html>

Will have a look, but is a lot of very good code 😅 .... will try to wrap my head around

---

<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: [4 May 2024 21:25 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/6 "2024-05-04T21:25:10Z")

</div>

I'd forgotten how I did things! Been a while. Check out:

> **[node-red-contrib-uibuilder/src/editor/uib-element/conf-templates at main ·...](https://github.com/TotallyInformation/node-red-contrib-uibuilder/tree/main/src/editor/uib-element/conf-templates)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. - TotallyInformation/node-red-contrib-uibuilder

That folder is where the html snippets for `uib-element`s edit panel tabs go. This all changes quite heavily in v7 (in development), but in the v6 series, the html files for each node are built on the fly by a gulp watch script from a series of source files. Made it a lot easier to edit the various parts of the html file which gets horridly complex for large nodes. You will see that each of the files is an HTML snippet that is bundled into the main html file.

This code handles the display of the correct snippet:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/resources/uib-element.js#L375-L422>

(currently mostly commented out since I don't have any additional settings for any of the element types at present)

You can see the default loaded snippet here:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/resources/uib-element.js#L375-L422>

It is loaded into a template tag which makes it very easy to manage dynamically and is never part of the DOM until you clone its contents to somewhere.

Not sure that is absolutely the best way to do it though, there are other possibilities. Such as dynamically loading snippets as I do in my router front-end library. But it works well enough for small-ish amounts of html.

---

<div class="post-metadata">

### Author: ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)
#### Post date: [6 May 2024 06:31 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/7 "2024-05-06T06:31:40Z")

</div>

Hi,

tried to do something ugly.

this is my html file for the node:

```auto
<script src="resources/node-red-contrib-c8y/configheader.js"></script>
<script type="text/javascript">
    RED.nodes.registerType('call-endpoint',{
        category: 'Cumulocity',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            c8yconfig: {value:"", type:"c8yconfig"},
            useenv: {value: false},
            method: {value:"GET"},
            endpoint: {value: ''},

        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"call-endpoint";
        },
        oneditprepare: function() {
 
            $("#node-input-name").parent().append($(getHeader()));
            $('#node-input-useenv').change(function() {
                if ($(this).is(':checked')) {
                    $('#c8yconfig-row').hide();
                } else {
                    $('#c8yconfig-row').show();
                }
            });
        }
    });
</script>

<script type="text/html" data-template-name="call-endpoint" id="config-form">
    <div class="form-row" id="test">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-endpoint"><i class="fa fa-tag"></i> Endpoint</label>
        <input type="text" id="node-input-endpoint" placeholder="e.g. /service/where-am-i/findMe">
    </div>
    <div class="form-row">
        <label for="node-input-method"><i class="fa fa-tag"></i> Method</label>
        <input type="text" id="node-input-method" placeholder="e.g. GET">
    </div>
</script>

<script type="text/html" data-help-name="call-endpoint">
    <p>A node that calls a specified Cumulocity endpoint.</p>
</script>

```

I tried

```auto
 oneditprepare: function() {
 
            $("#node-input-name").parent().append($(getHeader()));
}

```

where getHeader supplies the additional html.

```auto
function getHeader() {

  return `<div class="form-row">
            <label for="node-input-useenv"><i class="fa fa-tag"></i> Use ENV</label>
            <input type="checkbox" id="node-input-useenv"/>
          </div>
          <div class="form-row" id="c8yconfig-row">
              <label for="node-input-c8yconfig"><i class="fa fa-tag"></i> C8y config</label>
              <input type="text" id="node-input-c8yconfig" placeholder="c8yconfig">
          </div>`;
}

```

seems to work for text input but not for the config node. My issue is that I could not find out which method is actually rendering the data-template   
I assume there must be some hook that I'm missing.....

Thanks and sorry for my lack of understanding.

Kind Regards,

Marco

---

<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: [6 May 2024 10:23 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/8 "2024-05-06T10:23:09Z")

</div>

> [@mstoffel-sag](#):
>
> which method is actually rendering the data-template

Node-RED does that for you. You don't get to see the mechanics of it. Not forgetting that NR has to juggle many different node modules.

> [@mstoffel-sag](#):
>
> not for the config node

Hmm. I think it should work though I don't use config nodes in my own nodes at present.

You might want to try and wade through this node's code though, I can see that they are doing a fair bit of dynamic stuff:

> <https://github.com/victronenergy/node-red-contrib-victron/blob/ac5e383b727a13d7f613cb02c183f5b205408c1b/src/nodes/victron-nodes.html#L357-L374>

Maybe that will help?

---

<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: [5 July 2024 10:24 UTC](https://discourse.nodered.org/t/inherit-config-to-all-custom-nodes/87698/9 "2024-07-05T10:24:02Z")

</div>

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