[{"data":1,"prerenderedAt":1247},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F05\u002Fexploring-node-red-dashboard-2-widgets":3},{"id":4,"title":5,"body":6,"description":12,"extension":1237,"meta":1238,"navigation":215,"path":1243,"seo":1244,"stem":1245,"__hash__":1246},"blog\u002Fblog\u002F2024\u002F05\u002Fexploring-node-red-dashboard-2-widgets.md","Exploring Node-RED Dashboard 2.0 Widgets",{"type":7,"value":8,"toc":1221},"minimark",[9,13,22,27,30,34,46,49,54,62,86,95,115,124,128,138,156,334,337,341,351,372,381,385,400,403,417,425,429,432,446,476,487,496,500,507,528,537,545,549,552,587,596,605,625,634,679,688,693,703,736,740,743,778,787,791,803,806,820,1130,1137,1141,1146,1162,1165,1169,1172,1218],[10,11,12],"p",{},"This guide delves into Node-RED Dashboard 2.0 widgets. It is a guide on how to build a Dashboard application, and will cover many of the widgets available today.",[10,14,15,16,21],{},"If you're new to Dashboard 2.0, we recommend starting with the ",[17,18,20],"a",{"href":19},"\u002Fblog\u002F2024\u002F03\u002Fdashboard-getting-started\u002F","Getting Started with Dashboard 2.0"," guide and make sure to install it.",[23,24,26],"h2",{"id":25},"what-are-widgets","What Are Widgets?",[10,28,29],{},"Widgets in Node-RED Dashboard 2.0 are the building blocks for creating a user interface. In Dashboard 2.0, you get a variety of widgets like forms, templates, buttons, and others to make different parts of your interface.",[23,31,33],{"id":32},"building-applications-with-dashboard-20-widgets","Building Applications with Dashboard 2.0 Widgets",[10,35,36,43],{},[37,38],"img",{"alt":39,"dataZoomable":40,"src":41,"title":42},"\"Income-expense tracker build with dashboard 2.0\"","","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-incom-expense-tracker-system.gif","Income-expense tracker build with dashboard 2.0",[44,45,42],"em",{},[10,47,48],{},"In this guide, we'll create a basic application to input expenses and income. This will then be displayed in a chart and table for analysis. The application will utilize a wide range of widgets available in Dashboard 2.0, helping you understand and use them confidently.",[50,51,53],"h3",{"id":52},"adding-forms","Adding Forms",[10,55,56,57,61],{},"For the income and expense submission, we'll incorporate a form using the ",[58,59,60],"strong",{},"ui-form"," widget.",[63,64,65,72,79],"ol",{},[66,67,68,69,71],"li",{},"Drag the ",[58,70,60],{}," widget onto the canvas.",[66,73,74,75,78],{},"Double-click on it to access various widget properties and select the ",[58,76,77],{},"ui-group"," where it should render.",[66,80,81,82,85],{},"Add \"date\", \"description\", \"amount\", and \"note\" form elements by clicking the ",[58,83,84],{},"+element"," button at the bottom left.",[10,87,88,93],{},[37,89],{"alt":90,"dataZoomable":40,"src":91,"title":92},"\"Screenshot displaying Income submission ui-form's configuration\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-income-submission-form.png","Screenshot displaying Income submission ui-form's configuration",[44,94,92],{},[10,96,97,98,101,102,104,105,107,108,114],{},"Once you've added the income submission form, repeat the process to add an expense submission form on another ",[58,99,100],{},"ui-page"," and ",[58,103,77],{},". For more information on ",[58,106,60],{},", refer to the ",[17,109,113],{"href":110,"rel":111},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-form.html",[112],"nofollow","ui-form docs",".",[10,116,117,122],{},[37,118],{"alt":119,"dataZoomable":40,"src":120,"title":121},"\"Screenshot displaying Expense submission ui-form's configuration\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-expense-submission-form.png","Screenshot displaying Expense submission ui-form's configuration",[44,123,121],{},[50,125,127],{"id":126},"storing-form-data","Storing Form Data",[10,129,130,131,133,134,114],{},"The ",[58,132,60],{}," widget emits a payload object with key-value pairs of form elements upon submission. We'll store this data in a global context, If you are not familiar with Node-RED context, refer to ",[17,135,137],{"href":136},"\u002Fblog\u002F2024\u002F05\u002Funderstanding-node-flow-global-environment-variables-in-node-red\u002F","Understanding Node-RED varriables",[63,139,140],{},[66,141,142,143,146,147,151,152,155],{},"Drag a ",[58,144,145],{},"function"," node onto the canvas and add the following code. This will store the submission in the ",[148,149,150],"code",{},"income"," global context variable, and then modify ",[148,153,154],{},"msg.payload"," to pass on a notification to any further connected nodes.",[157,158,162],"pre",{"className":159,"code":160,"language":161,"meta":40,"style":40},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Retrieve the existing 'income' array from the global context, or initialize it as an empty array if it doesn't exist\nlet income = global.get('income') || [];\n\n\u002F\u002F Push the incoming payload along with a 'type' property set to \"income\" into the 'income' array\nincome.push({\n  ...msg.payload,\n  type: \"income\",\n});\n\n\u002F\u002F Store the updated 'income' array back into the global context\nglobal.set('income', income);\n\n\u002F\u002F Set the message payload to a confirmation message for notification\nmsg.payload = \"Thank you for submitting income!\";\n\n\u002F\u002F Return the modified message\nreturn msg;\n","javascript",[148,163,164,173,210,217,223,235,244,256,262,267,273,289,294,300,314,319,325],{"__ignoreMap":40},[165,166,169],"span",{"class":167,"line":168},"line",1,[165,170,172],{"class":171},"sJ8bj","\u002F\u002F Retrieve the existing 'income' array from the global context, or initialize it as an empty array if it doesn't exist\n",[165,174,176,180,184,187,190,194,197,201,204,207],{"class":167,"line":175},2,[165,177,179],{"class":178},"szBVR","let",[165,181,183],{"class":182},"sVt8B"," income ",[165,185,186],{"class":178},"=",[165,188,189],{"class":182}," global.",[165,191,193],{"class":192},"sScJk","get",[165,195,196],{"class":182},"(",[165,198,200],{"class":199},"sZZnC","'income'",[165,202,203],{"class":182},") ",[165,205,206],{"class":178},"||",[165,208,209],{"class":182}," [];\n",[165,211,213],{"class":167,"line":212},3,[165,214,216],{"emptyLinePlaceholder":215},true,"\n",[165,218,220],{"class":167,"line":219},4,[165,221,222],{"class":171},"\u002F\u002F Push the incoming payload along with a 'type' property set to \"income\" into the 'income' array\n",[165,224,226,229,232],{"class":167,"line":225},5,[165,227,228],{"class":182},"income.",[165,230,231],{"class":192},"push",[165,233,234],{"class":182},"({\n",[165,236,238,241],{"class":167,"line":237},6,[165,239,240],{"class":178},"  ...",[165,242,243],{"class":182},"msg.payload,\n",[165,245,247,250,253],{"class":167,"line":246},7,[165,248,249],{"class":182},"  type: ",[165,251,252],{"class":199},"\"income\"",[165,254,255],{"class":182},",\n",[165,257,259],{"class":167,"line":258},8,[165,260,261],{"class":182},"});\n",[165,263,265],{"class":167,"line":264},9,[165,266,216],{"emptyLinePlaceholder":215},[165,268,270],{"class":167,"line":269},10,[165,271,272],{"class":171},"\u002F\u002F Store the updated 'income' array back into the global context\n",[165,274,276,279,282,284,286],{"class":167,"line":275},11,[165,277,278],{"class":182},"global.",[165,280,281],{"class":192},"set",[165,283,196],{"class":182},[165,285,200],{"class":199},[165,287,288],{"class":182},", income);\n",[165,290,292],{"class":167,"line":291},12,[165,293,216],{"emptyLinePlaceholder":215},[165,295,297],{"class":167,"line":296},13,[165,298,299],{"class":171},"\u002F\u002F Set the message payload to a confirmation message for notification\n",[165,301,303,306,308,311],{"class":167,"line":302},14,[165,304,305],{"class":182},"msg.payload ",[165,307,186],{"class":178},[165,309,310],{"class":199}," \"Thank you for submitting income!\"",[165,312,313],{"class":182},";\n",[165,315,317],{"class":167,"line":316},15,[165,318,216],{"emptyLinePlaceholder":215},[165,320,322],{"class":167,"line":321},16,[165,323,324],{"class":171},"\u002F\u002F Return the modified message\n",[165,326,328,331],{"class":167,"line":327},17,[165,329,330],{"class":178},"return",[165,332,333],{"class":182}," msg;\n",[10,335,336],{},"Similarly, you can do this for storing expense data submitted using the expense submission form.",[50,338,340],{"id":339},"displaying-notifications","Displaying Notifications",[10,342,343,344,347,348,350],{},"For displaying notifications on the dashboard, we'll utilize the ",[58,345,346],{},"ui-notification"," widget, which emits notifications to the user's dashboard. It accepts ",[148,349,154],{}," which should be a string format or raw HTML\u002FJavaScript for custom formatting.",[63,352,353,357],{},[66,354,68,355,71],{},[58,356,346],{},[66,358,359,360,363,364,369,370,114],{},"Set the position property to ",[58,361,362],{},"center",". You can also adjust colors or notification timeout by modifying the color and timeout properties. Please take a look at the ",[17,365,368],{"href":366,"rel":367},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-notification.html#properties",[112],"ui-notification docs"," for more information on ",[58,371,346],{},[10,373,374,379],{},[37,375],{"alt":376,"dataZoomable":40,"src":377,"title":378},"\"Screenshot displaying ui-notification widgets configuration\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-notification-widget.png","Screenshot displaying ui-notification widgets configuration",[44,380,378],{},[50,382,384],{"id":383},"listening-for-events","Listening for events",[10,386,387,388,391,392,395,396,399],{},"In Dashboard 2.0, the ",[58,389,390],{},"ui-event"," widget allows you to listen to user behavior or events. It does not render any content or components on the dashboard. Currently, this widget only listens for page views (",[148,393,394],{},"$pageview",") and leave (",[148,397,398],{},"$pageleave",") events.",[10,401,402],{},"With this, we can listen for page view and page leave events and trigger tasks based on those events. For instance, in our application, we will be displaying a table containing income and expense data, along with a chart. We'll update them when navigating to a new page or leaving a page.",[63,404,405,410],{},[66,406,407,408,71],{},"Drag an ",[58,409,390],{},[66,411,412,413,416],{},"Double-click on it and select the correct ",[58,414,415],{},"ui-base"," of your application.",[10,418,419,420,114],{},"For more information on ui-event refer to ",[17,421,424],{"href":422,"rel":423},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-event.html",[112],"ui-event docs",[50,426,428],{"id":427},"retrieving-income-expense-data","Retrieving Income-Expense Data",[10,430,431],{},"In our income-expense application, we will display the income and expenses in a single table.",[63,433,434,440],{},[66,435,142,436,439],{},[58,437,438],{},"change"," node onto the canvas.",[66,441,442,443,445],{},"Set ",[148,444,154],{}," to the JSONata expression below, which merges the income and expense arrays.",[157,447,449],{"className":159,"code":448,"language":161,"meta":40,"style":40},"[$globalContext('income'), $globalContext('expense')]\n",[148,450,451],{"__ignoreMap":40},[165,452,453,456,459,461,463,466,468,470,473],{"class":167,"line":168},[165,454,455],{"class":182},"[",[165,457,458],{"class":192},"$globalContext",[165,460,196],{"class":182},[165,462,200],{"class":199},[165,464,465],{"class":182},"), ",[165,467,458],{"class":192},[165,469,196],{"class":182},[165,471,472],{"class":199},"'expense'",[165,474,475],{"class":182},")]\n",[63,477,478],{"start":212},[66,479,480,481,483,484,486],{},"Connect the output of the ",[58,482,390],{}," widget to the input of the ",[58,485,438],{}," node.",[10,488,489,494],{},[37,490],{"alt":491,"dataZoomable":40,"src":492,"title":493},"\"Screenshot displaying the change node setting JSON expression to payload for retrieving and sorting data.\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-change-node.png","Screenshot displaying the change node setting JSON expression to payload for retrieving and sorting data.",[44,495,493],{},[50,497,499],{"id":498},"displaying-data-on-the-table","Displaying Data on the Table",[10,501,502,503,506],{},"To display data on the table, we use the ",[58,504,505],{},"ui-table"," widget in Dashboard 2.0. This widget accepts an array of objects as input. The columns in the table correspond to the properties of the objects within the array, and each row represents a different object with values corresponding to those properties.",[63,508,509,513,521],{},[66,510,142,511,71],{},[58,512,505],{},[66,514,515,516,101,518,520],{},"Create a new ",[58,517,100],{},[58,519,77],{}," for it.",[66,522,480,523,525,526,61],{},[58,524,438],{}," node to the input of the ",[58,527,505],{},[10,529,530,535],{},[37,531],{"alt":532,"dataZoomable":40,"src":533,"title":534},"\"Screenshot displaying the ui-table widget configuration\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-table-widget.png","Screenshot displaying the ui-table widget configuration",[44,536,534],{},[10,538,539,540],{},"For more information on ui-table refer to ",[17,541,544],{"href":542,"rel":543},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-table.html",[112],"ui-table docs",[50,546,548],{"id":547},"calculating-total-category-wise","Calculating total category-wise",[10,550,551],{},"In our application, we will display data on the chart, showing the total income and total expenses for analysis. In this section, we will calculate the total expenses and income using the function node.",[63,553,554,559],{},[66,555,556,557,439],{},"Drag the two ",[58,558,438],{},[66,560,561,562,565,566,568,569,101,572,575,576,578,579,568,581,101,584,586],{},"For the first ",[58,563,564],{},"Change"," node Set ",[148,567,154],{}," to ",[148,570,571],{},"global.income",[148,573,574],{},"msg.topic"," to \"income\" and give it name \"retrive income\". For the second ",[58,577,564],{}," node, set ",[148,580,154],{},[148,582,583],{},"global.expense",[148,585,574],{}," to \"expense\" and give that second change node name \"retrive expense\".",[10,588,589,594],{},[37,590],{"alt":591,"dataZoomable":40,"src":592,"title":593},"\"Screenshot displaying the change node retrieving income data from global context\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-chart-widget-retrieve-income-change-node.png","Screenshot displaying the change node retrieving income data from global context",[44,595,593],{},[10,597,598,603],{},[37,599],{"alt":600,"dataZoomable":40,"src":601,"title":602},"\"Screenshot displaying the change node retrieving expense data from global context\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-chart-widget-retrieve-expense-change-node.png","Screenshot displaying the change node retrieving expense data from global context",[44,604,602],{},[63,606,607,612],{"start":212},[66,608,142,609,439],{},[58,610,611],{},"Split",[66,613,68,614,616,617,620,621,624],{},[58,615,564],{}," node onto the canvas and set ",[148,618,619],{},"msg.payload.amount"," to the JSONata expression ",[148,622,623],{},"$number(payload.amount)"," and give it name \"Convert amount to number\".",[10,626,627,632],{},[37,628],{"alt":629,"dataZoomable":40,"src":630,"title":631},"\"Screenshot displaying the change node converting amount to number\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-chart-widget-convert-amount-to-number-change-node.png","Screenshot displaying the change node converting amount to number",[44,633,631],{},[63,635,636],{"start":225},[66,637,142,638,641,642,645,646,568,649,652,653,656,657,568,660,663,664,667,668,670,671,674,675,114],{},[58,639,640],{},"Join"," node onto the canvas, select mode as ",[58,643,644],{},"reduced expression",", and set the ",[58,647,648],{},"Reduce exp",[148,650,651],{},"$A + payload.amount",". Set Initial value to ",[148,654,655],{},"0",", and ",[58,658,659],{},"Fix-up exp",[148,661,662],{},"$A",". Give this ",[58,665,666],{},"join"," node the name \"Calculate total\". This function operates similarly to using the javascript reduce method on an array to calculate the sum of its values. ",[148,669,662],{}," stores the accumulated value, and with every incoming message payload, it adds the ",[148,672,673],{},"payload.amount"," value to it, for more details on this refer to the ",[17,676,678],{"href":677},"\u002Fnode-red\u002Fcore-nodes\u002Fjoin\u002F","core node docs on join node",[10,680,681,686],{},[37,682],{"alt":683,"dataZoomable":40,"src":684,"title":685},"\"Screenshot displaying the join node calculating the total income and expense data\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-chart-widget-calculate-total-join-node.png","Screenshot displaying the join node calculating the total income and expense data",[44,687,685],{},[63,689,690],{"start":246},[66,691,692],{},"Drag an another join node onto the canvas set mode to manual, combine each to complete message, to create to array and After a number of message parts to 2 and give it name \"combine two objects into array\".",[10,694,695,700],{},[37,696],{"alt":697,"dataZoomable":40,"src":698,"title":699},"\"Screenshot displaying the join node combining the income and expense object into the array\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-chart-widget-retrieve-combine-object-join-node.png","Screenshot displaying the join node combining the income and expense object into the",[44,701,702],{},"Screenshot displaying the join node combining the income and expense object into the array",[63,704,705,717],{"start":246},[66,706,480,707,483,709,711,712,714,715,486],{},[58,708,390],{},[58,710,564],{}," node named \"Retrieve Income\" and \"Retrieve Expense\". Then, connect the outputs of the \"Retrieve Income\" and \"Retrieve Expense\" ",[58,713,564],{}," nodes to the input of the ",[58,716,611],{},[66,718,719,720,722,723,725,726,525,728,730,731,525,733,735],{},"Next, connect the output of the ",[58,721,611],{}," node to the ",[58,724,564],{}," node named \"Convert Amount to Number\". Afterward, connect the output of that ",[58,727,564],{},[58,729,640],{}," node named \"Calculate Total\". Finally, connect the output of the \"Calculate Total\" ",[58,732,640],{},[58,734,640],{}," node named \"Combine Objects into Array\".",[50,737,739],{"id":738},"displaying-data-on-the-chart","Displaying data on the chart",[10,741,742],{},"To display charts on the dashboard, we have to use the ui-chart widget which allows us to display different types of charts on a dashboard including linear, bar, scatter, etc. This accepts an array and object as input.",[63,744,745,750,756,770],{},[66,746,142,747,71],{},[58,748,749],{},"ui-chart",[66,751,752,753,114],{},"Double-click on the widget and select Type as ",[58,754,755],{},"bar",[66,757,758,759,762,763,766,767,769],{},"Configure the series to ",[58,760,761],{},"category"," and the y-axis to ",[58,764,765],{},"amount",". This configuration informs the chart that the ",[58,768,765],{}," property of the input objects will be plotted on the y-axis and category to the x-axis of the chart.",[66,771,480,772,774,775,777],{},[58,773,666],{}," node named \"Combine Objects into Array\" to the ",[58,776,749],{}," widget's input.",[10,779,780,785],{},[37,781],{"alt":782,"dataZoomable":40,"src":783,"title":784},"\"Screenshot displaying the ui-chart widget's configuration\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-chart-widget.png","Screenshot displaying the ui-chart widget's configuration",[44,786,784],{},[50,788,790],{"id":789},"adding-custom-footer-with-ui-template","Adding custom footer with ui-template",[10,792,793,794,797,798,114],{},"With the ",[58,795,796],{},"ui-template"," widget, we can add a custom component to our app using Vue.js. It also allows adding custom CSS for the dashboard and lot of other things. For more information refer to ",[17,799,802],{"href":800,"rel":801},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-template.html",[112],"ui-template docs",[10,804,805],{},"Using this widget, we will add a footer to our application.",[63,807,808,812,815],{},[66,809,407,810,71],{},[58,811,796],{},[66,813,814],{},"Set the widget type (scoped UI) that will render this widget on the entire dashboard, eliminating the need to add separate footers for each page of the dashboard.",[66,816,817,818,61],{},"Insert the following vue.js code in the ",[58,819,796],{},[157,821,823],{"className":159,"code":822,"language":161,"meta":40,"style":40},"\u003Ctemplate>\n  \u003C!-- Footer Component -->\n  \u003Cdiv class=\"footer\">\n    \u003C!-- Description of the Income-Expense Tracker -->\n    \u003Cdiv>\n      Welcome to our comprehensive income expense tracker! Take control of your finances by monitoring your income and\n      expenses effortlessly. Our user-friendly interface makes it simple to record transactions, categorize expenses, and\n      analyze your financial trends. With real-time insights into your spending habits, you can make smarter financial\n      decisions and achieve your money goals faster.\n    \u003C\u002Fdiv>\n    \u003C!-- Copyright Information -->\n    \u003Cdiv class=\"copyright\">\n      \u003C!-- Display Current Year and Copyright Information -->\n      2024 — \u003Cstrong>Vuetify\u003C\u002Fstrong>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cstyle scoped>\n  \u002F* Make the footer occupy all available space *\u002F\n  .footer {\n    position:absolute;\n    bottom:0;\n    background-color:rgb(26,26,26);\n    color:rgb(238,238,238);\n    height:130px;\n    text-align:center;\n    padding:14px;\n  }\n\n  .copyright{\n    margin-top:10px;\n  }\n\u003C\u002Fstyle>\n",[148,824,825,837,842,860,865,874,879,884,889,894,903,908,923,928,942,950,959,968,981,987,993,999,1010,1042,1065,1071,1082,1088,1094,1099,1105,1116,1121],{"__ignoreMap":40},[165,826,827,830,834],{"class":167,"line":168},[165,828,829],{"class":182},"\u003C",[165,831,833],{"class":832},"s9eBZ","template",[165,835,836],{"class":182},">\n",[165,838,839],{"class":167,"line":175},[165,840,841],{"class":182},"  \u003C!-- Footer Component -->\n",[165,843,844,847,850,853,855,858],{"class":167,"line":212},[165,845,846],{"class":182},"  \u003C",[165,848,849],{"class":832},"div",[165,851,852],{"class":192}," class",[165,854,186],{"class":178},[165,856,857],{"class":199},"\"footer\"",[165,859,836],{"class":182},[165,861,862],{"class":167,"line":219},[165,863,864],{"class":182},"    \u003C!-- Description of the Income-Expense Tracker -->\n",[165,866,867,870,872],{"class":167,"line":225},[165,868,869],{"class":182},"    \u003C",[165,871,849],{"class":832},[165,873,836],{"class":182},[165,875,876],{"class":167,"line":237},[165,877,878],{"class":182},"      Welcome to our comprehensive income expense tracker! Take control of your finances by monitoring your income and\n",[165,880,881],{"class":167,"line":246},[165,882,883],{"class":182},"      expenses effortlessly. Our user-friendly interface makes it simple to record transactions, categorize expenses, and\n",[165,885,886],{"class":167,"line":258},[165,887,888],{"class":182},"      analyze your financial trends. With real-time insights into your spending habits, you can make smarter financial\n",[165,890,891],{"class":167,"line":264},[165,892,893],{"class":182},"      decisions and achieve your money goals faster.\n",[165,895,896,899,901],{"class":167,"line":269},[165,897,898],{"class":182},"    \u003C\u002F",[165,900,849],{"class":832},[165,902,836],{"class":182},[165,904,905],{"class":167,"line":275},[165,906,907],{"class":182},"    \u003C!-- Copyright Information -->\n",[165,909,910,912,914,916,918,921],{"class":167,"line":291},[165,911,869],{"class":182},[165,913,849],{"class":832},[165,915,852],{"class":192},[165,917,186],{"class":178},[165,919,920],{"class":199},"\"copyright\"",[165,922,836],{"class":182},[165,924,925],{"class":167,"line":296},[165,926,927],{"class":182},"      \u003C!-- Display Current Year and Copyright Information -->\n",[165,929,930,933,935,938,940],{"class":167,"line":302},[165,931,932],{"class":182},"      2024 — \u003C",[165,934,58],{"class":832},[165,936,937],{"class":182},">Vuetify\u003C\u002F",[165,939,58],{"class":832},[165,941,836],{"class":182},[165,943,944,946,948],{"class":167,"line":316},[165,945,898],{"class":182},[165,947,849],{"class":832},[165,949,836],{"class":182},[165,951,952,955,957],{"class":167,"line":321},[165,953,954],{"class":182},"  \u003C\u002F",[165,956,849],{"class":832},[165,958,836],{"class":182},[165,960,961,964,966],{"class":167,"line":327},[165,962,963],{"class":182},"\u003C\u002F",[165,965,833],{"class":832},[165,967,836],{"class":182},[165,969,971,973,976,979],{"class":167,"line":970},18,[165,972,829],{"class":182},[165,974,975],{"class":832},"style",[165,977,978],{"class":192}," scoped",[165,980,836],{"class":182},[165,982,984],{"class":167,"line":983},19,[165,985,986],{"class":182},"  \u002F* Make the footer occupy all available space *\u002F\n",[165,988,990],{"class":167,"line":989},20,[165,991,992],{"class":182},"  .footer {\n",[165,994,996],{"class":167,"line":995},21,[165,997,998],{"class":182},"    position:absolute;\n",[165,1000,1002,1005,1008],{"class":167,"line":1001},22,[165,1003,1004],{"class":182},"    bottom:",[165,1006,655],{"class":1007},"sj4cs",[165,1009,313],{"class":182},[165,1011,1013,1016,1019,1022,1025,1027,1030,1033,1035,1037,1039],{"class":167,"line":1012},23,[165,1014,1015],{"class":182},"    background",[165,1017,1018],{"class":178},"-",[165,1020,1021],{"class":182},"color:",[165,1023,1024],{"class":192},"rgb",[165,1026,196],{"class":182},[165,1028,1029],{"class":1007},"26",[165,1031,1032],{"class":182},",",[165,1034,1029],{"class":1007},[165,1036,1032],{"class":182},[165,1038,1029],{"class":1007},[165,1040,1041],{"class":182},");\n",[165,1043,1045,1048,1050,1052,1055,1057,1059,1061,1063],{"class":167,"line":1044},24,[165,1046,1047],{"class":182},"    color:",[165,1049,1024],{"class":192},[165,1051,196],{"class":182},[165,1053,1054],{"class":1007},"238",[165,1056,1032],{"class":182},[165,1058,1054],{"class":1007},[165,1060,1032],{"class":182},[165,1062,1054],{"class":1007},[165,1064,1041],{"class":182},[165,1066,1068],{"class":167,"line":1067},25,[165,1069,1070],{"class":182},"    height:130px;\n",[165,1072,1074,1077,1079],{"class":167,"line":1073},26,[165,1075,1076],{"class":182},"    text",[165,1078,1018],{"class":178},[165,1080,1081],{"class":182},"align:center;\n",[165,1083,1085],{"class":167,"line":1084},27,[165,1086,1087],{"class":182},"    padding:14px;\n",[165,1089,1091],{"class":167,"line":1090},28,[165,1092,1093],{"class":182},"  }\n",[165,1095,1097],{"class":167,"line":1096},29,[165,1098,216],{"emptyLinePlaceholder":215},[165,1100,1102],{"class":167,"line":1101},30,[165,1103,1104],{"class":182},"  .copyright{\n",[165,1106,1108,1111,1113],{"class":167,"line":1107},31,[165,1109,1110],{"class":182},"    margin",[165,1112,1018],{"class":178},[165,1114,1115],{"class":182},"top:10px;\n",[165,1117,1119],{"class":167,"line":1118},32,[165,1120,1093],{"class":182},[165,1122,1124,1126,1128],{"class":167,"line":1123},33,[165,1125,963],{"class":182},[165,1127,975],{"class":832},[165,1129,836],{"class":182},[10,1131,1132],{},[37,1133],{"alt":1134,"dataZoomable":40,"src":1135,"title":1136},"\"Screenshot displaying the ui-template widget's configuration\"","\u002Fblog\u002F2024\u002F05\u002Fimages\u002Fexploring-dashboard-2-widgets-template-widget.png","Screenshot displaying the ui-template widget's configuration",[50,1138,1140],{"id":1139},"deploying-your-application-flow","Deploying your application flow",[1142,1143],"render-flow",{":height":1144,"flow":1145},"450","W3siaWQiOiIzMDFjMWZkOGUyOWMzYWFlIiwidHlwZSI6InVpLXRlbXBsYXRlIiwieiI6IjdhYzM4OTBkZmE3NDcwM2IiLCJncm91cCI6IiIsInBhZ2UiOiIiLCJ1aSI6ImEwYTg1YTVmNGMyOWFmNTAiLCJuYW1lIjoiRm9vdGVyIiwib3JkZXIiOjAsIndpZHRoIjowLCJoZWlnaHQiOjAsImhlYWQiOiIiLCJmb3JtYXQiOiI8dGVtcGxhdGU+XG4gIDwhLS0gRm9vdGVyIENvbXBvbmVudCAtLT5cbiAgPGRpdiBjbGFzcz1cImZvb3RlclwiPlxuICAgIDwhLS0gRGVzY3JpcHRpb24gb2YgdGhlIEluY29tZS1FeHBlbnNlIFRyYWNrZXIgLS0+XG4gICAgPGRpdj5cbiAgICAgIFdlbGNvbWUgdG8gb3VyIGNvbXByZWhlbnNpdmUgaW5jb21lIGV4cGVuc2UgdHJhY2tlciEgVGFrZSBjb250cm9sIG9mIHlvdXIgZmluYW5jZXMgYnkgbW9uaXRvcmluZyB5b3VyIGluY29tZSBhbmRcbiAgICAgIGV4cGVuc2VzIGVmZm9ydGxlc3NseS4gT3VyIHVzZXItZnJpZW5kbHkgaW50ZXJmYWNlIG1ha2VzIGl0IHNpbXBsZSB0byByZWNvcmQgdHJhbnNhY3Rpb25zLCBjYXRlZ29yaXplIGV4cGVuc2VzLFxuICAgICAgYW5kXG4gICAgICBhbmFseXplIHlvdXIgZmluYW5jaWFsIHRyZW5kcy4gV2l0aCByZWFsLXRpbWUgaW5zaWdodHMgaW50byB5b3VyIHNwZW5kaW5nIGhhYml0cywgeW91IGNhbiBtYWtlIHNtYXJ0ZXIgZmluYW5jaWFsXG4gICAgICBkZWNpc2lvbnMgYW5kIGFjaGlldmUgeW91ciBtb25leSBnb2FscyBmYXN0ZXIuXG4gICAgPC9kaXY+XG4gICAgPCEtLSBDb3B5cmlnaHQgSW5mb3JtYXRpb24gLS0+XG4gICAgPGRpdiBjbGFzcz1cImNvcHlyaWdodFwiPlxuICAgICAgPCEtLSBEaXNwbGF5IEN1cnJlbnQgWWVhciBhbmQgQ29weXJpZ2h0IEluZm9ybWF0aW9uIC0tPlxuICAgICAyMDI0IOKAlCA8c3Ryb25nPlZ1ZXRpZnk8L3N0cm9uZz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgc2NvcGVkPlxuICAvKiBNYWtlIHRoZSBmb290ZXIgb2NjdXB5IGFsbCBhdmFpbGFibGUgc3BhY2UgKi9cbiAgLmZvb3RlciB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvdHRvbTogMDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjYsIDI2LCAyNik7XG4gICAgY29sb3I6IHJnYigyMzgsIDIzOCwgMjM4KTtcbiAgICBoZWlnaHQ6IDEzMHB4O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBwYWRkaW5nOiAxNHB4O1xuICB9XG5cbiAgLmNvcHlyaWdodCB7XG4gICAgbWFyZ2luLXRvcDogMTBweDtcbiAgfVxuPC9zdHlsZT4iLCJzdG9yZU91dE1lc3NhZ2VzIjp0cnVlLCJwYXNzdGhydSI6dHJ1ZSwicmVzZW5kT25SZWZyZXNoIjp0cnVlLCJ0ZW1wbGF0ZVNjb3BlIjoid2lkZ2V0OnVpIiwiY2xhc3NOYW1lIjoiIiwieCI6OTEwLCJ5Ijo3MDAsIndpcmVzIjpbW11dfSx7ImlkIjoiMzQyZjNlZTIxNWQzMmZkYyIsInR5cGUiOiJncm91cCIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwibmFtZSI6Ik5ldyBJY29tZSBwYWdlIiwic3R5bGUiOnsibGFiZWwiOnRydWV9LCJub2RlcyI6WyJkMDI4Yzg3ODM1MGQxOWUxIiwiNDNlNzliYjc3ZDcxOGM5NSIsIjViYTVkOGJmZjFhNzdiZWEiXSwieCI6Mjc0LCJ5IjoyNzksInciOjc1MiwiaCI6ODJ9LHsiaWQiOiJkMDI4Yzg3ODM1MGQxOWUxIiwidHlwZSI6InVpLWZvcm0iLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiIzNDJmM2VlMjE1ZDMyZmRjIiwibmFtZSI6IkluY29tZSBTdWJtaXNzaW9uIEZvcm0iLCJncm91cCI6Ijk2MTUyODk0M2UxYmI2OTgiLCJsYWJlbCI6IiIsIm9yZGVyIjoxLCJ3aWR0aCI6IjAiLCJoZWlnaHQiOiIwIiwib3B0aW9ucyI6W3sibGFiZWwiOiJEYXRlIiwia2V5IjoiZGF0ZSIsInR5cGUiOiJkYXRlIiwicmVxdWlyZWQiOnRydWUsInJvd3MiOm51bGx9LHsibGFiZWwiOiJEZXNjcmlwdGlvbiIsImtleSI6ImRlc2NyaXB0aW9uIiwidHlwZSI6InRleHQiLCJyZXF1aXJlZCI6dHJ1ZSwicm93cyI6bnVsbH0seyJsYWJlbCI6IkFtb3VudCIsImtleSI6ImFtb3VudCIsInR5cGUiOiJudW1iZXIiLCJyZXF1aXJlZCI6dHJ1ZSwicm93cyI6bnVsbH0seyJsYWJlbCI6Ik5vdGUiLCJrZXkiOiJub3RlIiwidHlwZSI6InRleHQiLCJyZXF1aXJlZCI6ZmFsc2UsInJvd3MiOm51bGx9XSwiZm9ybVZhbHVlIjp7ImRhdGUiOiIiLCJkZXNjcmlwdGlvbiI6IiIsImFtb3VudCI6IiIsIm5vdGUiOiIifSwicGF5bG9hZCI6IiIsInN1Ym1pdCI6InN1Ym1pdCIsImNhbmNlbCI6ImNsZWFyIiwicmVzZXRPblN1Ym1pdCI6dHJ1ZSwidG9waWMiOiJ0b3BpYyIsInRvcGljVHlwZSI6Im1zZyIsInNwbGl0TGF5b3V0IjoiIiwiY2xhc3NOYW1lIjoiIiwieCI6NDEwLCJ5IjozMjAsIndpcmVzIjpbWyI1YmE1ZDhiZmYxYTc3YmVhIl1dfSx7ImlkIjoiNDNlNzliYjc3ZDcxOGM5NSIsInR5cGUiOiJ1aS1ub3RpZmljYXRpb24iLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiIzNDJmM2VlMjE1ZDMyZmRjIiwidWkiOiJhMGE4NWE1ZjRjMjlhZjUwIiwicG9zaXRpb24iOiJjZW50ZXIgY2VudGVyIiwiY29sb3JEZWZhdWx0Ijp0cnVlLCJjb2xvciI6IiMwMDAwMDAiLCJkaXNwbGF5VGltZSI6IjMiLCJzaG93Q291bnRkb3duIjp0cnVlLCJvdXRwdXRzIjowLCJhbGxvd0Rpc21pc3MiOnRydWUsImRpc21pc3NUZXh0IjoiQ2xvc2UiLCJyYXciOmZhbHNlLCJjbGFzc05hbWUiOiIiLCJuYW1lIjoiIiwieCI6OTEwLCJ5IjozMjAsIndpcmVzIjpbXX0seyJpZCI6IjViYTVkOGJmZjFhNzdiZWEiLCJ0eXBlIjoiZnVuY3Rpb24iLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiIzNDJmM2VlMjE1ZDMyZmRjIiwibmFtZSI6IlN0b3JlIGluY29tZSIsImZ1bmMiOiJsZXQgaW5jb21lID0gZ2xvYmFsLmdldCgnaW5jb21lJykgfHwgW107XG5cbmluY29tZS5wdXNoKHtcbiAgICAuLi5tc2cucGF5bG9hZCxcbiAgICB0eXBlOlwiaW5jb21lXCIsXG59KTtcblxuZ2xvYmFsLnNldCgnaW5jb21lJywgaW5jb21lKTtcblxubXNnLnBheWxvYWQgPSBcIlRoYW5rIHlvdSBmb3Igc3VibWl0dGluZyBpbmNvbWUhXCJcblxucmV0dXJuIG1zZzsiLCJvdXRwdXRzIjoxLCJ0aW1lb3V0IjowLCJub2VyciI6MCwiaW5pdGlhbGl6ZSI6IiIsImZpbmFsaXplIjoiIiwibGlicyI6W10sIngiOjY1MCwieSI6MzIwLCJ3aXJlcyI6W1siNDNlNzliYjc3ZDcxOGM5NSJdXX0seyJpZCI6Ijk2MTUyODk0M2UxYmI2OTgiLCJ0eXBlIjoidWktZ3JvdXAiLCJuYW1lIjoiSW5jb21lIFN1Ym1pc3Npb24gRm9ybSIsInBhZ2UiOiJkOTU0ZDczZjlkY2QxNDcyIiwid2lkdGgiOiIxMiIsImhlaWdodCI6IjEiLCJvcmRlciI6MSwic2hvd1RpdGxlIjp0cnVlLCJjbGFzc05hbWUiOiIiLCJ2aXNpYmxlIjoidHJ1ZSIsImRpc2FibGVkIjoiZmFsc2UifSx7ImlkIjoiZDk1NGQ3M2Y5ZGNkMTQ3MiIsInR5cGUiOiJ1aS1wYWdlIiwibmFtZSI6Ik5ldyBJbmNvbWUiLCJ1aSI6ImEwYTg1YTVmNGMyOWFmNTAiLCJwYXRoIjoiL25ldy1JY29tZSIsImljb24iOiJiYW5rLXRyYW5zZmVyLWluIiwibGF5b3V0Ijoibm90ZWJvb2siLCJ0aGVtZSI6ImFlZWVjM2ZjMTA3N2ViMWMiLCJvcmRlciI6MSwiY2xhc3NOYW1lIjoiIiwidmlzaWJsZSI6InRydWUiLCJkaXNhYmxlZCI6ImZhbHNlIn0seyJpZCI6ImFlZWVjM2ZjMTA3N2ViMWMiLCJ0eXBlIjoidWktdGhlbWUiLCJuYW1lIjoiZGFzaGJvYXJkIiwiY29sb3JzIjp7InN1cmZhY2UiOiIjMWExYTFhIiwicHJpbWFyeSI6IiMwMDk0Y2UiLCJiZ1BhZ2UiOiIjZWVlZWVlIiwiZ3JvdXBCZyI6IiNmZmZmZmYiLCJncm91cE91dGxpbmUiOiIjY2NjY2NjIn0sInNpemVzIjp7InBhZ2VQYWRkaW5nIjoiMTJweCIsImdyb3VwR2FwIjoiMTJweCIsImdyb3VwQm9yZGVyUmFkaXVzIjoiNHB4Iiwid2lkZ2V0R2FwIjoiMTJweCJ9fSx7ImlkIjoiNGFmYjQ4MTRiZTU2YTlhOCIsInR5cGUiOiJncm91cCIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwibmFtZSI6Ik5ldyBFeHBlbnNlIHBhZ2UiLCJzdHlsZSI6eyJsYWJlbCI6dHJ1ZX0sIm5vZGVzIjpbImU4MmI3MTlkODk5Y2JmNzMiLCIzNDU3ODQ4NjUyYWQ3NWUxIiwiYmQ5MGE5YWQ2MTI0MDhkMyJdLCJ4IjoxMDU0LCJ5IjoyNzksInciOjc1MiwiaCI6ODJ9LHsiaWQiOiJlODJiNzE5ZDg5OWNiZjczIiwidHlwZSI6InVpLWZvcm0iLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiI0YWZiNDgxNGJlNTZhOWE4IiwibmFtZSI6IkV4cGVuc2UgU3VibWlzc2lvbiBGb3JtIiwiZ3JvdXAiOiI4NTQ3MDY2NTFjZDhhOGYyIiwibGFiZWwiOiIiLCJvcmRlciI6MSwid2lkdGgiOiIxMiIsImhlaWdodCI6IjEiLCJvcHRpb25zIjpbeyJsYWJlbCI6IkRhdGUiLCJrZXkiOiJkYXRlIiwidHlwZSI6ImRhdGUiLCJyZXF1aXJlZCI6dHJ1ZSwicm93cyI6bnVsbH0seyJsYWJlbCI6IkRlc2NyaXB0aW9uIiwia2V5IjoiZGVzY3JpcHRpb24iLCJ0eXBlIjoidGV4dCIsInJlcXVpcmVkIjp0cnVlLCJyb3dzIjpudWxsfSx7ImxhYmVsIjoiQ2F0ZWdvcnkiLCJrZXkiOiJjYXRlZ29yeSIsInR5cGUiOiJ0ZXh0IiwicmVxdWlyZWQiOnRydWUsInJvd3MiOm51bGx9LHsibGFiZWwiOiJBbW91bnQiLCJrZXkiOiJhbW91bnQiLCJ0eXBlIjoibnVtYmVyIiwicmVxdWlyZWQiOnRydWUsInJvd3MiOm51bGx9LHsibGFiZWwiOiJOb3RlIiwia2V5Ijoibm90ZSIsInR5cGUiOiJ0ZXh0IiwicmVxdWlyZWQiOmZhbHNlLCJyb3dzIjpudWxsfV0sImZvcm1WYWx1ZSI6eyJkYXRlIjoiIiwiZGVzY3JpcHRpb24iOiIiLCJjYXRlZ29yeSI6IiIsImFtb3VudCI6IiIsIm5vdGUiOiIifSwicGF5bG9hZCI6IiIsInN1Ym1pdCI6InN1Ym1pdCIsImNhbmNlbCI6ImNsZWFyIiwicmVzZXRPblN1Ym1pdCI6dHJ1ZSwidG9waWMiOiJ0b3BpYyIsInRvcGljVHlwZSI6Im1zZyIsInNwbGl0TGF5b3V0IjoiIiwiY2xhc3NOYW1lIjoiIiwieCI6MTE5MCwieSI6MzIwLCJ3aXJlcyI6W1siYmQ5MGE5YWQ2MTI0MDhkMyJdXX0seyJpZCI6IjM0NTc4NDg2NTJhZDc1ZTEiLCJ0eXBlIjoidWktbm90aWZpY2F0aW9uIiwieiI6IjdhYzM4OTBkZmE3NDcwM2IiLCJnIjoiNGFmYjQ4MTRiZTU2YTlhOCIsInVpIjoiYTBhODVhNWY0YzI5YWY1MCIsInBvc2l0aW9uIjoiY2VudGVyIGNlbnRlciIsImNvbG9yRGVmYXVsdCI6dHJ1ZSwiY29sb3IiOiIjMDAwMDAwIiwiZGlzcGxheVRpbWUiOiIzIiwic2hvd0NvdW50ZG93biI6dHJ1ZSwib3V0cHV0cyI6MCwiYWxsb3dEaXNtaXNzIjp0cnVlLCJkaXNtaXNzVGV4dCI6IkNsb3NlIiwicmF3IjpmYWxzZSwiY2xhc3NOYW1lIjoiIiwibmFtZSI6IiIsIngiOjE2OTAsInkiOjMyMCwid2lyZXMiOltdfSx7ImlkIjoiYmQ5MGE5YWQ2MTI0MDhkMyIsInR5cGUiOiJmdW5jdGlvbiIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwiZyI6IjRhZmI0ODE0YmU1NmE5YTgiLCJuYW1lIjoiU3RvcmUgZXhwZW5zZSIsImZ1bmMiOiJsZXQgZXhwZW5zZSA9IGdsb2JhbC5nZXQoJ2V4cGVuc2UnKSB8fCBbXTtcblxuZXhwZW5zZS5wdXNoKHtcbiAgICAuLi5tc2cucGF5bG9hZCxcbiAgICB0eXBlOiBcImV4cGVuc2VcIixcbn0pO1xuXG5nbG9iYWwuc2V0KCdleHBlbnNlJywgZXhwZW5zZSk7XG5cbm1zZy5wYXlsb2FkID0gXCJUaGFuayB5b3UgZm9yIHN1Ym1pdHRpbmcgZXhwZW5zZSFcIlxuXG5yZXR1cm4gbXNnOyIsIm91dHB1dHMiOjEsInRpbWVvdXQiOjAsIm5vZXJyIjowLCJpbml0aWFsaXplIjoiIiwiZmluYWxpemUiOiIiLCJsaWJzIjpbXSwieCI6MTQyMCwieSI6MzIwLCJ3aXJlcyI6W1siMzQ1Nzg0ODY1MmFkNzVlMSJdXX0seyJpZCI6Ijg1NDcwNjY1MWNkOGE4ZjIiLCJ0eXBlIjoidWktZ3JvdXAiLCJuYW1lIjoiRXhwZW5zZSBTdWJtaXNzaW9uIEZvcm0iLCJwYWdlIjoiOTdiZjNlODdmNGJkZGRjMSIsIndpZHRoIjoiMTIiLCJoZWlnaHQiOiIxIiwib3JkZXIiOjIsInNob3dUaXRsZSI6dHJ1ZSwiY2xhc3NOYW1lIjoiIiwidmlzaWJsZSI6InRydWUiLCJkaXNhYmxlZCI6ImZhbHNlIn0seyJpZCI6Ijk3YmYzZTg3ZjRiZGRkYzEiLCJ0eXBlIjoidWktcGFnZSIsIm5hbWUiOiJOZXcgRXhwZW5zZSIsInVpIjoiYTBhODVhNWY0YzI5YWY1MCIsInBhdGgiOiIvbmV3LWV4cGVuc2UiLCJpY29uIjoiYmFuay10cmFuc2Zlci1vdXQiLCJsYXlvdXQiOiJub3RlYm9vayIsInRoZW1lIjoiYWVlZWMzZmMxMDc3ZWIxYyIsIm9yZGVyIjoyLCJjbGFzc05hbWUiOiIiLCJ2aXNpYmxlIjoidHJ1ZSIsImRpc2FibGVkIjoiZmFsc2UifSx7ImlkIjoiNzcyMTdlMjU2ZWY3NTMyOCIsInR5cGUiOiJncm91cCIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwibmFtZSI6IllvdXIgaWNvbWUgYW5kIGV4cGVuc2UgdGFibGUiLCJzdHlsZSI6eyJsYWJlbCI6dHJ1ZX0sIm5vZGVzIjpbIjQ1MmQ1NjFiZjc5NzI3Y2IiLCIwYzY0NTY3YzgxZGQ2YThkIl0sIngiOjI3NCwieSI6Mzk5LCJ3Ijo1NzIsImgiOjgyfSx7ImlkIjoiNDUyZDU2MWJmNzk3MjdjYiIsInR5cGUiOiJ1aS10YWJsZSIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwiZyI6Ijc3MjE3ZTI1NmVmNzUzMjgiLCJncm91cCI6ImU4NDhhNWU0OGE2NTQ5YzkiLCJuYW1lIjoiIiwibGFiZWwiOiJ0ZXh0Iiwib3JkZXIiOjIsIndpZHRoIjowLCJoZWlnaHQiOjAsIm1heHJvd3MiOjAsInBhc3N0aHJ1IjpmYWxzZSwiYXV0b2NvbHMiOnRydWUsInNlbGVjdGlvblR5cGUiOiJjbGljayIsImNvbHVtbnMiOltdLCJ4Ijo3NzAsInkiOjQ0MCwid2lyZXMiOltbXV19LHsiaWQiOiIwYzY0NTY3YzgxZGQ2YThkIiwidHlwZSI6ImNoYW5nZSIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwiZyI6Ijc3MjE3ZTI1NmVmNzUzMjgiLCJuYW1lIjoiTWVyZ2UgaW5jb21lIGFuZCBleHBlbnNlIGRhdGEiLCJydWxlcyI6W3sidCI6InNldCIsInAiOiJwYXlsb2FkIiwicHQiOiJtc2ciLCJ0byI6IlsgICAgJGdsb2JhbENvbnRleHQoXCJpbmNvbWVcIiksXHQgICAkZ2xvYmFsQ29udGV4dChcImV4cGVuc2VcIilcdF0iLCJ0b3QiOiJqc29uYXRhIn1dLCJhY3Rpb24iOiIiLCJwcm9wZXJ0eSI6IiIsImZyb20iOiIiLCJ0byI6IiIsInJlZyI6ZmFsc2UsIngiOjQ0MCwieSI6NDQwLCJ3aXJlcyI6W1siNDUyZDU2MWJmNzk3MjdjYiJdXX0seyJpZCI6ImU4NDhhNWU0OGE2NTQ5YzkiLCJ0eXBlIjoidWktZ3JvdXAiLCJuYW1lIjoiWW91ciBJbmNvbWUgYW5kIEV4cGVuc2UiLCJwYWdlIjoiN2FiZjBiM2NiNmYzOGNhMyIsIndpZHRoIjoiMTIiLCJoZWlnaHQiOiI1Iiwib3JkZXIiOjIsInNob3dUaXRsZSI6dHJ1ZSwiY2xhc3NOYW1lIjoiIiwidmlzaWJsZSI6InRydWUiLCJkaXNhYmxlZCI6ImZhbHNlIn0seyJpZCI6IjdhYmYwYjNjYjZmMzhjYTMiLCJ0eXBlIjoidWktcGFnZSIsIm5hbWUiOiJZb3VyIEluY29tZSBhbmQgZXhwZW5zZSIsInVpIjoiYTBhODVhNWY0YzI5YWY1MCIsInBhdGgiOiIveW91ci1pY29tZS1leHBlbnNlIiwiaWNvbiI6ImNhbGVuZGFyLW11bHRpcGxlLWNoZWNrIiwibGF5b3V0IjoiZ3JpZCIsInRoZW1lIjoiYWVlZWMzZmMxMDc3ZWIxYyIsIm9yZGVyIjozLCJjbGFzc05hbWUiOiIiLCJ2aXNpYmxlIjoidHJ1ZSIsImRpc2FibGVkIjoiZmFsc2UifSx7ImlkIjoiMWI3ODc2OWQ2ZDI3ZDEwMiIsInR5cGUiOiJncm91cCIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwibmFtZSI6IkV2ZW50IGxpc3RlciIsInN0eWxlIjp7ImxhYmVsIjp0cnVlfSwibm9kZXMiOlsiOWNlNmRiMDRiMmM5ZDdiMiJdLCJ4Ijo3NCwieSI6NDc5LCJ3IjoxNTIsImgiOjgyfSx7ImlkIjoiOWNlNmRiMDRiMmM5ZDdiMiIsInR5cGUiOiJ1aS1ldmVudCIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwiZyI6IjFiNzg3NjlkNmQyN2QxMDIiLCJ1aSI6ImEwYTg1YTVmNGMyOWFmNTAiLCJuYW1lIjoiIiwieCI6MTUwLCJ5Ijo1MjAsIndpcmVzIjpbWyIwYzY0NTY3YzgxZGQ2YThkIiwiMmNhNTUyYzdlNTZiMzYxOSIsImE3MzYwZTRhNjJiZmM1MTgiXV19LHsiaWQiOiIzMjUwMjgwN2YyNGY3OWI4IiwidHlwZSI6Imdyb3VwIiwieiI6IjdhYzM4OTBkZmE3NDcwM2IiLCJuYW1lIjoiT3ZlcnZpZXcgY2hhcnQiLCJzdHlsZSI6eyJsYWJlbCI6dHJ1ZX0sIm5vZGVzIjpbIjQyNGIzNTkwMDcyMmU3NDAiLCIwNThhNzdhNjU2NTNkM2Y4IiwiNzI0NjIyOGU1N2FjMWZjNSIsIjJjYTU1MmM3ZTU2YjM2MTkiLCIyM2E0YTdkMTViNDQ4NzZiIiwiYTczNjBlNGE2MmJmYzUxOCIsImZlMzA4NTgxYjhhNWI5ZjEiXSwieCI6Mjc0LCJ5Ijo1MTksInciOjEzOTIsImgiOjE0Mn0seyJpZCI6IjQyNGIzNTkwMDcyMmU3NDAiLCJ0eXBlIjoidWktY2hhcnQiLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiIzMjUwMjgwN2YyNGY3OWI4IiwiZ3JvdXAiOiI1NGVjYTgzZmViN2MxNDc5IiwibmFtZSI6Ik92ZXJ2aWV3IENoYXJ0IiwibGFiZWwiOiJjaGFydCIsIm9yZGVyIjoyLCJjaGFydFR5cGUiOiJiYXIiLCJjYXRlZ29yeSI6InRvcGljIiwiY2F0ZWdvcnlUeXBlIjoicHJvcGVydHkiLCJ4QXhpc1Byb3BlcnR5IjoiIiwieEF4aXNQcm9wZXJ0eVR5cGUiOiJtc2ciLCJ4QXhpc1R5cGUiOiJjYXRlZ29yeSIsInlBeGlzUHJvcGVydHkiOiJwYXlsb2FkIiwieW1pbiI6IiIsInltYXgiOiIiLCJhY3Rpb24iOiJyZXBsYWNlIiwicG9pbnRTaGFwZSI6ImNpcmNsZSIsInBvaW50UmFkaXVzIjo0LCJzaG93TGVnZW5kIjpmYWxzZSwicmVtb3ZlT2xkZXIiOjEsInJlbW92ZU9sZGVyVW5pdCI6IjM2MDAiLCJyZW1vdmVPbGRlclBvaW50cyI6IiIsImNvbG9ycyI6WyIjMWViMzNjIiwiI2FlYzdlOCIsIiNmZjdmMGUiLCIjNWYyZWQxIiwiIzk4ZGY4YSIsIiNkNjI3MjgiLCIjZmY5ODk2IiwiIzk0NjdiZCIsIiNjNWIwZDUiXSwid2lkdGgiOiIxMiIsImhlaWdodCI6IjYiLCJjbGFzc05hbWUiOiIiLCJ4IjoxNTYwLCJ5Ijo2MDAsIndpcmVzIjpbW11dfSx7ImlkIjoiMDU4YTc3YTY1NjUzZDNmOCIsInR5cGUiOiJqb2luIiwieiI6IjdhYzM4OTBkZmE3NDcwM2IiLCJnIjoiMzI1MDI4MDdmMjRmNzliOCIsIm5hbWUiOiJDYWxjdWxhdGUgdG90YWwiLCJtb2RlIjoicmVkdWNlIiwiYnVpbGQiOiJvYmplY3QiLCJwcm9wZXJ0eSI6InBheWxvYWQiLCJwcm9wZXJ0eVR5cGUiOiJtc2ciLCJrZXkiOiJ0b3BpYyIsImpvaW5lciI6IlxcbiIsImpvaW5lclR5cGUiOiJzdHIiLCJhY2N1bXVsYXRlIjp0cnVlLCJ0aW1lb3V0IjoiIiwiY291bnQiOiIiLCJyZWR1Y2VSaWdodCI6ZmFsc2UsInJlZHVjZUV4cCI6IiRBK3BheWxvYWQuYW1vdW50IiwicmVkdWNlSW5pdCI6IjAiLCJyZWR1Y2VJbml0VHlwZSI6Im51bSIsInJlZHVjZUZpeHVwIjoiJEEiLCJ4IjoxMDAwLCJ5Ijo2MDAsIndpcmVzIjpbWyJmZTMwODU4MWI4YTViOWYxIl1dfSx7ImlkIjoiNzI0NjIyOGU1N2FjMWZjNSIsInR5cGUiOiJzcGxpdCIsInoiOiI3YWMzODkwZGZhNzQ3MDNiIiwiZyI6IjMyNTAyODA3ZjI0Zjc5YjgiLCJuYW1lIjoiIiwic3BsdCI6IlxcbiIsInNwbHRUeXBlIjoic3RyIiwiYXJyYXlTcGx0IjoxLCJhcnJheVNwbHRUeXBlIjoibGVuIiwic3RyZWFtIjpmYWxzZSwiYWRkbmFtZSI6IiIsIngiOjU1MCwieSI6NjAwLCJ3aXJlcyI6W1siMjNhNGE3ZDE1YjQ0ODc2YiJdXX0seyJpZCI6IjJjYTU1MmM3ZTU2YjM2MTkiLCJ0eXBlIjoiY2hhbmdlIiwieiI6IjdhYzM4OTBkZmE3NDcwM2IiLCJnIjoiMzI1MDI4MDdmMjRmNzliOCIsIm5hbWUiOiJSZXRyaWV2ZSBpbmNvbWUiLCJydWxlcyI6W3sidCI6InNldCIsInAiOiJwYXlsb2FkIiwicHQiOiJtc2ciLCJ0byI6ImluY29tZSIsInRvdCI6Imdsb2JhbCJ9LHsidCI6InNldCIsInAiOiJ0b3BpYyIsInB0IjoibXNnIiwidG8iOiJpbmNvbWUiLCJ0b3QiOiJzdHIifV0sImFjdGlvbiI6IiIsInByb3BlcnR5IjoiIiwiZnJvbSI6IiIsInRvIjoiIiwicmVnIjpmYWxzZSwieCI6MzgwLCJ5Ijo1NjAsIndpcmVzIjpbWyI3MjQ2MjI4ZTU3YWMxZmM1Il1dfSx7ImlkIjoiMjNhNGE3ZDE1YjQ0ODc2YiIsInR5cGUiOiJjaGFuZ2UiLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiIzMjUwMjgwN2YyNGY3OWI4IiwibmFtZSI6IkNvbnZlcnQgYW1vdW50IHRvIG51bWJlciIsInJ1bGVzIjpbeyJ0Ijoic2V0IiwicCI6InBheWxvYWQuYW1vdW50IiwicHQiOiJtc2ciLCJ0byI6IiRudW1iZXIocGF5bG9hZC5hbW91bnQpXHQiLCJ0b3QiOiJqc29uYXRhIn1dLCJhY3Rpb24iOiIiLCJwcm9wZXJ0eSI6IiIsImZyb20iOiIiLCJ0byI6IiIsInJlZyI6ZmFsc2UsIngiOjc2MCwieSI6NjAwLCJ3aXJlcyI6W1siMDU4YTc3YTY1NjUzZDNmOCJdXX0seyJpZCI6ImE3MzYwZTRhNjJiZmM1MTgiLCJ0eXBlIjoiY2hhbmdlIiwieiI6IjdhYzM4OTBkZmE3NDcwM2IiLCJnIjoiMzI1MDI4MDdmMjRmNzliOCIsIm5hbWUiOiJSZXRyaWV2ZSBpbmNvbWUiLCJydWxlcyI6W3sidCI6InNldCIsInAiOiJwYXlsb2FkIiwicHQiOiJtc2ciLCJ0byI6ImV4cGVuc2UiLCJ0b3QiOiJnbG9iYWwifSx7InQiOiJzZXQiLCJwIjoidG9waWMiLCJwdCI6Im1zZyIsInRvIjoiZXhwZW5zZSIsInRvdCI6InN0ciJ9XSwiYWN0aW9uIjoiIiwicHJvcGVydHkiOiIiLCJmcm9tIjoiIiwidG8iOiIiLCJyZWciOmZhbHNlLCJ4IjozODAsInkiOjYyMCwid2lyZXMiOltbIjcyNDYyMjhlNTdhYzFmYzUiXV19LHsiaWQiOiJmZTMwODU4MWI4YTViOWYxIiwidHlwZSI6ImpvaW4iLCJ6IjoiN2FjMzg5MGRmYTc0NzAzYiIsImciOiIzMjUwMjgwN2YyNGY3OWI4IiwibmFtZSI6IkNvbWJpbmUgdHdvIG9iamVjdCBpbnRvIG9uZSBhcnJheSIsIm1vZGUiOiJjdXN0b20iLCJidWlsZCI6ImFycmF5IiwicHJvcGVydHkiOiIiLCJwcm9wZXJ0eVR5cGUiOiJmdWxsIiwia2V5IjoidG9waWMiLCJqb2luZXIiOiJcXG4iLCJqb2luZXJUeXBlIjoic3RyIiwiYWNjdW11bGF0ZSI6ZmFsc2UsInRpbWVvdXQiOiIiLCJjb3VudCI6IjIiLCJyZWR1Y2VSaWdodCI6ZmFsc2UsInJlZHVjZUV4cCI6IiIsInJlZHVjZUluaXQiOiIiLCJyZWR1Y2VJbml0VHlwZSI6IiIsInJlZHVjZUZpeHVwIjoiIiwieCI6MTI3MCwieSI6NjAwLCJ3aXJlcyI6W1siNDI0YjM1OTAwNzIyZTc0MCJdXX0seyJpZCI6IjU0ZWNhODNmZWI3YzE0NzkiLCJ0eXBlIjoidWktZ3JvdXAiLCJuYW1lIjoiT3ZlcnZpZXciLCJwYWdlIjoiNDdiZGU3OWU5NDY5MzNkMiIsIndpZHRoIjoiMTIiLCJoZWlnaHQiOiI0Iiwib3JkZXIiOi0xLCJzaG93VGl0bGUiOnRydWUsImNsYXNzTmFtZSI6IiIsInZpc2libGUiOiJ0cnVlIiwiZGlzYWJsZWQiOiJmYWxzZSJ9LHsiaWQiOiI0N2JkZTc5ZTk0NjkzM2QyIiwidHlwZSI6InVpLXBhZ2UiLCJuYW1lIjoiT3ZlcnZpZXciLCJ1aSI6ImEwYTg1YTVmNGMyOWFmNTAiLCJwYXRoIjoiL292ZXJ2aWV3IiwiaWNvbiI6Imdvb2dsZS1hbmFseXRpY3MiLCJsYXlvdXQiOiJub3RlYm9vayIsInRoZW1lIjoiYWVlZWMzZmMxMDc3ZWIxYyIsIm9yZGVyIjotMSwiY2xhc3NOYW1lIjoiIiwidmlzaWJsZSI6InRydWUiLCJkaXNhYmxlZCI6ImZhbHNlIn0seyJpZCI6ImEwYTg1YTVmNGMyOWFmNTAiLCJ0eXBlIjoidWktYmFzZSIsIm5hbWUiOiJEYXNoYm9hcmQiLCJwYXRoIjoiL2Rhc2hib2FyZCIsImluY2x1ZGVDbGllbnREYXRhIjp0cnVlLCJhY2NlcHRzQ2xpZW50Q29uZmlnIjpbInVpLW5vdGlmaWNhdGlvbiIsInVpLWNvbnRyb2wiLCJ1aS1jaGFydCIsInVpLXRhYmxlIl0sInNob3dQYXRoSW5TaWRlYmFyIjpmYWxzZSwibmF2aWdhdGlvblN0eWxlIjoiaWNvbiJ9XQ==",[63,1147,1148,1155],{},[66,1149,1150,1151,1154],{},"Deploy the flow by clicking the top right ",[58,1152,1153],{},"Deploy"," button.",[66,1156,1157,1158,1161],{},"Locate the *",[58,1159,1160],{},"Open Dashboard"," button at the top-right corner of the Dashboard 2.0 sidebar and click on it to navigate to the dashboard.",[10,1163,1164],{},"Now that we've built an income-expense tracker application and gained a basic understanding of Dashboard 2.0 widgets for building dashboards.",[50,1166,1168],{"id":1167},"up-next","Up next",[10,1170,1171],{},"If you want to enhance this simple application by adding more features or want to make the application personalize for users, consider the following resources:",[1173,1174,1175,1182,1190,1197,1204,1211],"ul",{},[66,1176,1177,1181],{},[17,1178,1180],{"href":1179},"\u002Fwebinars\u002F2024\u002Fnode-red-dashboard-multi-user\u002F","Webinar"," - This webinar provides an in-depth discussion of the Personalised Multi-User Dashboards feature and offers guidance on how to get started with it.",[66,1183,1184,1189],{},[17,1185,1188],{"href":1186,"rel":1187},"https:\u002F\u002Fflowfuse.com\u002Fblog\u002F2024\u002F05\u002Fnode-red-dashboard-2-layout-navigation-styling\u002F",[112],"Comprehensive guide: Node-RED Dashboard 2.0 layout, sidebar, and styling"," - This comprehensive guide will cover everything about Node-RED Dashboard 2.0 styling, layouts and sidebars.",[66,1191,1192,1196],{},[17,1193,1195],{"href":1194},"\u002Fblog\u002F2024\u002F04\u002Fdisplaying-logged-in-users-on-dashboard\u002F","Displaying logged-in users on Dashboard 2.0"," - This detailed guide demonstrates how to display logged-in users on Dashboard 2.0 which using the FlowFuse Multiuser addon and FlowFuse.",[66,1198,1199,1203],{},[17,1200,1202],{"href":1201},"\u002Fblog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2\u002F","How to Build an Admin Dashboard with Node-RED Dashboard 2.0"," - This detailed guide demonstrates how to build a secure admin page in Node-RED Dashboard 2.0.",[66,1205,1206,1210],{},[17,1207,1209],{"href":1208},"\u002Fblog\u002F2024\u002F04\u002Fhow-to-build-an-application-with-node-red-dashboard-2\u002F","How to Build An Application With Node-RED Dashboard 2.0"," - This guide, covers how you can build personalize multiuser dashboard using flow fuse multi-user addon.",[66,1212,1213,1217],{},[17,1214,1216],{"href":1215},"\u002Fblueprints\u002Fflowfuse-dashboard\u002Fmulti-user-dashboard\u002F","Multi-User Dashboard for Ticket\u002FTask Management blueprint"," -  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.",[975,1219,1220],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":40,"searchDepth":175,"depth":175,"links":1222},[1223,1224],{"id":25,"depth":175,"text":26},{"id":32,"depth":175,"text":33,"children":1225},[1226,1227,1228,1229,1230,1231,1232,1233,1234,1235,1236],{"id":52,"depth":212,"text":53},{"id":126,"depth":212,"text":127},{"id":339,"depth":212,"text":340},{"id":383,"depth":212,"text":384},{"id":427,"depth":212,"text":428},{"id":498,"depth":212,"text":499},{"id":547,"depth":212,"text":548},{"id":738,"depth":212,"text":739},{"id":789,"depth":212,"text":790},{"id":1139,"depth":212,"text":1140},{"id":1167,"depth":212,"text":1168},"md",{"navTitle":5,"excerpt":1239},{"type":7,"value":1240},[1241],[10,1242,12],{},"\u002Fblog\u002F2024\u002F05\u002Fexploring-node-red-dashboard-2-widgets",{"title":5,"description":12},"blog\u002F2024\u002F05\u002Fexploring-node-red-dashboard-2-widgets","TL9eX5uSPHF1j1xVFdM-DrCWfNod93TG4mcHC0xxKUA",1780070551747]