diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-change-node.png b/src/blog/2024/04/images/exploring-dashboard-2-widgets-change-node.png deleted file mode 100644 index 4c8205cc00..0000000000 Binary files a/src/blog/2024/04/images/exploring-dashboard-2-widgets-change-node.png and /dev/null differ diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif b/src/blog/2024/04/images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif deleted file mode 100644 index 73c781f728..0000000000 Binary files a/src/blog/2024/04/images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif and /dev/null differ diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-template-widget.png b/src/blog/2024/04/images/exploring-dashboard-2-widgets-template-widget.png deleted file mode 100644 index f681e20ce3..0000000000 Binary files a/src/blog/2024/04/images/exploring-dashboard-2-widgets-template-widget.png and /dev/null differ diff --git a/src/blog/2024/04/exploring-node-red-dashboard-2-widgets.md b/src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md similarity index 51% rename from src/blog/2024/04/exploring-node-red-dashboard-2-widgets.md rename to src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md index 6590734a0b..2ac53a4749 100644 --- a/src/blog/2024/04/exploring-node-red-dashboard-2-widgets.md +++ b/src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md @@ -1,8 +1,8 @@ --- title: Exploring Node-RED Dashboard 2.0 widgetes. -subtitle: A guide to using Node-RED 2.0 Widgets for Dashboard Development -description: Learn how to use Node-RED Dashboard 2.0 widgets to build interactive applications and dynamic dashboards effortlessly -date: 2024-04-25 +subtitle: A guide to using Node-RED 2.0 Widgets for Dashboard Development. +description: Learn how to use Node-RED Dashboard 2.0 widgets to build interactive applications and dynamic dashboards effortlessly. +date: 2024-05-16 authors: ["sumit-shinde"] image: tags: @@ -24,7 +24,7 @@ Widgets in Node-RED are like building blocks for creating the user interface. Th !["Income-expense tracker build with dashboard 2.0"](./images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif "Income-expense tracker build with dashboard 2.0"){data-zoomable} -In this guide, we'll create a basic app where you can input expenses and income. That will be displayed on the chart and table for analysis. This app will use more than half of the widgets available in Dashboard 2.0, helping you understand and use them confidently. +In this guide, we'll create a basic app where you can input expenses and income. That will be displayed on the chart and table for analysis. This app will utilize a significant number of the widgets available in Dashboard 2.0, helping you understand and use them confidently. ### Adding Forms @@ -191,12 +191,15 @@ return msg; ### Deploying your application flow -!["Income-expense tracker system's node-red flow"](./images/exploring-dashboard-2-widgets-income-expense-tracker-system-node-red-flow.png "Income-expense tracker system's node-red flow"){data-zoomable} +{% renderFlow %} +[{"id":"7ac3890dfa74703b","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"342f3ee215d32fdc","type":"group","z":"7ac3890dfa74703b","name":"New Icome page","style":{"label":true},"nodes":["d028c878350d19e1","43e79bb77d718c95","5ba5d8bff1a77bea"],"x":274,"y":159,"w":752,"h":82},{"id":"4afb4814be56a9a8","type":"group","z":"7ac3890dfa74703b","name":"New Expense page","style":{"label":true},"nodes":["e82b719d899cbf73","3457848652ad75e1","bd90a9ad612408d3"],"x":274,"y":279,"w":752,"h":82},{"id":"e6ee60438b20dc44","type":"group","z":"7ac3890dfa74703b","name":"Overview chart","style":{"label":true},"nodes":["424b35900722e740","f21a87c5c5aec0b2"],"x":274,"y":519,"w":592,"h":82},{"id":"77217e256ef75328","type":"group","z":"7ac3890dfa74703b","name":"Your icome and expense table","style":{"label":true},"nodes":["452d561bf79727cb","0c64567c81dd6a8d"],"x":274,"y":399,"w":572,"h":82},{"id":"1b78769d6d27d102","type":"group","z":"7ac3890dfa74703b","name":"Event lister","style":{"label":true},"nodes":["9ce6db04b2c9d7b2"],"x":54,"y":459,"w":152,"h":82},{"id":"e82b719d899cbf73","type":"ui-form","z":"7ac3890dfa74703b","g":"4afb4814be56a9a8","name":"Expense Submission Form","group":"854706651cd8a8f2","label":"","order":1,"width":"12","height":"1","options":[{"label":"Date","key":"date","type":"date","required":true,"rows":null},{"label":"Description","key":"description","type":"text","required":true,"rows":null},{"label":"Category","key":"category","type":"text","required":true,"rows":null},{"label":"Amount","key":"amount","type":"number","required":true,"rows":null},{"label":"Note","key":"note","type":"text","required":false,"rows":null}],"formValue":{"date":"","description":"","category":"","amount":"","note":""},"payload":"","submit":"submit","cancel":"clear","resetOnSubmit":true,"topic":"topic","topicType":"msg","splitLayout":"","className":"","x":410,"y":320,"wires":[["bd90a9ad612408d3"]]},{"id":"3457848652ad75e1","type":"ui-notification","z":"7ac3890dfa74703b","g":"4afb4814be56a9a8","ui":"a0a85a5f4c29af50","position":"center center","colorDefault":true,"color":"#000000","displayTime":"3","showCountdown":true,"outputs":0,"allowDismiss":true,"dismissText":"Close","raw":false,"className":"","name":"","x":910,"y":320,"wires":[]},{"id":"d028c878350d19e1","type":"ui-form","z":"7ac3890dfa74703b","g":"342f3ee215d32fdc","name":"Income Submission Form","group":"961528943e1bb698","label":"","order":1,"width":"0","height":"0","options":[{"label":"Date","key":"date","type":"date","required":true,"rows":null},{"label":"Description","key":"description","type":"text","required":true,"rows":null},{"label":"Amount","key":"amount","type":"number","required":true,"rows":null},{"label":"Note","key":"note","type":"text","required":false,"rows":null}],"formValue":{"date":"","description":"","amount":"","note":""},"payload":"","submit":"submit","cancel":"clear","resetOnSubmit":true,"topic":"topic","topicType":"msg","splitLayout":"","className":"","x":410,"y":200,"wires":[["5ba5d8bff1a77bea"]]},{"id":"43e79bb77d718c95","type":"ui-notification","z":"7ac3890dfa74703b","g":"342f3ee215d32fdc","ui":"a0a85a5f4c29af50","position":"center center","colorDefault":true,"color":"#000000","displayTime":"3","showCountdown":true,"outputs":0,"allowDismiss":true,"dismissText":"Close","raw":false,"className":"","name":"","x":910,"y":200,"wires":[]},{"id":"5ba5d8bff1a77bea","type":"function","z":"7ac3890dfa74703b","g":"342f3ee215d32fdc","name":"Store income","func":"let income = global.get('income') || [];\n\nincome.push({\n ...msg.payload,\n type:\"income\",\n});\n\nglobal.set('income', income);\n\nmsg.payload = \"Thank you for submitting income!\"\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":650,"y":200,"wires":[["43e79bb77d718c95"]]},{"id":"424b35900722e740","type":"ui-chart","z":"7ac3890dfa74703b","g":"e6ee60438b20dc44","group":"54eca83feb7c1479","name":"Overview Chart","label":"chart","order":2,"chartType":"bar","category":"category","categoryType":"property","xAxisProperty":"","xAxisPropertyType":"msg","xAxisType":"category","yAxisProperty":"amount","ymin":"","ymax":"","action":"append","pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#1eb33c","#aec7e8","#ff7f0e","#5f2ed1","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"width":"12","height":"6","className":"","x":760,"y":560,"wires":[[]]},{"id":"f21a87c5c5aec0b2","type":"function","z":"7ac3890dfa74703b","g":"e6ee60438b20dc44","name":"Calculate the total income and expenses.","func":"// Get income and expense arrays from global context, or set them as empty arrays if not found\nlet income = global.get('income') || [];\nlet expense = global.get('expense') || [];\n\n// Initialize an empty result array\nlet result = [];\n\n// Send an empty payload to reset chart\nnode.send({ payload: [] });\n\n// Calculate total income by summing up amounts in the income array\nlet totalIncome = income.reduce((sum, item) => sum + parseFloat(item.amount), 0);\nresult.push({ category: \"Income\", amount: totalIncome });\n\n// Calculate total expense by summing up amounts in the expense array\nlet totalExpense = expense.reduce((sum, item) => sum + parseFloat(item.amount), 0);\nresult.push({ category: \"Expense\", amount: totalExpense });\n\n// Set the result array as the payload of the message\nmsg.payload = result;\n\n// Return the message\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":560,"wires":[["424b35900722e740"]]},{"id":"452d561bf79727cb","type":"ui-table","z":"7ac3890dfa74703b","g":"77217e256ef75328","group":"e848a5e48a6549c9","name":"","label":"text","order":2,"width":0,"height":0,"maxrows":0,"passthru":false,"autocols":true,"selectionType":"click","columns":[],"x":770,"y":440,"wires":[[]]},{"id":"301c1fd8e29c3aae","type":"ui-template","z":"7ac3890dfa74703b","group":"","page":"","ui":"a0a85a5f4c29af50","name":"Footer","order":0,"width":0,"height":0,"head":"","format":"\n\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":530,"y":660,"wires":[[]]},{"id":"0c64567c81dd6a8d","type":"change","z":"7ac3890dfa74703b","g":"77217e256ef75328","name":"Merge income and expense data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[ $globalContext(\"income\"),\t $globalContext(\"expense\")\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":440,"wires":[["452d561bf79727cb"]]},{"id":"bd90a9ad612408d3","type":"function","z":"7ac3890dfa74703b","g":"4afb4814be56a9a8","name":"Store expense","func":"let expense = global.get('expense') || [];\n\nexpense.push({\n ...msg.payload,\n type: \"expense\",\n});\n\nglobal.set('expense', expense);\n\nmsg.payload = \"Thank you for submitting expense!\"\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":640,"y":320,"wires":[["3457848652ad75e1"]]},{"id":"9ce6db04b2c9d7b2","type":"ui-event","z":"7ac3890dfa74703b","g":"1b78769d6d27d102","ui":"a0a85a5f4c29af50","name":"","x":130,"y":500,"wires":[["0c64567c81dd6a8d","f21a87c5c5aec0b2"]]},{"id":"854706651cd8a8f2","type":"ui-group","name":"Expense Submission Form","page":"97bf3e87f4bdddc1","width":"12","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"a0a85a5f4c29af50","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart","ui-table"],"showPathInSidebar":false,"navigationStyle":"icon"},{"id":"961528943e1bb698","type":"ui-group","name":"Income Submission Form","page":"d954d73f9dcd1472","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"54eca83feb7c1479","type":"ui-group","name":"Overview","page":"47bde79e946933d2","width":"12","height":"4","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"e848a5e48a6549c9","type":"ui-group","name":"Your Income and Expense","page":"7abf0b3cb6f38ca3","width":"12","height":"5","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"97bf3e87f4bdddc1","type":"ui-page","name":"New Expense","ui":"a0a85a5f4c29af50","path":"/new-expense","icon":"bank-transfer-out","layout":"notebook","theme":"aeeec3fc1077eb1c","order":2,"className":"","visible":"true","disabled":"false"},{"id":"d954d73f9dcd1472","type":"ui-page","name":"New Income","ui":"a0a85a5f4c29af50","path":"/new-Icome","icon":"bank-transfer-in","layout":"notebook","theme":"aeeec3fc1077eb1c","order":1,"className":"","visible":"true","disabled":"false"},{"id":"47bde79e946933d2","type":"ui-page","name":"Overview","ui":"a0a85a5f4c29af50","path":"/overview","icon":"google-analytics","layout":"notebook","theme":"aeeec3fc1077eb1c","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"7abf0b3cb6f38ca3","type":"ui-page","name":"Your Income and expense","ui":"a0a85a5f4c29af50","path":"/your-icome-expense","icon":"calendar-multiple-check","layout":"grid","theme":"aeeec3fc1077eb1c","order":3,"className":"","visible":"true","disabled":"false"},{"id":"aeeec3fc1077eb1c","type":"ui-theme","name":"dashboard","colors":{"surface":"#1a1a1a","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}] +{% endrenderFlow %} + 1. Deploy the flow by clicking the top right **Deploy** button. 2. Locate the ***Open Dashboard** button at the top-right corner of the Dashboard 2.0 sidebar and click on it to navigate to the dashboard. -Now that we've built an income-expense tracker application and gained a basic understanding of Dashboard 2.0 widgets for building dashboards, but you might notice a difference in the application layout or style from the screenshot above. For more detailed understand on Dashboard 2.0 styling, navigation and layout refer to our [Comprehensive guide: Node-RED Dashboard 2.0 layout, sidebar, and styling](https://flowfuse.com/blog/2024/05/node-red-dashboard-2-layout-navigation-styling/) +Now that we've built an income-expense tracker application and gained a basic understanding of Dashboard 2.0 widgets for building dashboards. ### Up next @@ -204,11 +207,13 @@ If you want to enhance this simple application by adding more features or want t [Webinar](/webinars/2024/node-red-dashboard-multi-user/) - This webinar provides an in-depth discussion of the Personalised Multi-User Dashboards feature and offers guidance on how to get started with it. +[Comprehensive guide: Node-RED Dashboard 2.0 layout, sidebar, and styling](https://flowfuse.com/blog/2024/05/node-red-dashboard-2-layout-navigation-styling/) - This comprehensive guide will cover everything about Node-RED Dashboard 2.0 styling, layouts and sidebars. + [Displaying logged-in users on Dashboard 2.0](/blog/2024/04/displaying-logged-in-users-on-dashboard/) - This detailed guide demonstrates how to display logged-in users on Dashboard 2.0 which using the FlowFuse Multiuser addon and FlowFuse. [How to Build an Admin Dashboard with Node-RED Dashboard 2.0](/blog/2024/04/building-an-admin-panel-in-node-red-with-dashboard-2/) - This detailed guide demonstrates how to build a secure admin page in Node-RED Dashboard 2.0. -[How to Build An Application With Node-RED Dashboard 2.0](/blog/2024/04/how-to-build-an-application-with-node-red-dashboard-2/) - This guide, covers how you can build personalize multiuser dashboard using flow fuse multi-user addon +[How to Build An Application With Node-RED Dashboard 2.0](/blog/2024/04/how-to-build-an-application-with-node-red-dashboard-2/) - This guide, covers how you can build personalize multiuser dashboard using flow fuse multi-user addon. [Multi-User Dashboard for Ticket/Task Management blueprint](/blueprints/flowfuse-dashboard/multi-user-dashboard/#multi-user-dashboard-for-ticket%2Ftask-management) - this blueprint allows you to utilize templates to develop a personalized multi-user dashboard quickly. This Task management blueprint has all features such as adding, updating, and deleting tasks, user profiles, and admin dashboard. diff --git a/src/blog/2024/05/images/exploring-dashboard-2-widgets-change-node.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-change-node.png new file mode 100644 index 0000000000..d3e0f2ab05 Binary files /dev/null and b/src/blog/2024/05/images/exploring-dashboard-2-widgets-change-node.png differ diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-chart-widget.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-chart-widget.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-chart-widget.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-chart-widget.png diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-dropdown-widget.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-dropdown-widget.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-dropdown-widget.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-dropdown-widget.png diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-expense-submission-form.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-expense-submission-form.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-expense-submission-form.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-expense-submission-form.png diff --git a/src/blog/2024/05/images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif b/src/blog/2024/05/images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif new file mode 100644 index 0000000000..ac37e6b62a Binary files /dev/null and b/src/blog/2024/05/images/exploring-dashboard-2-widgets-incom-expense-tracker-system.gif differ diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-income-expense-tracker-system-node-red-flow.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-income-expense-tracker-system-node-red-flow.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-income-expense-tracker-system-node-red-flow.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-income-expense-tracker-system-node-red-flow.png diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-income-submission-form.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-income-submission-form.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-income-submission-form.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-income-submission-form.png diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-notification-widget.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-notification-widget.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-notification-widget.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-notification-widget.png diff --git a/src/blog/2024/04/images/exploring-dashboard-2-widgets-table-widget.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-table-widget.png similarity index 100% rename from src/blog/2024/04/images/exploring-dashboard-2-widgets-table-widget.png rename to src/blog/2024/05/images/exploring-dashboard-2-widgets-table-widget.png diff --git a/src/blog/2024/05/images/exploring-dashboard-2-widgets-template-widget.png b/src/blog/2024/05/images/exploring-dashboard-2-widgets-template-widget.png new file mode 100644 index 0000000000..f15e2e09ff Binary files /dev/null and b/src/blog/2024/05/images/exploring-dashboard-2-widgets-template-widget.png differ