How to make custom UI widgets

Developing Nodes
1

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

1 Like
2

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

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).

1 Like
3

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

1 Like
4

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?

5

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

6

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...

<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

7

This is part of jQuery UI and is called the "Widget Factory".

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

8

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?

9

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.