# RED in UI nodes

**URL:** <https://discourse.nodered.org/t/red-in-ui-nodes/29824>\
**Category:** Developing Nodes\
**Created:** [10 July 2020 06:32 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824 "2020-07-10T06:32:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 July 2020 06:32 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/1 "2020-07-10T06:32:54Z")

</div>

Hi folks,

I needed to get a nested property from an input message, so I wrote following snippet

```auto
$scope.$watch('msg', function(msg) {
   var someNestedPropertyValue = RED.util.getMessageProperty(....);
}

```

However I get _ **"ReferenceError: RED is not defined"** _, and then I realized I have never used before this kind of stuff in a UI node (or Template node) ...

So the question is, how to continue with this:

1. I write my own getMessageProperty function (based on the [one](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/utils.js#L727) from Node-RED), so anybody can find it here in this discussion.
2. Something should be added to the core of the dashboard (to support some kind of lightweight RED API), so all node developers can use it (at least if that dashboard version is installed).
3. It does already exist, but I cannot find it?
4. Other ideas ...

Thanks !!  
Bart

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 July 2020 07:25 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/2 "2020-07-10T07:25:20Z")

</div>

This is browser side right ? I think the msg that arrives there via the websocket is not the same as the one arriving at the node. You would need to do any getMessageProperty type work before sending to the browser.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 July 2020 07:47 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/3 "2020-07-10T07:47:57Z")

</div>

> [@dceejay](#):
>
> This is browser side right ?

Yes Dave, that is in the AngularJs frontend side.

> [@dceejay](#):
>
> You would need to do any getMessageProperty type work before sending to the browser.

Indeed I can use RED at the server side, before sending the message to the client:

```auto
beforeEmit: function(msg, value) {   
   // Get the the value of a nested property from the input message
   var someNestedPropertyValue = RED.util.getMessageProperty(msg, "some.nested.property");
}

```

But I don't need the nested property value on the server side, I need it at the client side.  
With that setup, I need to get all the nested properties on the server side and convert them to non-nested properties:

```auto
beforeEmit: function(msg, value) {   
   // Convert the nested property to a non-nested property.
   msg.someNonNestedProperty = RED.util.getMessageProperty(msg, "some.nested.property");
   
   // To avoid confusion, remove the nested property from the input message
   ...
}

```

Then indeed I can use the `msg.someNonNestedProperty` on the client side without having to traverse through the nested properties...

Is that what you mean, or am I misunderstanding you?  
If yes, it seems like quite a workaround when I need to flatten my entire input message...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 July 2020 11:23 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/4 "2020-07-10T11:23:08Z")

</div>

the getMessageProperty is really to help the user be able to specify a property like "payload.foo" (as a string) and for it to get msg.payload.foo correctly (which msg["payload.foo"] will not do...and also to give access to flow and global variables. If you just need normal access then you don't need the util.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 July 2020 12:43 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/5 "2020-07-10T12:43:25Z")

</div>

> [@dceejay](#):
>
> to specify a property like "payload.foo"

Yes that is exactly what I need _ **on the client side** _. I need to have access to `msg.my.nested.property` somehow.  
Seems I have confused you somewhere...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 July 2020 13:04 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/6 "2020-07-10T13:04:41Z")

</div>

yes - but how is the target property specified ? where is the `nested.property` definition coming from ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 July 2020 20:37 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/7 "2020-07-10T20:37:50Z")

</div>

Bart, you need to reproduce that function yourself. I think I have something tucked away in the uibuilder `tiutils.js`.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 July 2020 21:28 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/8 "2020-07-10T21:28:17Z")

</div>

> [@dceejay](#):
>
> where is the `nested.property` definition coming from ?

In the upcoming version of the contextmenu node, you can specify -via a typedinput - in which (nested) field the X coordinate will be delivered:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/1812ada8d846fb94a3373304c3f6b072db962653.png)

So I thought I needed to send the input message to the frontend, and read it there. But do you mean that I should get the nested property in the beforeEmit, and create a new message from scratch without nested fields (so my frontend doesn't need to be able to read nested properties)?

> [@TotallyInformation](#):
>
> I have something tucked away in the uibuilder `tiutils.js` .

Julian, can't find it on your Github repo. Can you share a link please?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 July 2020 21:36 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/9 "2020-07-10T21:36:35Z")

</div>

That is the in the editor window - so yes when you get the actual property from the dashboard you can then set it into the correct property in the beforeEmit and then send it out. (But it sounds like you may be adding loads of options to the node - why not fix the property to send it out on ?)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 July 2020 21:51 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/10 "2020-07-10T21:51:07Z")

</div>

> [@dceejay](#):
>
> But it sounds like you may be adding loads of options to the node - why not fix the property to send it out on

Well there are not really much options on the node. Previously there where two ways to specify the position of the contextmenu: a fixed position or via `msg.position`. But due to our other [discussion](https://discourse.nodered.org/t/contextmenu-location/22780/74), the SVG node doesn't send an `msg.position` anymore. To allow the Contextmenu node to read from ANY input message field, I'm adding TypeInput fields to the Contextmenu node:

- Fixed positon:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a94e6c2d4f3422055d09c4733a5f29688c4b4f56.png)

- Msg-based position:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f326ac9a6c0ad7a4033762b63243cebaef676787.png)

So I need to be able to read nested fields. Although now I'm not sure anymore whether I should do that on the client or server side ....

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 September 2020 21:51 UTC](https://discourse.nodered.org/t/red-in-ui-nodes/29824/11 "2020-09-08T21:51:21Z")

</div>

Closed on 8 September 2020 21:51 UTC

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.