To create a custom property type, first create a LightningTypeBundle. Experience Builder supports only object-based custom LightningTypeBundle. It doesn’t support Apex-based custom LightningTypeBundle.
Only these Lightning types are supported for a custom LightningTypeBundle’s nested properties.
lightning__booleanTypelightning__dateTypelightning__dateTimeTypelightning__integerTypelightning__multilineTextTypelightning__numberTypelightning__richTextTypelightning__textTypelightning__urlTypeFor example, as this code sample illustrates, you can’t use lightning__dateTimeStringType or a custom property type such as c__layoutProperty.
1{
2 "title": "Container Properties",
3 "lightning:type": "lightning__objectType",
4 "properties": {
5 "borderStyle": {
6 "lightning:type": "lightning__textType",
7 "title": "Border Style"
8 },
9 "layoutStyle": {
10 "lightning:type": "c__layoutProperty",
11 "title": "Layout Style"
12 },
13 "expiryDate": {
14 "lightning:type": "lightning__dateTimeStringType",
15 "title": "Expiry Date"
16 }
17 },
18 "required": []
19}In the Custom Article component example, here’s how the schema.json file for the layoutProperty LightningTypeBundle is defined. Download the sample components to follow along.
1{
2 "title": "Layout Properties",
3 "lightning:type": "lightning__objectType",
4 "properties": {
5 "borderStyle": {
6 "lightning:type": "lightning__textType",
7 "title": "Border Style"
8 },
9 "borderWeight": {
10 "lightning:type": "lightning__integerType",
11 "title": "Border Weight (px)"
12 },
13 "borderRadius": {
14 "lightning:type": "lightning__integerType",
15 "title": "Border Radius (px)"
16 },
17 "layoutHeight": {
18 "lightning:type": "lightning__integerType",
19 "title": "Layout Height (px)"
20 },
21 "layoutWidth": {
22 "lightning:type": "lightning__integerType",
23 "title": "Layout Width (px)"
24 }
25 },
26 "required": []
27}In this example, for the layoutProperty LightningTypeBundle to override the editor component for the borderStyle property and lay out the properties in a tabset format, create this editor.json file in the experienceBuilder folder.
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
Release Preview
j