Javascript Not Running in ui_template

General
1

I have a function to scan a dir in .node-red dir on rpi and give me a list of images in that dir.

if (!msg.payload) return msg;
// Split into lines
let lines = msg.payload.split("\\n").filter(x => x.trim() !== "");
// Build array of URLs for dashboard
msg.images = lines.map(f => "/" + f);
return msg; or paste code here

I then parse it to a ui_template which i want to display the images in like a gallery but they dont show and my debug just says waiting never changes. {{msg.payload}} does show data is being parsed

<h3>Proving ui_template receives payload</h3>
{{msg.payload}}
<h3>Gallery</h3>
<div id="gallery" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
<script>
    RED.events.on("node:8e249f1d12a49608", (msg) => {
    const gallery = document.getElementById("gallery");
    gallery.innerHTML = "";

    if (!msg.images || !Array.isArray(msg.images)) {
        gallery.textContent = "No images found in msg.images";
        return;
    }
    msg.images.forEach(path => {

        if (!path.match(/\\.(jpg|jpeg|png|gif)$/i)) return;
        const img = document.createElement("img");
        img.src = path;
        img.style.width = "150px";
        img.style.border = "1px solid #444";
        img.style.borderRadius = "4px";
        img.style.margin = "5px";
        gallery.appendChild(img);
    });
});
</script>

<div id="log">Waiting...</div>

<script>
    const log = document.getElementById("log");
function add(text) {
    log.textContent += "\\n" + text;
}

// sniff ALL dashboard events
RED.events.onAny((eventName, data) => {
    add("EVENT: " + eventName);
});
</script>

Do I have to enable something in Dashboard of NR v5.0 to allow scripts to run or am I missing something else? TIA

2

What is typeif?

3

Also, I do not believe that RED.events is accessible in the dashboard browser. See the help text for the ui_template for how to watch for a message and pick up the contents in the old node-red-dashboard.

4

typo my bad should just be if.

5

When developing ui-templates with JS, it is a good habit, to have a browser console open so if the JS hits an issue (e.g. a syntax error) you can see the exception in the console

6

I cant see anything obvious. But should templates with js run on v5.0.4 or do i need a different version?
AI is saying v5 / Dashboard 2.0 has no JS engine and to downgrade Node‑RED to v4.x (to enable FlowFuse Dashboard).

But I have my doubts what AI is saying doesnt seem correct to me.

7

You are right to doubt.

Dashboard 2 (flowfuse dashboard) runs in the browser and has full access to JavaScript, Vue & vuetify.

You should go to the documentation website and read the built in help. There are a ton of examples and guidance around ui-template. Even if you don't read it yourself, pass that info to your AI.

8

Thanks Steve.

Is that flowfuse documentation website or node-red or dashboard help as been searching for examples but not found yet?

I have @flowfuse/node-red-dashboard 1.31.0 installed so does this mean adding should work in v5? Thanks

9

The template node that you posted was, you said, a ui_template node. That is for the old dashboard, the install package for which is node-red-dashboard. The latest dashboard (known as Dashboard 2) is @flowfuse/node-red-dashboard. The equivalent node in that dashboard is ui-template (dash, not underscore).

The docs for @flowfuse/node-red-dashboard can be found at https://dashboard.flowfuse.com/. See in particular the link to the Getting Started guide. There are many examples there. Also help information can be seen in node-red in the right hand information panel when a node is selected.

Yes, both dashboards work in node-red version 5

10

Cool thank you. FYI my dash

image
image1920Ă—586 65.8 KB

11

Just for your information, there is a Watch node which can trigger a flow when a file arrives in a directory, is updated or deleted.

No special advantage over shelling out to ls -l except it might respond faster than your polling approach.

A slight pitfall is that the target directory must exist when the flow is deployed so it's no use if your workflow deletes the directory.

12

Thank you worth knowing. Once i get simple js to list files in a dir will give it a try but prooving tres difficl!!

13

There are also a couple of contrib nodes to list files in a directory.

I would suggest node-red-contrib-fs because it's by @TotallyInformation who is very active on here.

However it does have what my Linux focus sees as a fatal flaw, that it doesn't list files unless their name includes a dot - or in MS-DOS speak, filenames without an extension.

(Julian, I have just checked this and on my Pi a directory containing 'foo' results in the node status "# files 0" or "Empty directory" depending on the node's output setting.)

14

Thank you again. My pre msg.payload produces an array

[
"Image_2026-09-01_09-57-36.jpg",
"Image_2026-09-01_09-57-46.jpg",
"Image_2026-09-01_10-07-05.jpg",
"Image_2026-09-02_10-20-10.jpg"
]

and prints it in my page but js seems not to run or doesn't get payload

<template>
<pre>{{ msg.payload }}</pre>

<div id="fileList" style="white-space:pre; font-size:16px; padding:10px;"></div>
</template>


<script>
    (function(scope) {

    scope.$watch('msg.payload', function(list) {

        const out = document.getElementById("fileList");

        if (!Array.isArray(list)) {
            out.textContent = "No files found";
            return;
        }

        out.textContent = list.join("\n");
    });

})(scope);
</script>
15

To get round that, you simply target the parent folder instead and then check and filter the outputs.

You first need to reference node.js's fs module in the function's startup tab. Then you can make use of it in your function code. If you are using node.js v22+, you can use its glob function to list files/folders: File system | Node.js v22.23.2 Documentation

While I am active, the development of that module is not active I'm afraid. Though maybe my arm could be twisted. :smiley:

Ah well, I never did get to improving that module - UIBUILDER takes most of my dev time sadly. I thought that retirement would give me more time but so far I think I've had a lot less!

Right, so the likely issue is that you need to understand the difference between your Pi as a SERVER and as a CLIENT. When you access your dashboard from a browser, you are acting as a CLIENT. And browser clients do not have access directly to the server's filing system.

So, those files need to be in a location that Node-RED (or some other web server) can serve up over HTTP(S). And then you need to adjust the img links to accommodate that.

The easiest way to make them available is to use Node-RED's static folder. You configure this in setttings.js. A lot of people use ~/.node-red/public as the folder but you can use any folder that Node-RED can access.

Alternatively, you can press the http-in/http-response nodes to serve up the files on demand.

16

That code is for the old dashboard, not the flowfuse dashboard. Which one are you actually using? Look in manage palette and see which of node-red-dashboard and @flowfuse/node-red-dashboard you have installed and look at the template node config.

The old dashboard template node looks like

image
image499Ă—386 20.1 KB

The new (flowfuse) dashboard template looks like

image
image503Ă—410 20.6 KB

If you have both installed then I suggest you decide which one it is that you want to use and uninstall the other. Unless you have an existing dashboard using the old one that you do not wish to recreate for the new one then I suggest that you use the flowfuse one.

If you are, in fact, using the flowfuse dashboard then read the docs I linked for how to use the ui-template node to achieve what you want.

17

Using new Flowfuse thanks will do.