Exploring Node-RED Dashboard 2.0 Widgets

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.

If you're new to Dashboard 2.0, we recommend starting with the Getting Started with Dashboard 2.0 guide and make sure to install it.

#  What Are Widgets?

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.

#  Building Applications with Dashboard 2.0 Widgets

Income-expense tracker build with dashboard 2.0

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.

#  Adding Forms

For the income and expense submission, we'll incorporate a form using the ui-form widget.

1. Drag the ui-form widget onto the canvas.
2. Double-click on it to access various widget properties and select the ui-group where it should render.
3. Add "date", "description", "amount", and "note" form elements by clicking the +element button at the bottom left.

Screenshot displaying Income submission ui-form's configuration

Once you've added the income submission form, repeat the process to add an expense submission form on another ui-page and ui-group. For more information on ui-form, refer to the ui-form docs.

Screenshot displaying Expense submission ui-form's configuration

#  Storing Form Data

The ui-form 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 Understanding Node-RED varriables.

1. Drag a function node onto the canvas and add the following code. This will store the submission in the income global context variable, and then modify msg.payload to pass on a notification to any further connected nodes.

// Retrieve the existing 'income' array from the global context, or initialize it as an empty array if it doesn't exist
let income = global.get('income') || [];

// Push the incoming payload along with a 'type' property set to "income" into the 'income' array
income.push({
  ...msg.payload,
  type: "income",
});

// Store the updated 'income' array back into the global context
global.set('income', income);

// Set the message payload to a confirmation message for notification
msg.payload = "Thank you for submitting income!";

// Return the modified message
return msg;

Similarly, you can do this for storing expense data submitted using the expense submission form.

#  Displaying Notifications

For displaying notifications on the dashboard, we'll utilize the ui-notification widget, which emits notifications to the user's dashboard. It accepts msg.payload which should be a string format or raw HTML/JavaScript for custom formatting.

1. Drag the ui-notification widget onto the canvas.
2. Set the position property to center. You can also adjust colors or notification timeout by modifying the color and timeout properties. Please take a look at the ui-notification docs for more information on ui-notification.

Screenshot displaying ui-notification widgets configuration

#  Listening for events

In Dashboard 2.0, the 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 ($pageview) and leave ($pageleave) events.

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.

1. Drag an ui-event widget onto the canvas.
2. Double-click on it and select the correct ui-base of your application.

For more information on ui-event refer to ui-event docs.

#  Retrieving Income-Expense Data

In our income-expense application, we will display the income and expenses in a single table.

1. Drag a change node onto the canvas.
2. Set msg.payload to the JSONata expression below, which merges the income and expense arrays.

[$globalContext('income'), $globalContext('expense')]

3. Connect the output of the ui-event widget to the input of the change node.

Screenshot displaying the change node setting JSON expression to payload for retrieving and sorting data.

#  Displaying Data on the Table

To display data on the table, we use the 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.

1. Drag a ui-table widget onto the canvas.
2. Create a new ui-page and ui-group for it.
3. Connect the output of the change node to the input of the ui-table widget.

Screenshot displaying the ui-table widget configuration

For more information on ui-table refer to ui-table docs

#  Calculating total category-wise

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.

1. Drag the two change node onto the canvas.
2. For the first Change node Set msg.payload to global.income and msg.topic to "income" and give it name "retrive income". For the second Change node, set msg.payload to global.expense and msg.topic to "expense" and give that second change node name "retrive expense".

Screenshot displaying the change node retrieving income data from global context

Screenshot displaying the change node retrieving expense data from global context

3. Drag a Split node onto the canvas.
4. Drag the Change node onto the canvas and set msg.payload.amount to the JSONata expression $number(payload.amount) and give it name "Convert amount to number".

Screenshot displaying the change node converting amount to number

5. Drag a Join node onto the canvas, select mode as reduced expression, and set the Reduce exp to $A + payload.amount. Set Initial value to 0, and Fix-up exp to $A. Give this 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. $A stores the accumulated value, and with every incoming message payload, it adds the payload.amount value to it, for more details on this refer to the core node docs on join node.

Screenshot displaying the join node calculating the total income and expense data

7. 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".

Screenshot displaying the join node combining the income and expense object into the array

7. Connect the output of the ui-event widget to the input of the Change node named "Retrieve Income" and "Retrieve Expense". Then, connect the outputs of the "Retrieve Income" and "Retrieve Expense" Change nodes to the input of the Split node.

8. Next, connect the output of the Split node to the Change node named "Convert Amount to Number". Afterward, connect the output of that Change node to the input of the Join node named "Calculate Total". Finally, connect the output of the "Calculate Total" Join node to the input of the Join node named "Combine Objects into Array".

#  Displaying data on the chart

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.

1. Drag a ui-chart widget onto the canvas.
2. Double-click on the widget and select Type as bar.
3. Configure the series to category and the y-axis to amount. This configuration informs the chart that the amount property of the input objects will be plotted on the y-axis and category to the x-axis of the chart.
4. Connect the output of the join node named "Combine Objects into Array" to the ui-chart widget's input.

Screenshot displaying the ui-chart widget's configuration

#  Adding custom footer with ui-template

With the 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 ui-template docs.

Using this widget, we will add a footer to our application.

1. Drag an ui-template widget onto the canvas.
2. 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.
3. Insert the following vue.js code in the ui-template widget.

<template>
  <!-- Footer Component -->
  <div class="footer">
    <!-- Description of the Income-Expense Tracker -->
    <div>
      Welcome to our comprehensive income expense tracker! Take control of your finances by monitoring your income and
      expenses effortlessly. Our user-friendly interface makes it simple to record transactions, categorize expenses, and
      analyze your financial trends. With real-time insights into your spending habits, you can make smarter financial
      decisions and achieve your money goals faster.
    </div>
    <!-- Copyright Information -->
    <div class="copyright">
      <!-- Display Current Year and Copyright Information -->
      2024 — <strong>Vuetify</strong>
    </div>
  </div>
</template>
<style scoped>
  /* Make the footer occupy all available space */
  .footer {
    position:absolute;
    bottom:0;
    background-color:rgb(26,26,26);
    color:rgb(238,238,238);
    height:130px;
    text-align:center;
    padding:14px;
  }

  .copyright{
    margin-top:10px;
  }
</style>

#  Deploying your application flow

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.

#  Up next

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:

• 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.

• 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.

• 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.

• 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.

• 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.

• Multi-User Dashboard for Ticket/Task 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.