I am becoming nuts !
This is the configuraton of a simple ui-template
And this is the result
HTML interpretation does not work !
Did I do somethng wrong ? Is there something special to configure ?
Thanks for your answer !
When you first go into the template config there is some sample content. The relevant bit here is to include your template between <template> and </template> tags.
template nodes use the Vuetify framework. I'm not sure if it supports all pure HTML tags.
Best is to use the Vuetify classes, which offer rich built-in formatting options, and ability to bind the HTML objects to your data.
for example:
<template>
<v-list>
<v-list-item-title>• chapter 1</v-list-item-title>
<v-list class="ml-4">
<v-list-item-title>- section 1.1</v-list-item-title>
<v-list-item-title>- section 1.2</v-list-item-title>
</v-list>
<v-list-item-title>• chapter 2</v-list-item-title>
</v-list>
</template>
Or if you want to bind it to your data:
<template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-content>
<v-list-item-title>• {{ item }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</template>
<script>
export default {
data() {
return {
items: ['Item One', 'Item Two', 'Item Three']
};
}
};
</script>
Thanks for your answer but t does not change anything. I already tried ….
Thanks ! I think it s a good explanation …
I am going to study Vue …
It will support all vanilla Javascript and HTML. Vuetify will give you nicely styled widgets out of the box though.
The missing piece here is the <template> tags as specified in the documentation. You will also need to specify the relevent styling you want to see with some CSS, e.g:
<style>
ul {
list-style: disc;
}
</style>
Thanks Joe.
So I understand that in such cases, the Vuetify CSS needs to be reset back to the HTML default.
BTW, in the current example, it seems that the style should include padding.
<style>
ul {
padding-left: 1.5rem;
}
</style>
Vuetify clears default styling, and then adds it’s own for the Vuetify widgets only. If you’re using vanilla HTML, there will be no default styling applied, hence you need to define your own.
Thanks every one for your answer.
Here is my node ui_template
<template>
{{ msg.payload }}
</template>
<style>
ul {
list-style: disc;
}
</style>
the result is always the same
This is working with ui-template from dashboard v1 ….
I find it a shame that it doesn't work as well with a new version of the dashboad, which is great, that said by the way
What are you sending in msg.payload (we cannot see from the picture and you have not provided a export of your flow)?
It works the same but different (you are using it wrong 
)
Did you try the working example offered by @omrid above?
Here is my flow, very simple
one template is for dashboard v1 : it contains
<div ng-bind-html="msg.payload"></div>
this is the result
the other template is for dashboard v2, it contains
<template>
{{ msg.payload }}
</template>
this is the result
If template for dashboard 2 contains
<template>
<div ng-bind-html="msg.payload"></div>
</template>
nothing is printed !
So they do not work exactly in the same way !
Or what did I do wrong ?
A screenshot cannot be imported by a user trying to help you. When someone asks you to share a flow they mean share the flow JSON (ctrl-e export)
Dashboard 2 is Vue not AngularJS. It would help you to read the extensive docs: Template ui-template | Node-RED Dashboard 2.0
Vue docs for binding html: Built-in Directives | Vue.js
E.g:
<template>
<div v-html="msg.payload"></div>
</template>
However this is NOT the best way to use dashboard templates. Binding html on divs is not advised.
As already pointed out, you can get pretty consistent visual styles and benefit from the many capable Vuetify components that would be very difficult to achieve in plain html.
