From 80d8affe50c28c6ae9193471e21c63f73630e33f Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Thu, 19 Oct 2023 15:22:49 +0100 Subject: [PATCH 1/2] Expose a data "value" variable for binding purposes & update docs with example --- docs/nodes/widgets/ui-template.md | 32 +++++++++++++++--- .../node-examples/ui-template-rating1.png | Bin 0 -> 5396 bytes .../node-examples/ui-template-rating2.png | Bin 0 -> 62616 bytes ui/src/widgets/ui-template/UITemplate.vue | 12 ++++++- 4 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 docs/public/images/node-examples/ui-template-rating1.png create mode 100644 docs/public/images/node-examples/ui-template-rating2.png diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md index 92aea2c57..a7e179a1e 100644 --- a/docs/nodes/widgets/ui-template.md +++ b/docs/nodes/widgets/ui-template.md @@ -13,18 +13,40 @@ props: Provide custom HTML (including any [Vuetify components](https://vuetifyjs.com/en/components/all/)) to render in the Dashboard. +## Properties + + + +## Examples + +![Examples of UI Template](/images/node-examples/ui-template.png "Examples of UI Template"){data-zoomable} +*Examples of variants of ui-template, one with a functional form, and another showing use of random Vuetify components.* + +### Built In Functions The template also has access to two built-in functions: - `send` - Outputs a message (defined by the input to this function call) from this node in the Node-RED flow. - `submit` - Send a `FormData` object when attached to a `
` element. The created object will consnist of the `name` attributes for each form element, corresponding to their respective `value` attributes. _Note: Currently restricted to custom HTML only, but there are plans to add `