User Interface & Code

User Interface Embedded in Code

Each node features two distinct views: Code and UI. The UI view, derived from the underlying code, allows users to modify values without directly editing the code itself. Any changes in the UI view directly effect the code.

Examples of UI components embedded in Python code (this is the same node)

Adding UI components:

There are three ways to add UI components to the node: > AI Copilot: describe what you'd like to change and it'll regenerate the node with the UI components added/changed. > Code Editor: - Highlight a piece of code you want to convert to a User Interface. Click on 'Convert to UI,' and it will automatically convert it to the proper type of UI component and set the selected value as the live value of the UI component. - The top right '+ Add UI' will add empty UI component to where the cursor is.

Draft & live modes:

When new data is entered in the UI view, it's stored as draft value ( * on top indicates that there are unsaved changes in the UI view).

To test a node, enter a test value and click 'save & run' to execute the node and get a response. After successful testing, enter the production value and click 'save' to save without running the node.

Passing values between nodes is currently supported only in the code view. The UI view is limited to entering static values.

Production Code:

When the code runs, the values from the UI view are integrated into the Python code. You can view this from the code editor by clicking the 'Show UI' button.

Remember to manually deploy changes: Updates to nodes and triggers are not automatically deployed. Click 'deploy' to apply changes.

---

UI Metadata settings: control how the UI is displayed:

Clicking on a UI item in the code view enables you to modify its properties, which dictate how the UI components are presented in the UI view.

UI components can handle JSON objects of any value, including deeply nested ones.

Let's walk through how each to each value and how they're translated into final code.

Strings:

#code in code editor
first_name = "[ui_string_item]"

#code at execution: 
first_name = "James"

* ensure to surround the string with quotes

Number:

#code in code editor
your_age = [ui_number_item]

#code at execution: 
your_age = 43

Boolean:

#code in code editor
usa_citizen = [ui_boolean_item]

#code at execution: 
usa_citizen = True

Object:

#code in code editor
contact_details = [ui_object_item]

#code at execution: 
contact_details = {
    "email_address": "[e-mail]", 
    "phone_number": "425-424-42424"
}

* Objects and lists can handle any format of deeply nested objects.

List:

#code in code editor
items = [ui_list_item]

#code at execution: 
items = [
    {"item_name": "Item 1"}, 
    {"item_name": "Item 2"}
]

Date:

#code in code editor
date_of_birth = "[ui_date_item]"

#code at execution: 
date_of_birth = "2024-07-04T12:31:00.000Z"

File:

#code in code editor
file_url = "[ui_file_item]"

#code at execution: 
file_url = "https://trudo-workflow-uploaded-files.s3.amazo...."

* At the execution time, you're provided with a pre-signed url that's refreshed at the execution time.

Comment:

# comments are only visible in the UI view, they're not added to code at execution time.