Cloned Node-RED UI Node Not Functioning in Dashboard

[Nandhini-Subramaniya]

I’m trying to create a custom Node-RED dashboard node by cloning the existing ui_chart node. I copied both the ui_chart.js and ui_chart.html files and renamed them to ui_custom.js and ui_custom.html. The node appears in the Node-RED palette, and I can add it to flows, but the chart is not showing up in the UI on the dashboard.

Steps I’ve Taken:

1. Copied the contents of ui_chart.js and ui_chart.html.
2. Renamed the files to ui_custom.js and ui_custom.html.
3. Made sure to modify the names in the .js and .html files accordingly (e.g., renaming functions and modules to avoid conflicts with ui_chart).
4. I see the DOM structure is present in the nodes, and the custom node appears in the flow, but the chart itself does not render on the UI.
5. The original ui_chart node works perfectly when added to flows.

Issue:

The cloned node doesn't display any chart or functionality in the dashboard UI even though it is available for use in flows. How can I resolve this issue to make the chart visible in the UI?

Any help would be appreciated. Thank you!

[joepavitt]

Can you verify which version of the Dashboard you're using here please? You've tagged dashboard-2, but ui_chart (with an underscore) is dashboard-1

[Nandhini-Subramaniya]

i m using dashboard-2 only

[Steve-Mcl]

Are you making a change to the core dashboard 2 with the intention of raising a Pull Request (contributing) back to the dashboard project? If yes, you need to read Contributing | Node-RED Dashboard 2.0 first. Otherwise, if you making your own contrib node that users install independently, then you should not be modifying the dashboard source at all!

PS: with dashboard 2, for each widget, there is also the associated ui/src/widgets/ui-chart/xxxxxx.vue file (the front end part), a reference to the front end file in ui/src/widgets/index.mjs and a reference to the node to be made in package.json

[joepavitt]

Thanks for clarifying. As @Steve-Mcl mentioned there is a slight difference on if you're contributing a new core node, or a third-party widget that users can install themselves, but in both cases here is a useful Checklist of things you need.

If you are looking to add new nodes, I'm guessing this is for a third-party set of nodes, and so I'd recommend following Building Third Party Widgets | Node-RED Dashboard 2.0 as that points to a full ui-example repository to get you started.

[Nandhini-Subramaniya]

Thank you for the clarification! I have a few questions regarding the file structure.

