ElementsElement Properties & Methods

Search bindable sources

element.searchBindableSources()

Search for data sources that can be bound to the element’s settings. Binding sources include component props, CMS collection fields, locale fields, locale list item fields, and page fields.

This method is available on on ComponentElement and all element types that have settings.

Syntax

1element.searchBindableSources(options?: SearchBindableSourcesOptions): Promise<Array<BindableSource>>

Related interfaces:

1interface SearchBindableSourcesOptions {
2  /** Filter to sources compatible with a specific element setting key (e.g., "altText", "src", "domId") */
3  settingKey?: string;
4  /** Filter to sources that produce a specific value type (e.g., "string", "imageAsset") */
5  valueType?: BindableValueType;
6}
7
8type BindableSource =
9  | PropBindableSource
10  | CmsBindableSource
11  | PageBindableSource
12  | LocaleBindableSource
13  | LocaleItemBindableSource;
14
15interface PropBindableSource {
16  sourceType: 'prop';
17  propId: string;
18  propName: string;
19  propGroup: string | null;
20  valueType: BindableValueType;
21  bindableTo: readonly BindableValueType[];
22}
23
24interface CmsBindableSource {
25  sourceType: 'cms';
26  collectionId: string;
27  collectionName: string;
28  fieldId: string;
29  fieldName: string;
30  fieldGroup: string | null;
31  fieldType: CmsFieldType;
32  valueType: BindableValueType;
33  bindableTo: readonly BindableValueType[];
34}
35
36interface PageBindableSource {
37  sourceType: 'page';
38  fieldKey: string;
39  fieldName: string;
40  valueType: BindableValueType;
41  bindableTo: readonly BindableValueType[];
42}
43
44interface LocaleBindableSource {
45  sourceType: 'locale';
46  fieldKey: string;
47  fieldName: string;
48  fieldType: 'string';
49  valueType: BindableValueType;
50  bindableTo: readonly BindableValueType[];
51}
52
53interface LocaleItemBindableSource {
54  sourceType: 'localeItem';
55  fieldKey: string;
56  fieldName: string;
57  fieldType: 'string';
58  valueType: BindableValueType;
59  bindableTo: readonly BindableValueType[];
60}

Parameters

options (optional)

An object with the following optional properties:

PropertyTypeDescription
settingKeystringFilter results to sources compatible with a specific element setting key (e.g., "altText", "src", "domId").
valueTypeBindableValueTypeFilter results to sources that produce a specific value type. Accepted values: "text", "boolean", "imageAsset", "link", "video", "richText", "file", "lottieAsset", "riveAsset".

Both filters can be used together. When no options are provided, all compatible binding sources for the element are returned.

Returns

Promise<Array<BindableSource>>

A Promise that resolves to an array of BindableSource objects. Returns an empty array when no sources match the filter criteria.

Each BindableSource has a sourceType discriminator with one of the following variants:

sourceTypeDescriptionKey fields
"prop"A component proppropId, propName, propGroup, propType, valueType
"cms"A CMS collection fieldcollectionId, collectionName, fieldId, fieldName, fieldGroup, fieldType, valueType
"locale"A field on the current localefieldKey, fieldName, fieldType, valueType
"localeItem"A field on a locale list itemfieldKey, fieldName, fieldType, valueType
"page"A field on the current pagefieldKey, fieldName, fieldType, valueType

Example

1// Get the selected element
2const element = await webflow.getSelectedElement();
3
4if (element) {
5  // Get all bindable sources for the element
6  const allSources = await element.searchBindableSources();
7  console.log(allSources);
8  // [
9  //   { sourceType: 'prop', propId: 'prop_1', propName: 'Hero Image', propGroup: null, propType: 'image', valueType: 'imageAsset' },
10  //   { sourceType: 'cms', collectionId: 'col_abc123', collectionName: 'Blog Posts', fieldId: 'field_img789', fieldName: 'Featured Image', fieldGroup: null, fieldType: 'image', valueType: 'imageAsset' },
11  //   { sourceType: 'locale', fieldKey: 'language', fieldName: 'Language code', fieldType: 'string', valueType: 'text' },
12  //   { sourceType: 'page', fieldKey: 'title', fieldName: 'Title', fieldType: 'string', valueType: 'text' },
13  // ]
14
15  // Filter by settingKey to find sources compatible with the 'src' setting
16  const srcSources = await element.searchBindableSources({ settingKey: 'src' });
17
18  // Filter by valueType to find sources that produce text values
19  const textSources = await element.searchBindableSources({ valueType: 'text' });
20
21  // Combine both filters
22  const filtered = await element.searchBindableSources({ settingKey: 'altText', valueType: 'text' });
23}

Error handling

ScenarioError tagMessage
Element not found or invalidResourceMissingWithData"Element not found: <id>"
Invalid settingKey valueInvalidRequest"Invalid settingKey: <key>"
Invalid valueType valueInvalidRequest"Invalid valueType: <value>"
1try {
2  await element.searchBindableSources({ valueType: 'notAType' });
3} catch (error) {
4  console.log(error.tag);  // 'InvalidRequest'
5  console.log(error.data); // 'Invalid valueType: notAType'

Designer ability

Checks for authorization only

Designer abilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny