Component API Reference (All Props and Methods)

This page is a consolidated API reference for all exported FlowBox UI components.

[NOTE!lightbulb/COMPONENT INTENT] DCSourceConnection = connection-level choice, DCCatalogEntry = single entry, DCCatalogEntryPicker = multi-entry workflows.

DCSourceConnection

Props

• dcapiurl: string = ''
• sourcetypefilter: string | string[] | null = null
• initialselection: string | null = null
• onsourceselect: (connection: SourceConnection) => void = null
• onitemsloaded: (connections: SourceConnection[]) => void = null

Methods

• select(idOrConnection: string | SourceConnection): void
• getSelection(): SourceConnection | null
• getConnections(): SourceConnection[]

Typical usage

<DCSourceConnection
  dcapiurl={$dcConfig?.url}
  sourcetypefilter="MQTT"
  initialselection={$values?.sourceConnectionId ?? ''}
  onsourceselect={(conn) => $values.sourceConnectionId = conn?.id ?? ''}
/>

[WARNING!schedule/CONFIG INTEGRITY] If source changes, clear dependent selected catalog entries to avoid stale configuration.

---

DCCatalogEntry

Props

• id?: string
• dcapiurl: string = ''
• sourcetypefilter: string | string[] | null = null
• datatypefilter: DataType | DataType[] | null = null
• namefilter: string | string[] | null = null
• initialselection: string | null = null
• onentryselect: (entry: CatalogEntry | null) => void = null
• onitemsloaded: (filtered: CatalogEntry[], all: CatalogEntry[]) => void = null
• onsearchmiss: (text: string) => void = null

Methods

• setFilters(opts: { searchtext?: string | null; datasetfilter?: string | null }): void
• select(idOrEntry: string | CatalogEntry | null): void
• getSelection(): CatalogEntry | null
• getEntries(): CatalogEntry[]
• getAllEntries(): CatalogEntry[]
• reload(selectAfterReload?: string): void

Typical usage

<DCCatalogEntry
  dcapiurl={$dcConfig?.url}
  sourcetypefilter="PostgreSQL"
  initialselection={$values?.catalogEntryId ?? ''}
  onentryselect={(entry) => $values.catalogEntryId = entry?.id ?? ''}
/>

[NOTE!lightbulb/SURPRISING BEHAVIOR] setFilters can auto-select one match and clear on multi-match/no-match.

---

DCCatalogEntryPicker

Props

• dcApiUrl: string = ''
• sourceConnectionId: string = ''
• selectedIds: string[] = [] (bindable)
• entries: CatalogEntry[] = [] (bindable)
• columns: string[] = DEFAULT_COLUMNS
• selectedColumnsDisplay: string[] = DEFAULT_SELECTED_COLUMNS_DISPLAY
• emptyMessage: string = 'No entries found for this source connection.'
• onSelectionChange: (ids: string[]) => void = null
• onRemove: (id: string) => void = null

Methods

• No exported imperative methods.

Typical usage

<DCCatalogEntryPicker
  dcApiUrl={$dcConfig?.url}
  sourceConnectionId={$values?.sourceConnectionId}
  bind:selectedIds={selectedEntryIds}
  bind:entries={pickerEntries}
  columns={['name', 'sourceParams.topic', 'dataType', 'metadata.unit', 'labels']}
  selectedColumnsDisplay={['name', 'sourceParams.topic', 'dataType']}
  onSelectionChange={(ids) => $values.entryIds = ids.join(',')}
  onRemove={(id) => selectedEntryIds = selectedEntryIds.filter(x => x !== id)}
/>

[WARNING!monitoring/SCALING BEHAVIOR] Above 100 entries, picker switches to server-search mode; no search term means no rows.

---

Picker helper exports

From @industream/flowmaker-flowbox-ui-components:

• COLUMN_DEFS
• DEFAULT_COLUMNS
• DEFAULT_SELECTED_COLUMNS_DISPLAY
• resolveColumn
• resolveValue
• resolveSearchText

Use these for column-level customization and shared rendering behavior.

[WARNING!public/GLOBAL STATE HAZARD] COLUMN_DEFS is mutable global state; conflicting overrides in different forms can change rendering unexpectedly.

Reference

• sdk/config/flowbox-ui-components/src/index.ts
• sdk/config/flowbox-ui-components/src/DCSourceConnection.svelte
• sdk/config/flowbox-ui-components/src/DCCatalogEntry.svelte
• sdk/config/flowbox-ui-components/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte