6.4 Frontend Nodes
      Back to home
      1. Home
      2. 6: Nodes Reference Guide
      3. 6.4 Frontend Nodes

      UI Code (HTML, CSS, JS) Node Configuration Guide

      The UI Code (HTML, CSS, JS) node enables you to create fully custom widgets using raw code. It supports advanced layout, styling, and scripting capabilities, offering total control over the design and behavior of the interface component.

      This UI Code is ideal for building forms, tables, dashboards, and data visualizations beyond standard templates.

      What It Does

      This node allows developers to define custom user interface elements using native HTML, CSS, and JavaScript. It can display dynamic data from workflows, refresh at configurable intervals, and integrate with dashboards. Rayven includes prebuilt templates for common UIs like activity tables, registration forms, and multi-tab layouts to accelerate development.

      How to Use

      Rayven Workflow Implementation

      1. Drag the UI Code (HTML, CSS, JS) node from the Frontend panel to your canvas.

      2. Double-click the node to open the configuration panel.

      3. Choose your Data Retrieval Method (e.g., latest values only).

      4. Paste or write your custom code in the HTML, CSS, and JavaScript editors.

      5. Set refresh rate, styling, and tooltip preferences.

      6. Assign the widget to one or more dashboards using Add to Interface.

      7. Click Save.

       Configuration Fields

      Field Requirement Description
      Widget Name* Required Internal name for the widget.
      Data Retrieval Method Required e.g., Latest Values Only.
      HTML Editor Optional Define structure and layout with valid HTML.
      CSS Editor Optional Apply styles scoped to this widget.
      JavaScript Editor Optional Implement logic, interactivity, or data binding.
      Widget Subtitle Optional Short description shown under the title.
      Widget Header (Show/Hide) Optional Toggle header visibility.
      Show UID / Label Name Optional Show or hide associated label name.
      Widget Refresh Interval (sec) Optional Default: 60 seconds.
      Background Color / Transparency Optional Set background and opacity.
      Border Style (Show/Hide) Optional Show or hide widget border.
      Add to Interface Required Select interface(s) where this widget appears.
      Tooltip (Enable) Optional Display explanatory text on hover.
      Number of Widgets to Display Required One per label or a single unified view.
      Select Label Optional Filter by label (if multiple device types are used).
       

       Included Templates

      Template Name Description
      Activity Table Time-ordered event feed with timestamps.
      Tabular Data Table Searchable and filterable dataset table.
      Activity List (2 Tables) Parallel logs for event comparisons.
      Editable Table Editable fields, such as order statuses.
      Collapsible Text Area Expandable section for verbose content.
      Filter & Search Table Smart filtering and text-based search.
      Form Grid Tabular form layout for fast data input.
      Basic Sign-Up Form Simple registration with validation.
      Multi Tab Table Dataset split across UI tabs.
      Project Management Table Display and track task progress.
      Registration Form Account creation interface.
      Step-Level Form Multistage form with progress indicators.
       

      These templates are preconfigured with HTML/CSS/JS code. You can customize them freely in the editors.

      Included JS Snippets

      JS Functions Description

      setHTMLNodeGData(key,value)

      Stores a value in the UI Code node’s global data store under the given key.

      This allows you to persist values that can be accessed later by other UI Code nodes in the same interface session.

      getHTMLNodeGData(key)

      Retrieves the value stored in the UI Code node’s global data store for the given key.

      Useful for sharing state or variables between different UI Code nodes.

      clickViewTab(viewName)

      Programmatically switches the active tab in the current interface to the one matching viewName.

      Can be used to guide the user through multi-tab interfaces.

      linkToInterface()

      Opens (navigates to) the linked interface defined in the node’s settings.

      Often used for workflows where the UI needs to redirect the user to another screen or application section.

      refresh()

      Triggers a refresh of the current UI view, reloading any connected data sources and re-rendering widgets.

      Useful for keeping displayed data up to date.

      pauseRefresh()

      Temporarily disables automatic refreshing of the view.

      Ideal for situations where you want to prevent frequent updates (e.g., while the user is editing data).

      sendData()

      Sends the UI Code node’s current data output downstream in the workflow.

      This is typically used to pass processed or user-input data to the next node.

      getDataFromTable()

      Fetches records from a Rayven Table that is linked to the interface.

      You can use it to retrieve structured data for display, processing, or filtering.

      getDataFromAPINode()

      Retrieves data from an API Node within the same workflow.

      Allows the UI Code node to dynamically consume data from external or internal APIs.

      readListingsFromFTP

      Connects to an FTP server and reads available listings (files and directories).

      This can be used for file management interfaces or to trigger workflows based on external file availability.
       

      For more details and usage examples of these JavaScript snippets, please refer to the full documentation here.

      Example: Activity Table Widget

      Field Value
      Widget Name Event Log Table
      Data Retrieval Method Latest Values Only
      Template Activity Table
      Refresh Interval 30 seconds
      Tooltip "Live system activity"
      Background Color #f4f4f4
      Interface interface2
       

       Best Practices

      • Use scoped CSS classes to avoid conflicts.

      • Avoid external script dependencies.

      • Sanitize any incoming data before rendering.

      • Keep logic simple to minimize performance overhead.

      • Reuse templates when creating similar widgets for consistency.

       Use Cases

      • Custom dashboards with business-specific KPIs

      • Editable configuration panels with forms

      • Real-time log viewers and audit trails

      • Multi-tabbed interfaces for grouped data

      • Branded registration or onboarding widgets

       FAQ

      Q: Can I import external libraries?

      No, external libraries (like Chart.js or jQuery) are not supported natively. Use vanilla JS or contact Rayven support to discuss possible extensions.

      Q: How do I debug?

      Use browser developer tools (F12) in preview mode. Check console logs and inspect the DOM to troubleshoot styling or JS issues.

      Q: Can I dynamically inject workflow data?

      Yes. Use ##jsonKey## syntax or reference incoming values via JavaScript using scoped variables in the payload.