node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

Not all template content is supported in dynamic use-case

Open joepavitt opened this issue 1 year ago • 7 comments

Current Behavior

Injecting some particular templates dynamically causes rendering issue for a ui-template.

This is a known issue with https://github.com/FlowFuse/node-red-dashboard/pull/1475, but the functionality introduced there improves the existing status-quo, so didn't think this issue would be a blocker.

Expected Behavior

Any injected template content should render the same as if it was rendered in the static configuration in the first place

Steps To Reproduce

See: https://github.com/FlowFuse/node-red-dashboard/pull/1475

Environment

  • Dashboard version:
  • Node-RED version:
  • Node.js version:
  • npm version:
  • Platform/OS:
  • Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

joepavitt avatar Dec 06 '24 13:12 joepavitt

@joepavitt , If you find some time, could you please add some more details here about what is going wrong. It is not quite clear to me which problems you have. Thanks!

bartbutenaers avatar Dec 06 '24 14:12 bartbutenaers

@bartbutenaers specifically referring to https://github.com/FlowFuse/node-red-dashboard/pull/1475#issuecomment-2518672835

joepavitt avatar Dec 06 '24 14:12 joepavitt

What a pitty that I cannot reproduce the problem. Seems to be working fine here. If you have any idea how I could reproduce it, please let me know so I can at least help investigating the issue.

bartbutenaers avatar Dec 06 '24 15:12 bartbutenaers

Just to clarify (as I thought your comment suggested that you did reproduce it) - even if you switched to the Hello World example, and then back to the counter example ,you could click the counter and it'd show "X Apples"?

joepavitt avatar Dec 06 '24 17:12 joepavitt

@joepavitt , Ah ok, I think we have a misunderstanding. I thought that the template even didn't render for you, while it rendered for me fine. I wasn't aware that you couldn't click the button. So I was thinking out loud, in order to provide you some ideas that might help you to solve your issue.

But yes indeed after your last comment above, I can confirm that it renders fine but nothing happens when I click on the injected button. I will have a look, but no idea at the moment where to start searching.

bartbutenaers avatar Dec 06 '24 19:12 bartbutenaers

Have spend all evening debugging, but no luck. Frameworks live Vue are a bit too much of magic to me personally.

Not sure if this Stackoverflow solution could be of any help here. But they include the runtime compiler in their frontend.
Including a compiler is not wanted here, because it also works fine with the template from the config screen. So not sure where I should put the .bind(this) and whether it will help solving this reactivity issue.

bartbutenaers avatar Dec 06 '24 22:12 bartbutenaers

Using a template node before an ui-template and: msg.payload (With HTML text) ------> {{{msg.payload}}}

shows error in web explorer

Image Image

JorgeAlberto91MS avatar Sep 03 '25 02:09 JorgeAlberto91MS