Set prop settings (Beta)

1
component.setProp(propId: string, updates: SetPropOptions): Promise<Prop>
2
component.setProp(updates: SetPropOptionsWithId): Promise<Prop>

1
interface SetPropOptions {
2
  /** Update the display name. */
3
  name?: string;
4
  /** Move to a different group, or null to ungroup. */
5
  group?: string | null;
6
  /** Update the tooltip, or null to remove it. */
7
  tooltip?: string | null;
8
  /**
9
   * Update the default value. Shape must match the prop's type.
10
   * Pass null to clear the default value.
11
   */
12
  defaultValue?: PropDefaultValue;
13
14
  // Type-specific settings (only valid for the matching prop type):
15
  multiline?: boolean;       // textContent only
16
  min?: number | null;       // number only
17
  max?: number | null;       // number only
18
  decimals?: number | null;  // number only
19
  trueLabel?: string | null; // boolean only
20
  falseLabel?: string | null; // boolean only
21
}
22
23
interface SetPropOptionsWithId extends SetPropOptions {
24
  /** The ID of the prop to update. */
25
  id: string;
26
}

1
interface Prop {
2
  /** Unique prop ID. */
3
  id: string;
4
  /** The prop type. */
5
  type: PropType;
6
  /** The binding value type, derived from the prop type. */
7
  valueType: BindableValueType;
8
  /** Value types that this prop can bind to. */
9
  bindableTo: readonly BindableValueType[];
10
  /** Display name (may be auto-incremented if there was a name conflict). */
11
  name: string;
12
  /** Group name, or null if ungrouped. */
13
  group: string | null;
14
  /** Tooltip text, or null if not set. */
15
  tooltip: string | null;
16
  /** Default value, or null if not set. */
17
  defaultValue: unknown | null;
18
  // Type-specific settings, included when applicable:
19
  multiline?: boolean;   // textContent
20
  min?: number;          // number
21
  max?: number;          // number
22
  decimals?: number;     // number
23
  trueLabel?: string;    // boolean
24
  falseLabel?: string;   // boolean
25
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const prop = await component.getProp('prop_123')
5
6
  const updated = await component.setProp(prop.id, {
7
    defaultValue: {
8
      ...prop.defaultValue,
9
      rel: 'preload',
10
    },
11
  })
12
  console.log(updated.defaultValue)
13
  /*
14
  {
15
    mode: 'url',
16
    to: 'https://example.com/signup',
17
    openInNewTab: true,
18
    rel: 'preload'
19
  }
20
  */
21
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const updated = await component.setProp({
5
    id: 'prop_456',
6
    name: 'Hero Heading',
7
    tooltip: 'The main headline for the hero section',
8
  })
9
  console.log(updated.name)    // 'Hero Heading'
10
  console.log(updated.tooltip) // 'The main headline for the hero section'
11
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const updated = await component.setProp('prop_789', {
5
    min: 0,
6
    max: 200,
7
    decimals: 2,
8
    defaultValue: 75.5,
9
  })
10
  console.log(updated)
11
  /*
12
  {
13
    id: 'prop_789',
14
    type: 'number',
15
    valueType: 'number',
16
    bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
17
    name: 'Overlay Opacity',
18
    group: 'Settings',
19
    tooltip: null,
20
    defaultValue: 75.5,
21
    min: 0,
22
    max: 200,
23
    decimals: 2
24
  }
25
  */
26
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const updated = await component.setProp('prop_456', { group: 'Layout' })
5
  console.log(updated.group) // 'Layout'
6
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const updated = await component.setProp('prop_456', { group: null })
5
  console.log(updated.group) // null
6
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const updated = await component.setProp('prop_456', { tooltip: null })
5
  console.log(updated.tooltip) // null
6
}