Creating User Interfaces

Owned by Nina Cardillo
Last updated: 17-Dec-2024

For SmartServer 3.3 and prior, see Creating User Interfaces (Release 3.3 and Prior). 

This section describes how to create a custom interface to the SmartServer using the Sequencing widget. It also describes how to view a device dashboard for devices that have had flows applied to them using the Devices widget. 

This section consists of the following:

Creating a Dashboard

You can create a custom interface to the SmartServer using the Sequencing widget. Creating a user interface in the Sequencing widget utilizes the Node-RED dashboard nodes to create the user interface elements for the user interface. See Sequencing Widget - Node-RED Onboarding Tutorial for more information about getting started with the Sequencing widget and Node-RED and creating flows.

In the webflow shown below, slider and gauge nodes have been configured to control and display results. To launch a dashboard for a webflow that you created, click DASHBOARD on the Sequencing widget. 



For SmartServer 4.0 Update 1 and prior, the Sequencing widget buttons appears as shown below.


The dashboard view appears with the slider and gauge in this example.



On this dashboard example, you can use the slider to change the measurement reflected by the gauge.



Click FLOWS to return to the Sequencing widget workspace where you can observe the updated slider status.


Viewing a Device Dashboard

You can view a device dashboard for devices that have had flows applied to them. To view a device dashboard from the Devices widget, perform the following steps:

  1. Open the SmartServer CMS.

  2. Open the Devices widget, EDGE DEVICES tab.



  3. Click the Action button () for the desired device and select the View Dashboard action.



  4. If the SmartServer has a context assigned to a flow that utilizes Node-RED dashboards, then the Node-RED dashboard view will appear as shown in the example below. In order for the Node-RED dashboard to appear, the flow must be enabled in the Sequencing widget. See Sequencing Widget - Node-RED Onboarding Tutorial for more information about getting started with the Sequencing widget and Node-RED flows and dashboards.