Skip to content

Commit 03b289c

Browse files
authored
Fixed typos and improved code formatting
Fixed typos and improved code formatting
1 parent 81a04c8 commit 03b289c

File tree

1 file changed

+76
-71
lines changed

1 file changed

+76
-71
lines changed

docs/declarative-customization/list-form-configuration.md

Lines changed: 76 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ To configure a form, you will use JSON formatters that you are already familiar
1515

1616
To configure the form in a list or library:
1717

18-
To show or hide a column in a list or library form:
19-
2018
1. Go to the list or library for which you want to configure the form.
2119
1. If you are in a list:
2220

@@ -46,13 +44,13 @@ To show or hide a column in a list or library form:
4644
> [!NOTE]
4745
> Form configuration allows for certain [predefined elements and attributes](column-formatting.md#creating-custom-json) to build the custom header.
4846
49-
1. Below is an example of a custom header JSON:
47+
1. Below is an example of a custom header & JSON:
5048

5149
![Custom list form header](images/list-form-configuration-header.png)
5250

5351
```JSON
5452
{
55-
"debugmode": "true",
53+
"debugMode": true,
5654
"elmType": "div",
5755
"attributes": {
5856
"class": "ms-borderColor-neutralTertiary"
@@ -79,7 +77,7 @@ To show or hide a column in a list or library form:
7977
"elmType": "div",
8078
"attributes": {
8179
"iconName": "Group",
82-
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
80+
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
8381
"title": "Details"
8482
},
8583
"style": {
@@ -106,17 +104,16 @@ To show or hide a column in a list or library form:
106104
"children": [
107105
{
108106
"elmType": "div",
109-
"txtContent": "='Contact details for ' +[$Title]"
107+
"txtContent": "='Contact details for ' + [$Title]"
110108
}
111109
]
112110
}
113111
]
114112
}
115113
```
116-
117-
1. To preview your changes, click the **Preview** button.
118-
1. To save your changes, click the **Save** button.
119-
1. Close the form and open the form again to view the applied header.
114+
1. To preview your changes, click the **Preview** button.
115+
1. To save your changes, click the **Save** button.
116+
1. Close and open the form again to view the custom header.
120117

121118
## Configure custom footer
122119

@@ -126,43 +123,47 @@ To show or hide a column in a list or library form:
126123
> [!NOTE]
127124
> Form configuration allows for certain [predefined elements and attributes](column-formatting.md#creating-custom-json) to build the custom footer.
128125

129-
1. Below is an example of a custom footer JSON:
126+
1. Below is an example of a custom footer & JSON:
130127

131128
![Custom list form footer](images/list-form-configuration-footer.png)
132129

133130
```JSON
134131
{
135-
"debugMode": true,
136-
"elmType": "div",
137-
"style": {
138-
"width": "100%",
139-
"text-align": "left",
140-
"overflow": "hidden",
141-
"border-top-width": "1px"
142-
},
143-
"children": [{
132+
"debugMode": true,
144133
"elmType": "div",
145134
"style": {
146-
"width": "100%",
147-
"padding-top": "10px",
148-
"height": "24px"
135+
"width": "100%",
136+
"text-align": "left",
137+
"overflow": "hidden",
138+
"border-top-width": "1px"
149139
},
150-
"children": [{
151-
"elmType": "a",
152-
"txtContent":"='Contact Details for '+[$Title]",
153-
"attributes": {
154-
"target": "_blank",
155-
"href": "='https://aka.ms/contacts?email='+[$Email]",
156-
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
157-
}
158-
}]
159-
}]
140+
"children": [
141+
{
142+
"elmType": "div",
143+
"style": {
144+
"width": "100%",
145+
"padding-top": "10px",
146+
"height": "24px"
147+
},
148+
"children": [
149+
{
150+
"elmType": "a",
151+
"txtContent": "='Contact Details for ' + [$Title]",
152+
"attributes": {
153+
"target": "_blank",
154+
"href": "='https://aka.ms/contacts?email=' + [$Email]",
155+
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
156+
}
157+
}
158+
]
159+
}
160+
]
160161
}
161162
```
162163

163164
1. To preview your changes, click the **Preview** button.
164165
1. To save your changes, click the **Save** button.
165-
1. Close the form and open the form again to view the applied header.
166+
1. Close and open the form again to view the custom footer.
166167

167168
## Configure custom body with one or more sections
168169

@@ -181,50 +182,54 @@ To show or hide a column in a list or library form:
181182

182183
```JSON
183184
{
184-
"sections": [{
185-
//give a display name for the section
186-
"displayname": "",
187-
"fields": [
188-
//reference your fields here using their display name
189-
"Title"
190-
]
191-
},
192-
{
193-
//give a display name for the section
194-
"displayname": "",
195-
"fields": [
196-
//reference your fields here using their display name
185+
"sections": [
186+
{
187+
//give a display name for the section
188+
"displayName": "",
189+
"fields": [
190+
//reference your fields here using their display name
191+
"Title"
192+
]
193+
},
194+
{
195+
//give a display name for the section
196+
"displayName": "",
197+
"fields": [
198+
//reference your fields here using their display name
199+
]
200+
}
197201
]
198-
}]
199202
}
200203
```
201204

202205
1. Below is an example of a custom body JSON with sections:
203206

204207
```JSON
205208
{
206-
"sections": [{
207-
"displayname": "",
208-
"fields": [
209-
"Title"
210-
]
211-
},
212-
{
213-
"displayname": "Details",
214-
"fields": [
215-
"Department",
216-
"Email",
217-
"Country"
218-
]
219-
},
220-
{
221-
"displayname": "Application",
222-
"fields": [
223-
"Application Id",
224-
"Approver",
225-
"Reviewer"
226-
]
227-
}]
209+
"sections": [
210+
{
211+
"displayName": "",
212+
"fields": [
213+
"Title"
214+
]
215+
},
216+
{
217+
"displayName": "Details",
218+
"fields": [
219+
"Department",
220+
"Email",
221+
"Country"
222+
]
223+
},
224+
{
225+
"displayName": "Application",
226+
"fields": [
227+
"Application Id",
228+
"Approver",
229+
"Reviewer"
230+
]
231+
}
232+
]
228233
}
229234
```
230235

@@ -237,4 +242,4 @@ To show or hide a column in a list or library form:
237242

238243
1. To preview your changes, click the **Preview** button.
239244
1. To save your changes, click the **Save** button.
240-
1. Close the form and open the form again to view the applied header.
245+
1. Close and open the form again to view the custom body.

0 commit comments

Comments
 (0)