How to use Frontend nodes in workflows to generate visual widgets on your application interfaces.
Overview
Widgets are the visual building blocks of your application interfaces in Rayven. They are created by using Frontend nodes within workflows and then selecting those nodes for display on an interface. This article explains how to create widgets using Frontend nodes, how to make them appear on interfaces, and how to configure display logic such as one widget per UID or label.
What Are Frontend Nodes?
Frontend nodes are a specific category of workflow node in Rayven. They process or receive data and then display it visually on an interface as a widget.
Frontend nodes include pre-built visual components like charts, gauges, tables, and forms, as well as the powerful UI Code node which allows for fully custom interface elements using HTML, CSS, and JavaScript.
To make a widget appear on an interface:
-
Add a Frontend node to a workflow.
-
Select that node for display on an interface in the Workspace.
-
Ensure the user’s User Group has access to that interface
Types of Frontend Nodes
There are two general types of Frontend nodes:
Pre-built Widgets
These nodes display standard visualisations and inputs. Their appearance and function are pre-defined but configurable.
Examples include:
-
Charts: Line Chart, Bar Chart, Multi Chart, etc.
-
Gauges and Values: Gauge, Multi Value, Conditional Value.
-
Tables: Time Series Table, Calculated Data Table.
-
Controls: Button, Text Field, Drop Down, Calendar, Form.
-
Visuals: Map, Image, Heatmap, Data on Image.
Each of these widgets can be positioned and resized on the App Interface by users with layout permissions.
UI Code Node
The UI Code node enables developers to build fully customised widgets using HTML, CSS, and JavaScript. These can be simple UI elements or full-page custom applications.
-
Can read/write data from tables using JavaScript functions (e.g.
getDataFromTable()). -
Can receive data from workflows or send data out to them.
-
Can be styled and made interactive to match your app’s needs.
Editing a UI Code Node in the Workflow:
The same UI Code node displayed as a widget on the front end:
Widget Display Settings: Controlling Widget Count
Each Frontend node includes a “Number of Widgets to Display” setting. This setting controls how many widgets will appear on the interface, depending on your data model and label usage.
Options include:
-
One Widget per UID
A widget will be created for each unique row (UID) in the Primary Table.
Use this for per-record views (e.g. one chart per asset). -
One Widget per Label Value
A widget will be created for each unique value in a selected Label column.
Useful when grouping data by categories like Region, Status, or Team. -
One Widget per Label (default)
A single widget appears for the selected label, aggregating data across label values.
Great for overview widgets or summaries.
These options allow dynamic widget creation based on how your Primary Table is structured and labeled.
Workflow Requirements for Widget Functionality
Frontend nodes in Rayven workflows act as the source of data for interface widgets.
Once a Frontend node is added to a workflow and selected in the Interface configuration, it will appear as a widget. The widget will show the most recently stored data relevant to that node and its configuration.
Key points:
-
Data is stored in a Frontend node as long as it has existed in the workflow at the time the data was written.
-
New Frontend nodes will not have historical data until new data enters the workflow and is processed by the node.
-
UI Code nodes are an exception—they can also read directly from tables and do not rely on workflow-stored data unless intentionally pushed in.
Displaying Widgets on Interfaces
After a Frontend node is added to a workflow:
-
Go to the Interfaces section in the Workspace.
-
Create or open an Interface.
-
Select the Frontend node from the list to display it on that interface.
The selected node will now appear as a widget on the interface for users in any group that has access to that interface.
Summary
Creating widgets with Frontend nodes in Rayven involves placing Frontend nodes into your workflows, selecting them for display on interfaces, and configuring how many widgets should be created using UID or Label logic. Pre-built widgets provide fast visualisation options, while the UI Code node allows for full customisation. Proper workflow setup and data flow are required for widgets to show correctly.
FAQs
What is a Frontend node?
A Frontend node is a workflow node that can display data as a visual widget on an application interface.
Why is my widget not displaying any data?
Ensure the Frontend node received data after it was added to the workflow. Widgets only show data once the node has processed it.
Can I create multiple widgets from one node?
Yes, use the “Number of Widgets to Display” setting to create one widget per UID, per Label Value, or per Label.
Can I customise how a widget looks?
Pre-built widgets have some visual and display options. For full customisation, use a UI Code node.
How do I make a widget available on an interface?
Add a Frontend node to a workflow, then go to the Interfaces section and select the node for display on an interface.
Do I need to flow data through the workflow again if I change a Frontend node’s settings?
Not always. Many settings (like display logic) will apply immediately. But if you’ve added a new node or changed data logic, you may need to retrigger the workflow.
Can I rearrange widget layout?
Yes, users with appropriate permissions (Super Admin, Admin, Customer Admin, or Editor with “Edit Interface” enabled) can move and resize widgets on the interface directly.