15: How-to Guides
      Back to home
      1. Home
      2. 15: How-to Guides

      How to Use the UI Code Node

      Creating fully custom widgets and interfaces in Rayven using HTML, CSS, JavaScript, and special UI Code node functions.

      Overview

      The UI Code node in Rayven enables you to create completely custom, interactive widgets for your application interfaces. Unlike prebuilt frontend widgets, the UI Code node allows you to define exactly how the widget looks, behaves, and interacts with your workflows and tables using HTML, CSS, and JavaScript.

      It supports:

      • Displaying and styling any content.

      • Reading and writing data to Rayven tables.

      • Sending and receiving data through workflows.

      • Calling special platform functions for navigation, data access, and interface control.

      This article explains how to use the UI Code node in practice, including detailed documentation of all special JavaScript functions available in the node.

      Adding and Using the UI Code Node

      1. Drag the UI Code node into your workflow

        • Found in the Frontend Nodes category.

        • Connect it to other nodes if you want it to receive data from the workflow.

      2. Open the UI Code editor

        • Add your HTML, CSS, and JavaScript directly in the editor.

      3. Decide how it gets data

        • Push data into it from the workflow – the node will receive JSON payloads like any other frontend node.

        • Read directly from Rayven tables or API nodes – using built-in functions.

      4. Decide what it outputs

        • Use sendData() to pass data to workflows or trigger automations.

      5. Publish the widget to an interface

        • Select the UI Code node in your interface configuration so it appears for your application users.

      Special Functions Available in the UI Code Node

      Below are all available built-in functions, with purpose, parameters, return values, and notes.

      1. sendData(json, timestamp = -1)

      Description: Sends JSON data from the current UI Code widget into the workflow. Often used to pass processed or user-input data downstream.
      Parameters:

      • json (Object) – The payload to send.

      • timestamp (Number, optional) – Epoch time in milliseconds. Defaults to -1 (server sets current time).
        Returns: Nothing.
        Example:

       
      sendData({ temperature: 25, status: "OK" }, Date.now());
      sendData({ username: "John" }); // Let server set timestamp

      2. linkToInterface(dashboardName)

      Description: Navigates to another interface in the application.
      Parameters:

      • dashboardName (String) – Comma-separated viewId,viewName.
        Returns: Nothing.
        Example:

       
      linkToInterface("101,Main Dashboard");

      3. refresh(dashboardName)

      Description: Refreshes the current UI view, reloading connected data sources and re-rendering widgets.
      Parameters:

      • dashboardName (String) – Currently unused.
        Returns: Nothing.
        Example:

       
      refresh();

      4. readListingsFromFTP(path, returnFunction)

      Description: Retrieves file/directory listings from an FTP location.
      Parameters:

      • path (String) – Folder path (empty string for root).

      • returnFunction (String) – Name of your callback function to receive results.
        Returns: Nothing (data returned to callback).
        Example:

       
      function handleFTP(data) { console.log("FTP Files:", data); }
      readListingsFromFTP("reports", "handleFTP");

      5. getDataFromAPINode(nodeId, returnFunction, startDate, endDate)

      Description: Fetches data from a specific API node in the workflow, optionally by date range.
      Parameters:

      • nodeId (Number) – API Node ID.

      • returnFunction (String) – Callback function name.

      • startDate (String, optional) – YYYY-MM-DD HH:mm:ss.

      • endDate (String, optional) – Same format.
        Returns: Nothing (data returned to callback).
        Example:

       
      function processAPI(result) { console.log(result); }
      getDataFromAPINode(55, "processAPI", "2025-01-01 00:00:00", "2025-01-07 23:59:59");

      6. getDataFromTable(tableId, returnFunction, lookupFieldName, filterFieldByValue, rowCount)

      Description: Retrieves rows from a Rayven table with optional filters.
      Parameters:

      • tableId (Number) – Table ID.

      • returnFunction (String) – Callback function name.

      • lookupFieldName (String) – Column(s) to retrieve.

      • filterFieldByValue (String) – Filtering criteria.

      • rowCount (Number) – Max rows to return.
        Returns: Nothing (data returned to callback).
        Example:

       
      function showData(data) { console.log(data); }
      getDataFromTable(12, "showData", "username,status", "status=active", 50);

      7. pauseRefresh()

      Description: Temporarily disables automatic widget refresh (useful while editing or batching changes).
      Parameters: None.
      Returns: Nothing.
      Example:

      pauseRefresh();

      8. unpauseRefresh()

      Description: Re-enables automatic refresh after being paused.
      Parameters: None.
      Returns: Nothing.
      Example:

      unpauseRefresh();

      9. getPublicLinkForQR()

      Description: Creates a public, direct-access URL for QR code display (requires login).
      Parameters: None.
      Returns: Promise<String> – Resolves with the public link.
      Example:

      getPublicLinkForQR().then(url => console.log("Public:", url));

      10. getPrivateLinkForQR()

      Description: Creates a private, direct-access URL without login (only the widget, no tabs).
      Parameters: None.
      Returns: Promise<String> – Resolves with the private link.
      Example:

      getPrivateLinkForQR().then(url => console.log("Private:", url));

      11. clickViewTab(viewName)

      Description: Switches to a specific view tab in the current interface.
      Parameters:

      • viewName (String) – Visible tab text.
        Returns: Nothing.
        Example:

       
      clickViewTab("Statistics");

      12. setHTMLNodeGData(key, value)

      Description: Saves a value to the global HTMLNodeGData store for this session.
      Parameters:

      • key (String) – Property name.

      • value (Any) – Value to store.
        Returns: Nothing.
        Example:

       
      setHTMLNodeGData("theme", "dark");

      13. getHTMLNodeGData(key)

      Description: Retrieves a value from the global HTMLNodeGData store.
      Parameters:

      • key (String) – Property name.
        Returns: Stored value or null.
        Example:

       
      let theme = getHTMLNodeGData("theme");
      console.log(theme);

      Practical Examples & How-To Scenarios

      Below are some common ways the UI Code node can be used, with a focus on how to set it up and which built-in functions you might use.

      Example 1 – Simple Form That Writes to a Table

      Purpose: Capture user input and store it in a Rayven table.

      How to set it up:

      1. Create a table in the Tables section of your workspace with the necessary columns (e.g. Name, Email, Status).

      2. Add a UI Code node to your workflow and design the form layout using HTML and CSS in the editor.

      3. Use JavaScript in the node to capture the input values when the user submits the form.

      4. Call the sendData() function to push the collected data out of the UI Code node.

      5. Connect the node to an Update Tables node in the workflow, mapping the JSON keys from the UI Code node to the table columns.

      Example 2 – Customer Portal with Multiple Widgets

      Purpose: Show customers their data and allow them to make updates.

      How to set it up:

      1. Create multiple tables for storing customer records, orders, and messages.

      2. Build one UI Code node for displaying data (e.g. orders list) and another for making updates (e.g. changing contact details).

      3. In the display widget, use the getDataFromTable() function to pull relevant rows from the correct table and present them in your HTML layout.

      4. In the update widget, allow users to change their details and use sendData() to send the new values to an Update Tables node.

      5. Place both widgets on the same interface so users can see live data alongside their update forms.

      Example 3 – Multi-Widget Coordination Using Global Data

      Purpose: Pass selections or filters between different UI Code widgets without writing to tables.

      How to set it up:

      1. Add two or more UI Code nodes to your workflow, each linked to the same interface.

      2. In one widget (e.g. filter selector), store the chosen filter using the setHTMLNodeGData() function.

      3. In another widget (e.g. data list), retrieve the filter using getHTMLNodeGData() and use it to adjust which rows you fetch via getDataFromTable().

      4. This approach avoids saving the filter to a table and keeps the interaction immediate.

      Example 4 – Hybrid Data Flow for Real-Time Updates

      Purpose: Display dynamically updated data in a custom UI element by combining workflow processing with direct API retrieval.

      How to set it up:

      1. Process your data in the workflow using any required logic and calculations.

      2. Send the processed data to an Internal API node in the same workflow.

      3. In your UI Code node, use getDataFromAPINode() to retrieve the latest processed data from the Internal API node.

      4. Display the retrieved data in any custom format you’ve created — for example, a chart, gauge, or table coded in HTML/CSS/JS within the UI Code node.

      5. Use refresh() to reload the display periodically or after certain user interactions.

      Example 5 – Displaying a Catalog of Images from FTP

      Purpose: Show a dynamic gallery of images that are stored in an FTP folder.

      How to set it up:

      1. Ensure your images have been uploaded to a known folder on the FTP server.

      2. Add a UI Code node to your workflow and design the gallery layout using HTML/CSS.

      3. Use the readListingsFromFTP() function to retrieve the list of file paths from the FTP folder.

      4. In your UI Code node logic, generate image elements (<img>) for each file path returned and insert them into your gallery layout.

      5. Optionally, use styling or JavaScript enhancements to enable features like lightbox previews, scrolling, or filtering by file name.

       

      Summary

      The UI Code node is Rayven’s most flexible frontend option, enabling you to build anything from simple forms to full custom portals. With HTML/CSS/JS and these built-in functions, you can tightly integrate UI elements with your workflows, tables, and navigation.

      FAQs

      Q: Do I have to connect the UI Code node to other workflow nodes?
      A: Not always. It can read and write directly to tables, but you can also feed it data from workflows.

      Q: Can multiple UI Code nodes share data without workflows?
      A: Yes, use setHTMLNodeGData() and getHTMLNodeGData().

      Q: How do I debug my custom widget?
      A: Use console.log() and your browser’s developer tools while viewing the interface.

      Q: Will my widget automatically refresh?
      A: Yes, unless you pause it with pauseRefresh(); you can control updates manually.

      Q: What’s the difference between using getDataFromTable() and retrieving data via an Internal API node?
      A: getDataFromTable() reads directly from a table in its raw form. Retrieving from an Internal API node lets you access data that has been processed or filtered in a workflow before it’s returned to the UI Code node.

      Q: How often does a UI Code node refresh its data automatically?
      A: By default, it refreshes based on the interface update cycle (60 seconds by default). You can control this with pauseRefresh() and unpauseRefresh() or by calling refresh() manually.

      Q: Can a UI Code node display data for multiple Primary Table UIDs at once?
      A: Yes. Whether you’re reading from a table or an Internal API node, you can retrieve multiple rows and render them however you choose in your HTML/JS code. Your design and logic in the node determine how the data is grouped and displayed.