Comments (9)
Hi @joepavitt,
If you want I can have a look at this one.
Unless you need it fast, because that won't fit into my limited free time...
- Are there any best practices I need to take into account?
- I assume the dropdown node is again the best reference example for this?
- And I assume this is not limited to the slider node? If so, it might be better to create a PR per ui node?
from node-red-dashboard.
And I assume this is not limited to the slider node? If so, it might be better to create a PR per ui node?
We have a considerable backlog of dynamic properties that are needed - I may try and dedicate a day this week you just this.
I should be able to cover it, thanks for the offer @bartbutenaers
from node-red-dashboard.
Had already started work on dynamic props, with several PRs open following Pattern 1 from the below list. However, @Steve-Mcl has raised very valid concerns on this pattern, and he I are are currently talking through the options we have on architecture here:
Pattern 1 - <msg.property>
- Any dynamic properties can be overridden with
msg.<property>
- This occurs even if a value was defined in the node configuration
- Worth noting this is against the NR standard, which will only override, if a field is empty
Pros:
- Easy to follow and understand
- Easy for the user to define
- Easy to implement from a development standpoint
Cons:
msg
objects passed through nodes could then have a knock on effect, e.g.msg.label
could end up running through manyui-
nodes and override their label propertymsg.<property>
is ambiguous in that it could easily overlap accidentally with other, valid, uses of that same property- Invisible "magic" property, not in the configuration explicitly
Pattern 2 - <msg.ui_control.property>
- Dashboard 1.0's method
- Similar to pattern 1, but nests the overrides underneath a
.ui
(or equivalent) to minimise accidental overlap with valid uses of the existingmsg
properties
Pros:
- Fixes 1 x on from Pattern 1
Cons:
- Nested properties are likely to be more complex for low-code users to understand
- Knock-on effect problem still persists
- Invisible magic still persists
Pattern 3 - Typed Inputs
- Utilise Node-RED's built-in "TypedInput", which permits a user to define where the property is defined (e.g. static string or dynamic
msg
property)
Pros:
- Clear visibility on the definition of the property
- Less likely to have knock-on effect to other nodes
Cons:
- Developing with TypedInputs is not a fun DX
- Can't set "default" value easily, if you want something driven by
msg
later, it also needs to be driven bymsg
at the start
Pattern 4 - Payload/Topic Pairing
msg.topic
defines the property,msg.payload
defines the value- Send this to a
ui-control
node, rather than the node itself
Pros:
- No risk of knock-on effect
Cons:
- User needs to find widget/node id in order to define the specific node in question which isn't low-code friendly
- End up with a lot of wires into a single
ui-control
- More difficult to track back changes to a node given that the event updating it wires to a completely different node
from node-red-dashboard.
I am swaying towards Pattern 3 - but I'm not sure I have the energy to implement 50+ TypedInputs
from node-red-dashboard.
Given not all properties are suitable for a TypedInput style widget, I'd suggest starting with Pattern 2 - as it will be familiar to existing Dashboard users. It won't preclude Pattern 3 in the future if that's deemed a better solution later.
The knock-on effect could be mitigated by having a standard of clearing that property before passing the message on - they are single-use properties.
from node-red-dashboard.
The knock-on effect could be mitigated by having a standard of clearing that property before passing the message on - they are single-use properties.
I was in favour of this also
from node-red-dashboard.
Obviously I'm biased - but yes... the reasons we (I) went for pattern 2 (msg.ui_control.***) in dashboard 1 was precisely so it was obvious that it was to do with ui and not just picking up generic properties (like msg.label).
And also ... as you pointed out it is an anti pattern to the default Node-RED behaviour where if the author sets a config value then that is honoured first - and can't be overridden. So by using a sub-property I could justify to myself that this was safe enough to avoid users doing it accidentally.
The reason I wanted to allow this override "all over the UI" was that for the config I thought that in general you would want to be able to set a default value using the config field - but be able to override it later if necessary - rather then having to leave something blank and then having to send a valid property value with every message - which could make every single data point into a much larger object. IE not have to send min, max, label etc with every point...
(The technical debt of this is - as someone else has pointed out recently - that in dashboard 1 we only ever retained the payload value over a refresh - so labels, max, min etc would all reset to default on a refresh (or even on a navigate away to another tab and back) - which meant they have to resend those extra control properties when they spot the fresh happening... which is currently less than ideal)
from node-red-dashboard.
(The technical debt of this is - as someone else has pointed out recently - that in dashboard 1 we only ever retained the payload value over a refresh - so labels, max, min etc would all reset to default on a refresh (or even on a navigate away to another tab and back) - which meant they have to resend those extra control properties when they spot the fresh happening... which is currently less than ideal)
For what it's worth, I do already have a workaround for this as I have a server-side state
store which retains the dynamic values, and populates them on a client refresh, etc.
It does however get lost on a Node-RED restart
from node-red-dashboard.
Probably fair enough to lose it on a restart - as the rest of the back end may have missed other inputs, and not be in a real/valid state at that point. If you can retain things over a browser refresh then you are already in a better place than dashboard 1.
from node-red-dashboard.
Related Issues (20)
- Better worldmap integration
- Help panel missing for radio-group HOT 1
- Improve data table template example to mention case-sensitivity HOT 1
- Gauge does not render properly. HOT 1
- {{msg?.payload} in markdown breaks the entire dashboard HOT 1
- UI Chart - parseFloat on input
- Allow for socketId constraint on all widget types HOT 7
- Docs - Dynamic Properties - Best Practices
- Flow Fuse Dashboard empty for invisible element HOT 1
- Dynamic Properties: UI Dropdown
- Documentation - tweak docs for mobile users
- Dynamic Properties: UI Slider
- Dynamic Properties: UI Button
- Why no editableList is being used HOT 1
- Feature to disable and make page invisible or vice versa does not work properly HOT 2
- Allow multiple addressable outputs for "ui-template" node
- ui-link - theme undefined HOT 1
- Ui-Control behaviour upon Depoly HOT 1
- Property `class` not being updated when changing tabs HOT 7
- Hide disabled ui nodes HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-red-dashboard.