Search element settings (Beta)

1
element.searchSettings(options?: SearchSettingsOptions): Promise<Record<string, SearchSettingsResult>>

1
interface SearchSettingsOptions {
2
  /** Filter to settings that produce a specific value type (e.g., "string", "image", "collectionListSetting") */
3
  valueType?: SearchSettingValueType;
4
  /** Filter to a specific setting by key (e.g., "domId", "assetId") */
5
  key?: string;
6
}
7
8
interface ElementSetting {
9
  valueType: BindableValueType;
10
  canBind: boolean;
11
  value: SettingValue;
12
  resolvedValue: ResolvedValue | null;
13
  display: SettingDisplay;
14
}
15
16
interface CollectionListElementSetting {
17
  valueType: "collectionListSetting";
18
  canBind: false;
19
  value: CollectionListSettingValue;
20
  display: SettingDisplay;
21
}
22
23
type SearchSettingsResult = ElementSetting | CollectionListElementSetting;
24
type SearchSettingValueType = SearchSettingsResult["valueType"];
25
26
type SettingValue =
27
  | { sourceType: 'static'; value: unknown }
28
  | { sourceType: 'prop'; propId: string; propName: string; propType: string }
29
  | { sourceType: 'cms'; collectionId: string; collectionName: string; fieldId: string; fieldName: string }
30
  | { sourceType: 'locale'; fieldKey: string; fieldName: string }
31
  | { sourceType: 'localeItem'; fieldKey: string; fieldName: string }
32
  | { sourceType: 'page'; fieldKey: string; fieldName: string }
33
  | { sourceType: 'conditional' }
34
  | { sourceType: 'legacy' };
35
36
interface SettingDisplay {
37
  label: string;
38
  group: string | null;
39
  trueLabel?: string;
40
  falseLabel?: string;
41
}
42
43
type CollectionListSettingValue =
44
  | CollectionListSource
45
  | CollectionListFilter[]
46
  | CollectionListSort[]
47
  | CollectionListPagination
48
  | CollectionListQueryMode
49
  | CollectionListFilterMatch
50
  | string[]
51
  | number
52
  | null;

1
// Get the selected element
2
const element = await webflow.getSelectedElement();
3
4
if (element) {
5
  // Get all settings for the element
6
  const allSettings = await element.searchSettings();
7
  console.log(allSettings);
8
  // Example result for an Image element:
9
  // {
10
  //   altText: {
11
  //     valueType: 'altText',
12
  //     canBind: true,
13
  //     value: { sourceType: 'static', value: 'A sunset photo' },
14
  //     resolvedValue: 'A sunset photo',
15
  //     display: { label: 'Alt Text', group: null }
16
  //   },
17
  //   src: {
18
  //     valueType: 'image',
19
  //     canBind: true,
20
  //     value: { sourceType: 'static', value: 'asset_abc123' },
21
  //     resolvedValue: 'https://cdn.webflow.com/foo.jpg',
22
  //     display: { label: 'Image', group: null }
23
  //   },
24
  //   domId: {
25
  //     valueType: 'id',
26
  //     canBind: true,
27
  //     value: { sourceType: 'static', value: 'hero-img' },
28
  //     resolvedValue: 'hero-img',
29
  //     display: { label: 'ID', group: null }
30
  //   }
31
  // }
32
33
  // Filter to only image-type settings
34
  const imageSettings = await element.searchSettings({ valueType: 'image' });
35
36
  // Get a specific setting by key
37
  const altTextSetting = await element.searchSettings({ key: 'altText' });
38
}

1
const collectionList = await webflow.getSelectedElement();
2
3
if (collectionList?.type === "DynamoWrapper") {
4
  const collectionListSettings = await collectionList.searchSettings({
5
    valueType: "collectionListSetting",
6
  });
7
8
  console.log(collectionListSettings.source);
9
  // {
10
  //   valueType: "collectionListSetting",
11
  //   canBind: false,
12
  //   value: { collectionId: "collection_123" },
13
  //   display: { label: "Source", group: "Collection List" }
14
  // }
15
16
  const filterSettings = await collectionList.searchSettings({ key: "filters" });
17
  console.log(filterSettings.filters);
18
  // {
19
  //   valueType: "collectionListSetting",
20
  //   canBind: false,
21
  //   value: [],
22
  //   display: { label: "Filters", group: "Collection List" }
23
  // }
24
}