ComponentsManaging Components

Create multiple props (Beta)

component.createProps(options)

Creates multiple props on a component in a single transaction. This is the bulk counterpart to component.createProp(), accepting an array of prop definitions and returning an array of created props in the same order.

The operation is all-or-nothing: if any prop in the array fails validation, no props are created.

Name conflict auto-increment applies across the entire batch and against props that already exist on the component. For example, if two items in the array both specify name: 'Heading' in the same group, the second becomes 'Heading 2'.

Beta

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

Syntax

1component.createProps(options: CreatePropOptions[]): Promise<Prop[]>

The CreatePropOptions type and Prop response type are identical to those used by component.createProp().

Parameters

  • options : CreatePropOptions[] — An array of prop definitions. Each item uses the same shape as the options parameter of component.createProp(). The array must contain at least one item.

Returns

Promise<Prop[]>

A Promise that resolves to an array of Prop objects in the same order as the input array. Each Prop object has the same shape as the return value of component.createProp().

Examples

Create multiple props at once:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const props = await component.createProps([
5    {
6      type: 'textContent',
7      name: 'Heading',
8      group: 'Content',
9      defaultValue: 'Welcome to our site',
10    },
11    {
12      type: 'textContent',
13      name: 'Subheading',
14      group: 'Content',
15      defaultValue: 'We build things',
16    },
17    {
18      type: 'imageAsset',
19      name: 'Background Image',
20      group: 'Content',
21    },
22    {
23      type: 'link',
24      name: 'CTA Link',
25      group: 'Content',
26      defaultValue: {
27        mode: 'url',
28        to: 'https://example.com/signup',
29        openInNewTab: true,
30      },
31    },
32    {
33      type: 'number',
34      name: 'Overlay Opacity',
35      group: 'Settings',
36      min: 0,
37      max: 100,
38      decimals: 0,
39      defaultValue: 50,
40    },
41  ])
42  console.log(props)
43  /*
44  [
45    {
46      id: 'prop_1',
47      type: 'textContent',
48      valueType: 'textContent',
49      bindableTo: ['string', 'textContent', 'altText', 'id'],
50      name: 'Heading',
51      group: 'Content',
52      defaultValue: 'Welcome to our site',
53      tooltip: null
54    },
55    {
56      id: 'prop_2',
57      type: 'textContent',
58      valueType: 'textContent',
59      bindableTo: ['string', 'textContent', 'altText', 'id'],
60      name: 'Subheading',
61      group: 'Content',
62      defaultValue: 'We build things',
63      tooltip: null
64    },
65    {
66      id: 'prop_3',
67      type: 'imageAsset',
68      valueType: 'imageAsset',
69      bindableTo: ['image'],
70      name: 'Background Image',
71      group: 'Content',
72      defaultValue: null,
73      tooltip: null
74    },
75    {
76      id: 'prop_4',
77      type: 'link',
78      valueType: 'link',
79      bindableTo: ['link'],
80      name: 'CTA Link',
81      group: 'Content',
82      defaultValue: {
83        mode: 'url',
84        to: 'https://example.com/signup',
85        openInNewTab: true
86      },
87      tooltip: null
88    },
89    {
90      id: 'prop_5',
91      type: 'number',
92      valueType: 'number',
93      bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
94      name: 'Overlay Opacity',
95      group: 'Settings',
96      defaultValue: 50,
97      tooltip: null,
98      min: 0,
99      max: 100,
100      decimals: 0
101    }
102  ]
103  */
104}

Name conflicts auto-increment within the batch:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const props = await component.createProps([
5    { type: 'textContent', name: 'Heading', group: 'Content' },
6    { type: 'textContent', name: 'Heading', group: 'Content' },
7  ])
8  console.log(props[0].name) // 'Heading'
9  console.log(props[1].name) // 'Heading 2'
10}

Designer Ability

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canModifyComponentsanyanyanyCanvasDesign