DCSourceConnection

DCSourceConnection renders a DataCatalog-backed source-connection dropdown and returns the selected connection object.

[NOTE!lightbulb/ROLE CONTRACT] This component selects source connections only. Use DCCatalogEntry/DCCatalogEntryPicker for entry-level selection.

Props (complete)

Prop	Type	Default	Usage
dcapiurl	string	''	DataCatalog base URL. Required for loading.
sourcetypefilter	string | string[] | null	null	Filter source connections by source type name(s).
initialselection	string | null	null	Restores a previously saved connection id after load.
onsourceselect	(connection: SourceConnection) => void	null	Called when user selects or select(...) is invoked successfully.
onitemsloaded	(connections: SourceConnection[]) => void	null	Called after fetch completes with loaded list.

SourceConnection minimal shape:

interface SourceConnection {
  id: string;
  name: string;
  sourceType?: { name: string };
  [key: string]: any;
}

Exported methods (complete)

Method	Signature	Returns	Usage
select	(idOrConnection: string | SourceConnection) => void	void	Programmatic selection by id or object.
getSelection	() => SourceConnection | null	current selection	Read selected connection object.
getConnections	() => SourceConnection[]	loaded connections	Inspect current loaded list.

Usage examples

1) Basic FlowMaker binding

<script>
  import { flowMakerBridge } from '@industream/flowmaker-flowbox-ui';
  import { DCSourceConnection } from '@industream/flowmaker-flowbox-ui-components';

  const props = $props();
  const { values, validity, emit, jsonEnv } = flowMakerBridge(props);
  const dcConfig = jsonEnv('datacatalog');

  const onSourceSelect = (conn) => {
    $values.sourceConnectionId = conn?.id ?? '';
    $validity.sourceConnectionId = !$values.sourceConnectionId;
    emit('validity', $validity);
  };
</script>

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

2) Multiple source types

<DCSourceConnection
  dcapiurl={$dcConfig?.url}
  sourcetypefilter={['Relational', 'DataBridge', 'MQTT']}
  onsourceselect={onSourceSelect}
/>

3) Imperative selection via bind:this

<script>
  let sourceSelector;

  const restoreConnection = (id) => {
    sourceSelector?.select(id);
  };

  const logSelection = () => {
    console.log(sourceSelector?.getSelection());
    console.log(sourceSelector?.getConnections());
  };
</script>

<DCSourceConnection bind:this={sourceSelector} dcapiurl={$dcConfig?.url} sourcetypefilter="OPC-UA" />

[WARNING!schedule/CONFIG INTEGRITY] If connection selection changes and downstream selectors remain populated, config can drift. Clear dependent selections when sourceConnectionId changes.

[WARNING!monitoring/SCALING BEHAVIOR] Passing broad multi-type filters can create large lists and slower dropdown UX in big catalogs.

Notes / warnings

• Load trigger requires both dcapiurl and sourcetypefilter !== null.
• initialselection only applies when the selected id exists in loaded items.
• Source-type names must match DataCatalog naming exactly.

Real usage references

• /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/influx-client/frontend/src/default/ConfigForm.svelte
• /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/mqtt-client/frontend/src/sink/ConfigForm.svelte
• /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/opc-ua-client/frontend/src/source/ConfigForm.svelte

Reference

• sdk/config/flowbox-ui-components/src/DCSourceConnection.svelte