Yeeflow Custom Code Examples | Developer Documentation

Reusable references

Pair examples with reusable templates

Use the examples below to understand the pattern, then open the Custom Code template library to review complete TSX source, user guides, and example configuration.

Browse Custom Code templates Smart Lookup Picker KPI Card Set Approval Decision Panel

Starter example

Simple parameter demo

Confirm that a custom code control can read configuration from context.params and render it safely.

Parameter	Type	Purpose
`titleText`	string	Title shown in the control.
`bodyText`	string	Short message shown below the title.
`tone`	string	Optional visual tone such as blue, green, or slate.

Define inputParameters(), read context.params, pass values into a React component, and render a compact information block.
Do not query data or save output. Keep this example focused on parameter handling and rendering.

Form input

Configurable monthly table

Help users enter, review, or display month-based business values such as budgets, forecasts, resource plans, or progress updates.

Parameter	Type	Purpose
`yearFieldName`	string or variable	Current form field that stores the year.
`monthFieldName`	string or variable	Current form field that stores the selected month.
`tableConfig`	variable	JSON configuration for rows, columns, labels, or defaults.
`saveToField`	variable	Field where structured table output is saved.
`readonlyModeText`	string	Optional text shown when editing is disabled.

Read current form values from fieldsValues and context.getFieldValue(), build a row model, render a stable table, and save structured output when users edit values.
Use safe numeric parsing for totals and render values as text in readonly mode.

[
  {
    "month": "2026-01",
    "planned": 12000,
    "actual": 9800,
    "notes": "Awaiting final invoice"
  }
]

Dashboard

Dashboard analytics component

Summarize business performance using KPI cards, charts, or compact analysis tables.

Parameter	Type	Purpose
`dataListId`	variable	Source data list to query.
`titleText`	string	Dashboard module title.
`pageSize`	string	Number of records to query per page.
`filterField`	variable	Optional field used for dashboard filtering.
`filterValue`	variable	Optional filter value from a variable or temp variable.

Check yeeSDKClient availability, query records with pagination, normalize row values, aggregate results, then render loading, error, empty, and loaded states.
Avoid loading more data than the dashboard needs and document expected dashboard variable values.

Selection

Smart lookup picker concept

Let users search a Yeeflow data list, select one or more records, and save structured output.

Parameter	Type	Purpose
`dataListId`	variable	Data list to search.
`displayField`	variable	Field shown in search results.
`valueField`	variable	Field saved as the selected value.
`saveToField`	variable	Field or temp variable for full output JSON.
`selectedItemsField`	variable	Optional target for selected source values only.
`newItemsField`	variable	Optional target for manual entries only.
`multiSelect`	variable	Enables multiple selections.
`allowManualEntry`	variable	Allows users to add a typed value.

Debounce search input, query the target list, normalize returned row values, show matching options, and persist selected values after add or remove actions.
Save behavior must be tested separately because UI selection can work even when persistence fails.

[
  {
    "display": "Acme Manufacturing",
    "value": "SUP-1024",
    "isManual": false,
    "source": "selected"
  }
]

Content input

Rich text editor with variable insertion concept

Help users create formatted content while inserting approved placeholders or values from Yeeflow variables.

Parameter	Type	Purpose
`initialContentField`	variable	Field or variable containing existing content.
`saveToField`	variable	Field where final content is saved.
`availableVariables`	variable	JSON array of insertable variables.
`showToolbar`	variable	Enables formatting toolbar.
`placeholderText`	string	Empty editor placeholder.

Load existing content, render an editor, provide a controlled list of insertable variables, and save the final value to the configured output target.
Document whether the output is HTML, plain text, or a Markdown-like format.

[
  { "label": "Customer Name", "token": "{{CustomerName}}" },
  { "label": "Request Amount", "token": "{{RequestAmount}}" }
]

Evidence capture

Photo capture control concept

Capture or attach image evidence for inspections, site visits, issue reports, delivery confirmation, and compliance processes.

Parameter	Type	Purpose
`saveToField`	variable	Field where photo metadata or file references are saved.
`maxPhotos`	string	Maximum number of photos allowed.
`allowNotes`	variable	Enables notes per photo.
`requirePhoto`	variable	Indicates whether at least one photo is expected.
`labelText`	string	Control label.

Show upload or capture UI, preview selected photos, allow removal when not readonly, and save structured metadata to a configured field.
File handling depends on available Yeeflow runtime APIs. Document whether the template stores file IDs, URLs, base64 data, or metadata only.

[
  {
    "name": "inspection-front-door.jpg",
    "url": "https://example.com/file.jpg",
    "note": "Door frame damage visible",
    "capturedAt": "2026-05-10T08:30:00.000Z"
  }
]

Reusable snippets

Supporting implementation snippets

The source content pack includes helper snippets for normalization, writable target resolution, safe list queries, save helpers, JSON parsing, selected item dedupe, readonly behavior, and loading or error states. Use these as authoring aids for templates, not as complete copy-paste components.

async function queryItemsSafe(options: {
  yeeSDKClient: any;
  listId: string;
  fields?: string[];
  pageIndex?: number;
  pageSize?: number;
  filters?: any[];
}) {
  const client = options.yeeSDKClient;
  if (!client || !client.lists || typeof client.lists.queryItems !== 'function') {
    return { rows: [], raw: null, errorText: 'Yeeflow data client is not available.' };
  }

  const pageIndex = options.pageIndex || 1;
  const pageSize = options.pageSize || 20;
  const result = await client.lists.queryItems({
    listId: options.listId,
    dataListId: options.listId,
    fields: options.fields || [],
    fieldIds: options.fields || [],
    pageIndex,
    pageNo: pageIndex,
    pageSize,
    filters: options.filters || [],
  });

  const rows =
    (result && result.items) ||
    (result && result.Items) ||
    (result && result.data && result.data.items) ||
    (Array.isArray(result) ? result : []);

  return { rows: Array.isArray(rows) ? rows : [], raw: result, errorText: '' };
}

Custom Code Examples