From e1f3693d56b73286d269ab48e9362c8ad3b3fee9 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Sun, 16 Jun 2024 09:54:26 +0100
Subject: [PATCH 1/6] Docs: Clearer documentation on using variables inside a
 ui-template

---
 docs/nodes/widgets/ui-template.md | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 149678efd..f72c8c960 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -37,29 +37,43 @@ UI Template will parse different tags and render them into Dashboard. The availa
 Any variables that you want to render into your `<template />` are done so in one of two ways:
 
 ::: v-pre
-- **Attribute Binding** - Use `:` to bind a variable to an attribute. For example: 
+- **Attribute Binding** - Use `:` to bind a variable to an attribute. Anything inside the `""` here is treated as JavaScript, for example: 
 
 ```html
 <p :class="msg.payload">Hello World</p>
 ````
 
-- **Text Interpolation** - Use `{{ }}` to interpolate a variable into the text of an element. For example:
+or, if we want to modify `msg.payload` before using it:
+
+```html
+<p :class="'class-variant--' + msg.payload">Hello World</p>
+````
+
+```html
+<p :class="`class-variant--${msg.payload}`">Hello World</p>
+````
+
+- **Text Interpolation** - Use `{{ }}` to interpolate a variable into the text of an element. Similarly to above, anything here is treated as Javascript. For example:
 
 ```html
 <p>Hello {{ msg.payload }}</p>
 ```
 
+```html
+<p>Percentage {{ msg.payload * 100 }}%</p>
+```
+
 ### Built-in Variables
 
 You have access to a number of built-in variables in your `ui-template` node:
 
-- `this.id` - The ID of the `ui-template` node, assigned by Node-RED.
-- `this.$socket` - The socket.io connection that is used to communicate with the Node-RED backend.
-- `this.msg` - The last message received by the `ui-template` node.
+- `id` - The ID of the `ui-template` node, assigned by Node-RED.
+- `msg` - The last message received by the `ui-template` node.
+- `$socket` - The socket.io connection that is used to communicate with the Node-RED backend.
 
-***Important Note:*** It is a good practice to utilise JavaScript's conditional operator (`?`) when accessing nested values inside say `msg.payload`.
+When accessing the `msg` variable inside a `<script />` tag, you need to prepend `this.` to the variable name to tell the component that you're accessing a component-bound variable, and not just a locally-defined variable.
 
-On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested value will throw an error. Using the operator, `msg.payload?.nested?.value` will not throw an error if `msg.payload` is `null` or `undefined`, whereas `msg.payload.nested.value` will.
+***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested value will throw an error. Using the conditional operator (`?`), e.g. `msg.payload?.nested?.value`, will not throw an error if `msg.payload` is `null` or `undefined`, whereas `msg.payload.nested.value` will.
 
 ### Built-in Functions
 

From 43ea7d4d014b00ddef4efea44c53243e73c56f51 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
Date: Mon, 17 Jun 2024 09:58:28 +0100
Subject: [PATCH 2/6] Update docs/nodes/widgets/ui-template.md

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 docs/nodes/widgets/ui-template.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index f72c8c960..208fc4a14 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -43,7 +43,7 @@ Any variables that you want to render into your `<template />` are done so in on
 <p :class="msg.payload">Hello World</p>
 ````
 
-or, if we want to modify `msg.payload` before using it:
+or, if you want to use `msg.payload` as part of the value, you can do this:
 
 ```html
 <p :class="'class-variant--' + msg.payload">Hello World</p>

From 9dd739d76686fb4f01d2383bca2760b0a45c7a18 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
Date: Mon, 17 Jun 2024 10:02:38 +0100
Subject: [PATCH 3/6] Update docs/nodes/widgets/ui-template.md

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 docs/nodes/widgets/ui-template.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 208fc4a14..e02ef5953 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -71,7 +71,7 @@ You have access to a number of built-in variables in your `ui-template` node:
 - `msg` - The last message received by the `ui-template` node.
 - `$socket` - The socket.io connection that is used to communicate with the Node-RED backend.
 