Could you please provide the exact file path for ui/src/widgets/ui-chart/*.vue and ui/src/widgets/index.mjs? In my project, I couldn't locate these specific .mjs and .vue files in the package.json.

my package.json file contains

  "node-red": {
        "version": ">=3.0.0",
        "nodes": {
            "ui-base": "nodes/config/ui_base.js",
            "ui-page": "nodes/config/ui_page.js",
            "ui-link": "nodes/config/ui_link.js",
            "ui-group": "nodes/config/ui_group.js",
            "ui-theme": "nodes/config/ui_theme.js",
            "ui-form": "nodes/widgets/ui_form.js",
            "ui-text-input": "nodes/widgets/ui_text_input.js",
            "ui-number-input": "nodes/widgets/ui_number_input.js",
            "ui-file-input": "nodes/widgets/ui_file_input.js",
            "ui-button": "nodes/widgets/ui_button.js",
            "ui-button-group": "nodes/widgets/ui_button_group.js",
            "ui-dropdown": "nodes/widgets/ui_dropdown.js",
            "ui-radio-group": "nodes/widgets/ui_radio_group.js",
            "ui-slider": "nodes/widgets/ui_slider.js",
            "ui-switch": "nodes/widgets/ui_switch.js",
            "ui-text": "nodes/widgets/ui_text.js",
            "ui-table": "nodes/widgets/ui_table.js",
            "ui-chart": "nodes/widgets/ui_chart.js",
            "ui-gauge": "nodes/widgets/ui_gauge.js",
            "ui-notification": "nodes/widgets/ui_notification.js",
            "ui-markdown": "nodes/widgets/ui_markdown.js",
            "ui-template": "nodes/widgets/ui_template.js",
            "ui-event": "nodes/widgets/ui_event.js",
            "ui-control": "nodes/widgets/ui_control.js",
            "ui-custom":"nodes/widgets/ui_custom.js",
            "ui-gauge1": "nodes/widgets/ui_gauge1.js",
            "ui-frame":"nodes/widgets/ui_frame.js"
            
        }
    },

Just to confirm, I am creating a custom node similar to the chart widget, so I want to ensure that I am following the correct file structure.

[Nandhini-Subramaniya]

Hi,

Thanks for the detailed explanation!

I'm currently following the guide for Building Third Party Widgets, and I'd like to explore the ui-example flows to better understand how they work. Could you provide some sample flows or a brief example of how the ui-example repository is structured and functions?

It would be really helpful for me as I'm building a set of third-party nodes similar to the chart widget.

Thanks in advance for your support!

[Colin]

@Nandhini-Subramaniya

brief example of how the ui-example repository is structured

Simply clone the repository locally (or look at it on github) and you will see how it is structured. It is not complex.

Have you succeeded in building and installing the example?

[Nandhini-Subramaniya]

Yes, I succeeded in building and installing the example. I can see the example node in the Dashboard 2 palette. However, after connecting it to an inject node and a debug node, I'm still having trouble understanding how it's supposed to work within the flow.

Could you provide some examples or explain how the example node functions in a flow?

Thanks for your help!

[Steve-Mcl]

There are ~20 working dashboard 2 UI contrib nodes listed in the flows library. Most (if not all) have a link to GitHub where you can inspect the code.

On top of that, the provided documentation should guide you.

[Nandhini-Subramaniya]

Yes, I've seen the working dashboard contrib nodes, but my question is more focused on understanding the flow for the ui_example node. I'm trying to figure out what the expected output should look like in the Dashboard UI when using the ui_example node.

I'm still new to this dashboard and just trying to understand how it works, as I'm aiming to create a new node similar to those in Dashboard 2.

Any guidance or examples would be greatly appreciated!

[Steve-Mcl]

@Nandhini-Subramaniya

Any guidance or examples would be greatly appreciated!

As already stated....

@Steve-Mcl

There are ~20 working dashboard 2 UI contrib nodes listed in the flows library . Most (if not all) have a link to GitHub where you can inspect the code

... Not sure what more you are expecting?

Download one or all of them, see how they work. See how they are coded. Nothing we could say would explain better than 20 working examples.

[Nandhini-Subramaniya]

I am trying to create a custom UI node by copying and modifying the ui_chart node. Here are the steps I followed:

Copied Files:
    I copied the ui_chart.js and ui_chart.html files to new files ui_custom.js and ui_custom.html.
    In both new files, I replaced instances of ui-chart with ui-custom.

Modified package.json:
    I added the following to package.json:

    json

        "ui-custom": "nodes/widgets/ui_custom.js",
        "ui-gauge1": "nodes/widgets/ui_gauge1.js",
        "ui-frame": "nodes/widgets/ui_frame.js"

    This added the node to the dashboard palette.

Label Issue Fix:
    To fix the label display issue when dragging the node in the flow:
        I copied ui_chart.html and ui_chart.json from node-red/node_modules/@flowfuse/node-red-dashboard/nodes/widgets/locales/en-US to ui_custom.html and ui_custom.json.
        Then, I modified ui-chart to ui-custom inside these files.
    The label now displays correctly.

Current Issue:
    After completing these steps, the ui_custom node appears in the dashboard palette and I can drag it into the flow.
    However, the chart does not appear in the dashboard UI when running the flow.

Has anyone faced this issue or can suggest what I might be missing?
these are the steps i followed .
in localhost:1880/page1 i can get the dom for the ui_custom

[hotNipi]

The workflow "copy-modify-paste" is an experiment. It is absoluitely fine to do experiments cos you can always learn something. Specially if the experiment has positive outcome.
But it is not the way how widget creation goes. That workflow is documented and links to documents share here and not only.
In any case you actually start following the widget building path, you have much more clear questions and you definitely will get more clear answers.

[Steve-Mcl]

You may well have copied the js and html file but you have ignored several time where we told you there was also a vue file.

Every single one of the working contrib nodes will have an equivalent Vue file. Looking at the source of any one of them would reveal that. As well as being documented in the linked docs.

I'm sorry but I'm not certain how else we can help. You're gonna have to read the docs and look at other working examples and perhaps learn about how node-red node packages are created and piece it together like everyone else does.

If you have followed the dashboard documentation exactly and found it to be lacking, please raise an issue on the dashboard repository and we will get it improved. Or will accept a pull request for improvements.

[Colin]

@Nandhini-Subramaniya

I'm trying to figure out what the expected output should look like in the Dashboard UI when using the ui_example node.

It should look like this, or at least this is the start of it

@Nandhini-Subramaniya

Modified package.json

Not a good idea. You should install your node using npm, in the .node-red folder, run
npm install /path/to/newnode