I am finding it impossible to analyse the behaviour of the ui-template node even in the simplest example of a line of text and some CSS styling.
When I make a change to the code of a ui-template it sometimes shows up on the dashboard immediately. Sometimes it needs a page reload, sometimes ctrl-f5 to refresh the cache.
Edit - sometimes a tiny change (I can't tell exactly what) results in the dashboard browser tab hanging with a "loading" animation.
Why this inconsistency? With the original dashboard I didn't have to press ctrl-f5 because I had changed a word in the template?
It seems that in some places {{payload}} is acceptable, eg <div class={{class}}> but in others eg <p>{{payload}}</p> does not work while <p>{{msg.payload}}</p> does.
In the style section of the template neither color: {{color}}; nor color: {{msg.color}}; work.
It seems that these mustaches are passed through to the vue (?) library as literals rather than being translated by the @flow-fuse/node-red-dashboard widgets?
When I drag a new template onto the worktop, it already has in it some gobbledegook in <template>, <style> and <script> sections.
This is unnecessarily confusing.
Sure it's very impressive that you can implement a button click counter, but today I only need a simple line of text (or a world map, a fancy gauge, etc, etc)
Doesn't this stuff belong in a cookbook entry, or an example, or flowfuse's documentation or anywhere other than right-in-your-face?
Yes I know that the original dashboard template has <div ng-bind-html="msg.payload">.That too is confusing.
While I don't actually know what "bind" or "attribute" mean in this context I think "variable" here means message.payload (a message property?) not context or environment variable.
I can grasp the concept and even occasionally make it work.
does not work. The paragraph element either gets the class specified in msg.hello or nothing at all. 1. How should I specify a default value if msg.hello does not exist?
Solved this one, "hotpink" needs to be in single quotes (of course)
2. Are you saying that within the < and > of an HTML tag we MUST use Attribute Binding?
Text Interpolation
3. Inside what?
This is called Text Interpolation in the document.
The example pictured above shows it as part of the content between <p> and </p> tags
But it does not work in between style and </style> tags, it gives an error:
.other {
color: {{ msg.color }};
}
4. Precisely where in the template, style, script sections of a ui-template can we use Text Interpolation?
5. Can we use a message property to set a CSS variable?
etc.
I was contrasting the long and confusing initial content of a ui-template in @flowfuse/node-red-dashboard with the short but still confusing initial content of a ui-template in node-red-dashboard.
There was a feature request for a template selector (e.g. a drop-down in the ui-template editor that offered a few templates like "basic Vue template", "full Vue component", "basic HTML ...") discussed in the forum recently - might that help? Not sure if an issue was raised or not.
Perhaps it would help Steve but only for someone who knows what a Vue template or component is, or even HTML
Because Node-red makes workflows and dashboards simple for non technical users to build, creating a ui-template could be the user's first ever exposure to HTML syntax.
For him, that dropdown would just add to the confusion.
Maybe such a dropdown would be good for a more sophisticated user (after all flowfuse is professional Node-red) but I'm not competent to judge
It is implicit (unspoken/unwritten) but the ui-template is not for beginners. As new features are added and new contribs are added, the need for ui-template should reduce.
However, given a bunch of varying difficulty templates to chose from, there is chance a user with the will to experiment might stumble into a solution or learn something or get an idea they can ask about.
If nothing else, your comment about "confusing initial content" could be improved.
Correct, withour quotes, it looks for a variable called hotpink, the single quotes make sure it is read as a string.
If you want to have any attributes driven by a variable, yes.
Otherwise you just write them as you would with any other HTML/CSS
So, the {{ }} syntax is for anything inside a HTML tag within the context of <template />
We don’t currently support injection of variables into the <style /> tags. We do have an issue opened for it, and hope to address it asap.
You can, but because we don’t currently support the injection inside <style>, you need to do it inside a :style attribute on anything inside your <template />
I will echo Steve's comments too, yes, UI Template isn't easy/intuitive for non-technical people, but it is there as an advanced use case whereby a user has complete control by accessing the raw code directly.
