Migrate from ExperiencePropertyTypeBundle to LightningTypeBundle

If you created any custom property types using ExperiencePropertyTypeBundle, update the relevant custom Lightning web components to reference the new LightningTypeBundle instead.

  1. Create a new LightningTypeBundle and give it a different name from the original ExperiencePropertyTypeBundle. (See Object-Based Custom Lightning Types in the Lightning Types Developer Guide.)
  2. Copy the schema.json file from the ExperiencePropertyTypeBundle to the new LightningTypeBundle.
  3. For an ExperiencePropertyTypeBundle that has a design.json file, create a new editor.json file in the LightningTypeBundle and place it in the experienceBuilder folder. To create the editor.json file, copy the contents of the design.json file to editor.json and replace:
    • propertySheet with editor
    • propertyRenderers with componentOverrides
    • view with layout
  4. Update the type attribute in the custom Lightning web component’s js-meta.xml file to point to the new LightningTypeBundle.
  5. Deploy the new LightningTypeBundle and updated custom Lightning web component to your org.
  6. If the ExperiencePropertyTypeBundle is not part of a managed package, delete it using destructiveChanges.xml (See Deleting Components from an Organization in the Metadata API Developer Guide.)

Here’s an example of an ExperiencePropertyTypeBundle’s design.json file.

1{
2  "propertySheet": {
3    "propertyRenderers": {
4      "borderStyle": {
5        "definition": "c/borderStyleDropdownCPE"
6      }
7    },
8    "view": {
9      "definition": "lightning/tabSetLayout",
10      "children": [
11        {
12          "definition": "lightning/tabLayout",
13          "attributes": {
14            "label": "Borders"
15          },
16          "children": [
17            {
18              "definition": "lightning/propertyLayout",
19              "attributes": {
20                "property": "borderStyle"
21              }
22            },
23            {
24              "definition": "lightning/propertyLayout",
25              "attributes": {
26                "property": "borderWeight"
27              }
28            },
29            {
30              "definition": "lightning/propertyLayout",
31              "attributes": {
32                "property": "borderRadius"
33              }
34            }
35          ]
36        },
37        {
38          "definition": "lightning/tabLayout",
39          "attributes": {
40            "label": "Size"
41          },
42          "children": [
43            {
44              "definition": "lightning/propertyLayout",
45              "attributes": {
46                "property": "layoutHeight"
47              }
48            },
49            {
50              "definition": "lightning/propertyLayout",
51              "attributes": {
52                "property": "layoutWidth"
53              }
54            }
55          ]
56        }
57      ]
58    }
59  }
60}

Here’s the equivalent LightningTypeBundle editor.json file.

1{
2  "editor": {
3    "componentOverrides": {
4      "borderStyle": {
5        "definition": "c/borderStyleDropdownCPE"
6      }
7    },
8    "layout": {
9      "definition": "lightning/tabSetLayout",
10      "children": [
11        {
12          "definition": "lightning/tabLayout",
13          "attributes": {
14            "label": "Borders"
15          },
16          "children": [
17            {
18              "definition": "lightning/propertyLayout",
19              "attributes": {
20                "property": "borderStyle"
21              }
22            },
23            {
24              "definition": "lightning/propertyLayout",
25              "attributes": {
26                "property": "borderWeight"
27              }
28            },
29            {
30              "definition": "lightning/propertyLayout",
31              "attributes": {
32                "property": "borderRadius"
33              }
34            }
35          ]
36        },
37        {
38          "definition": "lightning/tabLayout",
39          "attributes": {
40            "label": "Size"
41          },
42          "children": [
43            {
44              "definition": "lightning/propertyLayout",
45              "attributes": {
46                "property": "layoutHeight"
47              }
48            },
49            {
50              "definition": "lightning/propertyLayout",
51              "attributes": {
52                "property": "layoutWidth"
53              }
54            }
55          ]
56        }
57      ]
58    }
59  }
60}

See Also