# How to make custom UI widgets

**URL:** <https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340>\
**Category:** Developing Nodes\
**Created:** [10 September 2019 00:33 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340 "2019-09-10T00:33:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![limengsong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/limengsong/32/9391_2.png) [@limengsong](https://discourse.nodered.org/u/limengsong)\
**Post date:** [10 September 2019 00:33 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/1 "2019-09-10T00:33:24Z")

</div>

How to make custom UI widgets in node-red.  
Just like TypedInput, EditableList, etc.  
Is there a tutorial for reference?

---

<div class="post-metadata">

**Author:** ![molesworth](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/molesworth/32/11748_2.png) [@molesworth](https://discourse.nodered.org/u/molesworth)\
**Post date:** [10 September 2019 07:59 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/2 "2019-09-10T07:59:02Z")

</div>

Ah, I've just been looking at this, as I'd like to have some non-standard widgets for my own application. There are a couple of pages which should help you :

[Tutorial: Node-RED dashboards – creating your own UI widget](http://noderedguide.com/tutorial-node-red-dashboards-creating-your-own-ui-widget/)

[Creating New Dashboard Widgets](https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets)

I'm only at the "experimenting" stage at the moment, but it seems to be pretty straightforward after reading through the tutorials and looking at other people's code (see first link in second page).

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 September 2019 08:26 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/3 "2019-09-10T08:26:04Z")

</div>

And there is this group of nodes - [https://github.com/node-red/node-red-ui-nodes](https://github.com/node-red/node-red-ui-nodes)  
the mylittleuinode is fairly well commented  
(but feedback and updates welcome)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [10 September 2019 08:30 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/4 "2019-09-10T08:30:27Z")

</div>

> [@limengsong](#):
>
> Just like TypedInput, EditableList, etc.

Can you clarify if you mean custom widgets for Node-RED Dashboard (which is what the previous two replies have assumed) or custom widgets in your node's edit dialog? You mention TypedInput and EditableList - these are widgets you can use in the editor.

Or are you asking how to _use_ TypedInput and EditableList?

---

<div class="post-metadata">

**Author:** ![limengsong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/limengsong/32/9391_2.png) [@limengsong](https://discourse.nodered.org/u/limengsong)\
**Post date:** [11 September 2019 00:48 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/5 "2019-09-11T00:48:44Z")

</div>

> [@knolleary](#):
>
> custom widgets in your node's edit dialog

Custom widgets in your node's edit dialog,  
I would like to ask how to develop custom widgets,  
thank you！

---

<div class="post-metadata">

**Author:** ![sean.borg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean.borg/32/12337_2.png) [@sean.borg](https://discourse.nodered.org/u/sean.borg)\
**Post date:** [22 September 2019 09:49 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/6 "2019-09-22T09:49:39Z")

</div>

I have a way to make custom widgets, however I would like to preface this by saying I have no real knowledge of jQuery and this is definitely not a supported solution more of a hack/trick and am posting here more to get feedback than presenting a solution.

So with that out the way,  
I found so long as I can run this code anywhere after launch in the browser I can use my custom widget

`$.widget(<widgetname>,{<widget_definition>});`

After looking around I realised I can pass functions to paletteLabel, this runs on load of the webpage every time as far as I am aware. Meaning if i execute my widget definition before returning the label name I can use that widget in any node, not just the node it was defined in.

This results in one of my nodes html files looking a bit like this...

```auto
<script type="text/javascript">
  RED.nodes.registerType('trelloGetNewCard', {
    category: 'Trello',
    color: '#8BBDD9',
    defaults: {
      trello: {value: '', required: true, type: 'trelloCredentials'},
    },
    inputs: 1,
    outputs: 1,
    icon: "trello.png",
    label: function () {
      return this.name || this._('trelloGetNewCard.nodeName');
    },

    // Bellow is where I added the widget
    paletteLabel: function () {
      $.widget("trelloFunctions.selectTrelloBoard", {
        _create: function () {
            this.element
              .addClass("board-select")
              .text('Widget works!!!');

        },
        _resize: function () {

        },
        _destroy: function () {

        },
        _refreshFilter: function () {

        },
        _refreshSort: function () {

        },
      });
      return this.name || this._('trelloGetNewCard.nodeName');
    },

    oneditprepare: function () 
    {}
  });
</script>

<script type="text/x-red" data-template-name="trelloGetNewCard">
    <div class="form-row">
      <label for="node-input-trello">Trello</label>
      <input id="node-input-trello"></input>
    </div>
</script>

```

you can then call this widget the same as you do with the editableList or other widgets

`const boardSelector = $('#node-input-idBoard-container').selectTrelloBoard({});`

That should work, however sadly can make no garentees I have only spent a couple hours looking at this I shall report back if I find this doesn't work in certain cases or if it breaks anything else.

Hope it helps,  
Sean Borg

---

<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:** [22 September 2019 14:56 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/7 "2019-09-22T14:56:36Z")

</div>

> [@sean.borg](#):
>
> $.widget

This is part of jQuery UI and is called the "[Widget Factory](https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/)".

jQuery and jQuery UI are both loaded in Node-RED's admin Editor ui.

---

<div class="post-metadata">

**Author:** ![sean.borg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean.borg/32/12337_2.png) [@sean.borg](https://discourse.nodered.org/u/sean.borg)\
**Post date:** [30 September 2019 10:11 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/8 "2019-09-30T10:11:47Z")

</div>

Yeah I was trying to follow the way node red made their editable list.  
Do you know if there is anyway I could put the jQuery widget into a separate file and somehow import it?

---

<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:** [30 September 2019 12:35 UTC](https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340/9 "2019-09-30T12:35:28Z")

</div>

I'm not certain. However, I think that you can put it into the html file for a custom node.

Maybe check out the node-red-contrib-blockly node as I think that loads external libraries into the Editor.