-When accessing the `msg` variable inside a `<script />` tag, you need to prepend `this.` to the variable name to tell the component that you're accessing a component-bound variable, and not just a locally-defined variable.
+When accessing the `msg` variable inside a `<script />` tag, you need to prefix the variable name with `this.` (e.g. `this.msg.payload`) so that it knows you're accessing the component-bound `msg` variable.
 
 ***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested value will throw an error. Using the conditional operator (`?`), e.g. `msg.payload?.nested?.value`, will not throw an error if `msg.payload` is `null` or `undefined`, whereas `msg.payload.nested.value` will.
 

From 359adb683da056e0e5087f1d492fa81a6ce99bed Mon Sep 17 00:00:00 2001
From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
Date: Mon, 17 Jun 2024 10:03:05 +0100
Subject: [PATCH 4/6] Update docs/nodes/widgets/ui-template.md

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 docs/nodes/widgets/ui-template.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index e02ef5953..4a44edd15 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -73,7 +73,7 @@ You have access to a number of built-in variables in your `ui-template` node:
 
 When accessing the `msg` variable inside a `<script />` tag, you need to prefix the variable name with `this.` (e.g. `this.msg.payload`) so that it knows you're accessing the component-bound `msg` variable.
 
-***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested value will throw an error. Using the conditional operator (`?`), e.g. `msg.payload?.nested?.value`, will not throw an error if `msg.payload` is `null` or `undefined`, whereas `msg.payload.nested.value` will.
+***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested property will throw an error. Using the **optional chaining** (?.) operator, e.g. `msg.payload?.nested?.property` will prevent these errors occuring.
 
 ### Built-in Functions
 

From da3ca3a0a8cae37eb0b60fc9ba5e94453e7fdf6c Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 17 Jun 2024 10:03:50 +0100
Subject: [PATCH 5/6] Docs: Update payload-driven attributes examples for
 ui-template

---
 docs/nodes/widgets/ui-template.md | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 208fc4a14..c49f72c32 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -46,11 +46,21 @@ Any variables that you want to render into your `<template />` are done so in on
 or, if you want to use `msg.payload` as part of the value, you can do this:
 
 ```html
-<p :class="'class-variant--' + msg.payload">Hello World</p>
+<!-- Change color based on msg.payload. Expects payload to be either "error", "warning" or "info" -->`
+<p :class="'text-' + msg.payload">Hello World</p>
+<!-- or with string literals: -->
+<p :class="`text-${msg.payload}`">Hello World</p>
 ````
 
+or even use `msg.payload` as a condition:
+
 ```html
-<p :class="`class-variant--${msg.payload}`">Hello World</p>
+<!-- 
+  Change color based on the value of msg.payload: 
+  * When msg.payload equals "error", set text to the predefined `text-error` color. 
+  * Otherwise, set text to the predefined `text-info` color.
+-->
+<p :class="msg.payload === 'error' ? 'text-error' : 'text-info'">Hello World</p>
 ````
 
 - **Text Interpolation** - Use `{{ }}` to interpolate a variable into the text of an element. Similarly to above, anything here is treated as Javascript. For example:

From 958cbea61fc3b0dfc8d5fb2974614385c7026ab1 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
Date: Mon, 17 Jun 2024 10:04:55 +0100
Subject: [PATCH 6/6] Update docs/nodes/widgets/ui-template.md

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 docs/nodes/widgets/ui-template.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index bc560be02..b0c80aa9b 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -63,7 +63,7 @@ or even use `msg.payload` as a condition:
 <p :class="msg.payload === 'error' ? 'text-error' : 'text-info'">Hello World</p>
 ````
 
-- **Text Interpolation** - Use `{{ }}` to interpolate a variable into the text of an element. Similarly to above, anything here is treated as Javascript. For example:
+- **Text Interpolation** - Use `{{ }}` to interpolate a variable into the text of an element. Anything inside the curly brackets is treated as JavaScript. For example:
 
 ```html
 <p>Hello {{ msg.payload }}</p>