The Custom Code control allows you to extend Yeeflow forms and pages with custom logic, UI components, and data processing.
You can:
Build custom UI components (e.g., calendar, dashboards)
Execute business logic and calculations
Integrate external data or transform existing data
Use AI Builder to generate and refine code with natural language
Overview
The Custom Code control supports two main approaches:
AI-assisted development (Recommended) — generate and refine code using AI Builder
Manual scripting — paste or write code directly and configure parameters
Both approaches are supported within the same control and editor experience.
Control Settings
When you add a Custom Code control to a form or page, the following settings are available:
Content
Enter or paste JavaScript code directly
Used for quick scripting or prebuilt components
Code editor
Opens the full-screen development environment
Includes AI Builder, code editing, testing, and preview
Input parameters
Automatically generated when the code defines inputs
Used to pass values into the script
How It Works
Step 1: Add Custom Code Control
Open your form or page in the designer
Drag the Custom Code control onto the canvas
Step 2: Choose How to Build the Logic
You can build your logic in two ways:
Option A: Paste or write code directly
Option B: Use AI Builder (Recommended)
Option A: Paste or Write a Script Directly
This approach is suitable when you already have a script or are using a prebuilt component.
Step 3A: Enter or Paste Code
You can enter code directly in the Content area.
The custom code block allows you to implement functions you need by writing JavaScript code.
Step 4A: Configure Input Parameters (If Available)
When your script includes predefined inputs, the system will automatically generate an Input parameters section.
You need to fill in these fields based on your use case.
Example: Calendar Component
A calendar script may generate parameters such as:
appId / listId – data source identification
titleField – event title
startField / endField – event time range
descriptionField – event description
colorField – event color mapping
allDayField – all-day event flag
timezone – display timezone
initialView – default view (day/week/month/year)
refreshMinutes – auto refresh interval
After configuring these values, the component can render correctly without modifying the code.
Step 5A: Preview the Result
Click the Preview tab
Review the rendered result
If the code includes UI → it will be displayed
If not → a message will indicate no visual output
Option B: Use AI code editor to Generate Code (Recommended)
This is the primary and most powerful way to use the Custom Code control.
It enables you to generate, test, and refine code using AI.
Step 3B: Open the Code Editor
Click Code editor in the control settings
The interface switches to a full-screen editor
Step 4B: Understand the Editor Layout
The editor consists of three main areas:
1. AI Builder Panel (Left)
Conversational interface for generating code
Supports iterative refinement
2. Code Editor & Preview (Center)
Code (Source TS/JS): edit or view code
Preview: view rendered UI output
3. Configuration (Right)
Input variables
Step 5B: Generate Code with AI code editor
Enter a prompt in AI code editor to describe the component or interface you want to create.
Example use cases:
Build a dashboard with summary cards, a data table, and a chart
Create a calendar view based on a Yeeflow list
Display a project summary with key metrics
Calculate values based on input fields
Submit the prompt to generate code.
Review the generated code in the editor.
Switch to the Preview tab to verify the rendered result.
Refine the Result with Follow-Up Prompts
After the initial result is generated, you can continue refining it by asking AI Builder to:
Adjust layout and spacing
Improve visual styling (cards, colors, alignment)
Add or modify components (e.g., table, chart, additional cards)
Fix data or rendering issues
Adapt the structure to your specific use case
Step 6B: Apply the Code
After validation:
Click Save
Click Save & Exit
Step 7B: Unsaved Changes
If you exit without saving:
A confirmation dialog appears:
Save & Exit
Discard changes
Example Use Cases
1. Calendar View
Display events from a Yeeflow list
Support multiple time views (day/week/month/year)
2. Data Calculation
Compute totals, tax, or derived values
3. Custom UI Components
Dashboards
Summary panels
Interactive widgets
Best Practices
Start with AI Builder to quickly generate working code
Use Test Run to validate logic
Use Preview to validate UI
Refine code iteratively instead of building from scratch
Summary
The Custom Code control provides a flexible way to extend Yeeflow with both AI-powered development and manual scripting.
Use AI Builder for speed and ease of use
Use manual scripting for precise control
Combine both for the best results