ElementsElement Properties & MethodsSettings

Search bindable sources (Beta)

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.

Beta

These methods are in public beta and may change with future releases.

Syntax

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

Related interfaces:

interface SearchBindableSourcesOptions {
  /** Filter to sources compatible with a specific element setting key (e.g., "altText", "src", "domId") */
  settingKey?: string;
  /** Filter to sources that produce a specific value type (e.g., "string", "imageAsset") */
  valueType?: BindableValueType;
}
type BindableSource =
  | PropBindableSource
  | CmsBindableSource
  | PageBindableSource
  | LocaleBindableSource
  | LocaleItemBindableSource;
interface PropBindableSource {
  sourceType: 'prop';
  propId: string;
  propName: string;
  propGroup: string | null;
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}
interface CmsBindableSource {
  sourceType: 'cms';
  collectionId: string;
  collectionName: string;
  fieldId: string;
  fieldName: string;
  fieldGroup: string | null;
  fieldType: CmsFieldType;
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}
interface PageBindableSource {
  sourceType: 'page';
  fieldKey: string;
  fieldName: string;
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}
interface LocaleBindableSource {
  sourceType: 'locale';
  fieldKey: string;
  fieldName: string;
  fieldType: 'string';
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}
interface LocaleItemBindableSource {
  sourceType: 'localeItem';
  fieldKey: string;
  fieldName: string;
  fieldType: 'string';
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}

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

// Get the selected element
const element = await webflow.getSelectedElement();
if (element) {
  // Get all bindable sources for the element
  const allSources = await element.searchBindableSources();
  console.log(allSources);
  // [
  //   { sourceType: 'prop', propId: 'prop_1', propName: 'Hero Image', propGroup: null, propType: 'image', valueType: 'imageAsset' },
  //   { sourceType: 'cms', collectionId: 'col_abc123', collectionName: 'Blog Posts', fieldId: 'field_img789', fieldName: 'Featured Image', fieldGroup: null, fieldType: 'image', valueType: 'imageAsset' },
  //   { sourceType: 'locale', fieldKey: 'language', fieldName: 'Language code', fieldType: 'string', valueType: 'text' },
  //   { sourceType: 'page', fieldKey: 'title', fieldName: 'Title', fieldType: 'string', valueType: 'text' },
  // ]
  // Filter by settingKey to find sources compatible with the 'src' setting
  const srcSources = await element.searchBindableSources({ settingKey: 'src' });
  // Filter by valueType to find sources that produce text values
  const textSources = await element.searchBindableSources({ valueType: 'text' });
  // Combine both filters
  const filtered = await element.searchBindableSources({ settingKey: 'altText', valueType: 'text' });
}

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>"
try {
  await element.searchBindableSources({ valueType: 'notAType' });
} catch (error) {
  console.log(error.tag);  // 'InvalidRequest'
  console.log(error.data); // 'Invalid valueType: notAType'

Designer ability

Checks for authorization only

Designer abilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny