Comments (5)
Here a preview of the ui-dialog that I'm working on... directly on the palette.
from node-red-dashboard.
Here my custom "dialog" component that I use on my system. .. it allow to add custom buttons, change background color, etc. all managed on the payload.
[
{
"id": "6f039e5a0311095f",
"type": "ui-template",
"z": "d65257ac.47dde8",
"group": "",
"page": "",
"ui": "d0e3588ada68dc99",
"name": "Modal Component",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n <v-dialog id=\"dialog\" v-model=\"visible\" width=\"500\" persistent>\n <v-card>\n <v-card-title>{{ title }}</v-card-title>\n <v-card-text>\n <p>\n {{ body }}\n </p>\n <br>\n <v-progress-linear v-if=\"progress\" indeterminate :height=\"12\"></v-progress-linear>\n \n </v-card-text>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn v-if=\"show_cancel\" text @click=\"visible = false\">{{ show_cancel_label }}</v-btn>\n <v-btn v-for=\"(button, index) in actions\" :key=\"index\" text\n @click=\"visible = false; send({payload: button.id})\">{{ button.text }}</v-btn>\n </v-card-actions>\n </v-card>\n </v-dialog>\n</template>\n\n<script>\n\n export default {\n data() {\n return {\n loaded: false,\n visible: false,\n progress: false,\n title: \"Modal\",\n body: \"Body\",\n show_cancel: true,\n show_cancel_label: \"Cancel\",\n actions: []\n }\n },\n watch: {\n msg: function(){\n \n this.visible = false;\n\n if (this.msg.payload && this.msg.payload.modal) {\n\n this.visible = this.msg.payload.modal.visible;\n this.title = this.msg.payload.modal.title;\n this.body = this.msg.payload.modal.body;\n this.progress = this.msg.payload.modal.progress;\n \n this.show_cancel = this.msg.payload.modal.show_cancel;\n this.show_cancel_label = this.msg.payload.modal.show_cancel_label;\n this.actions = this.msg.payload.modal.actions;\n\n if (!this.show_cancel) {\n this.send({payload: true});\n }\n }\n } \n },\n computed: {\n },\n methods: {\n },\n mounted() {\n this.visible = false\n this.loaded = true\n },\n unmounted() {\n this.visible = false\n this.loaded = false }\n }\n</script>\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "widget:ui",
"className": "",
"x": 1370,
"y": 720,
"wires": [
[
"d5113505b6e3e8a3"
]
]
},
{
"id": "d5113505b6e3e8a3",
"type": "link out",
"z": "d65257ac.47dde8",
"name": "link out 11",
"mode": "return",
"links": [],
"x": 1515,
"y": 720,
"wires": []
},
{
"id": "61582d90a9bcab2b",
"type": "link in",
"z": "d65257ac.47dde8",
"name": "Modal Link",
"links": [],
"x": 1235,
"y": 720,
"wires": [
[
"6f039e5a0311095f"
]
]
},
{
"id": "d0e3588ada68dc99",
"type": "ui-base",
"name": "Tag Setup",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "icon"
}
]
How to display the modal :
msg.payload = {}
msg.payload.modal = {
visible: true,
title: 'Remote Tunnel',
body: 'Please wait while we start the Remote Tunnel ...',
actions: [],
show_cancel: false,
show_cancel_label: '',
backdrop: true
};
return msg;
And how to close :
msg.payload = {}
msg.payload.modal = {
visible: false
};
return msg;
from node-red-dashboard.
Thanks @joelvandal !
Tried your solution and this works exactly how I think the Notification node should behave. So great work!
That being said, I do think that this functionality should be part of the DB2 Notification node. The bit you're doing in the section and even the section isn't really low-code anymore, so adjusting this for more buttons would not be easy for most low-code users. Also, when trying with the Cancel button enabled, clicking that button does not generate a payload message to take action on (although I'm sure that could be programmed into the behaviour of the modal).
For us, should we want to make NR instances available for more people to be used as a low-code solution, we'd like something like your solution to just be possible with the standard Notification node that is also maintained as part of the Dashboard package.
Hoping that you and @joepavitt agree..
from node-red-dashboard.
About your initial request to close the notification, what about change the this.show behavior ... if the payload === false, then it set this.show = false instead of this.show = true on all payload ?
And about my node, I'm checking to add an ui-dialog node. I'm doing some experimentation, with ability to add control all options from NR dashboard.
from node-red-dashboard.
Looks great!
So this will be an additional Dashboard 2 node, to be installed with the Palette Manager?
from node-red-dashboard.
Related Issues (20)
- Form widget - layout shift when required input field shows the message "<name> is required"
- Option to get `socketIp` via custom headers HOT 2
- Export from db to CSV and download HOT 3
- Icons on dashboard 2 HOT 3
- Dashboard Sheduler UI HOT 4
- UI-Slider: Visual/Display issue when `Thumb` is set to `Always` HOT 7
- ui_template scope does not clean up on configuration change. HOT 3
- UI-Template: Should give error if invalid `page`/ `ui` is selected HOT 1
- Proposal: CSS quick&small fixes to make whole site more pleasant HOT 4
- ui_button stores the msg sent to it. HOT 2
- Yet Another PWA Hang - after dashboard (or node red) update
- Users are unable to create devices from the Application devices page HOT 2
- Users that navigate to / land on a blank page
- Support "Linear" & "Timescale" x-axis on a bar chart
- Link to help page does not work
- ui-chart: Enabling 'Show Legend' Displays 'Undefined' in Bar Chart
- UI Link: Differentiate in the sidebar that this is an external link
- Any Sized Button With An Icon But No Text Shows As A Small Circle HOT 5
- Easier Management of Static Assets HOT 6
- resizing ui-button doesn't work HOT 2
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.