Skip to content

Commit d7e6fd7

Browse files
chakkaradeepchakkaradeep
authored
Merge pull request SharePoint#6480 from SharePoint/chaksc-forms-configuration
List forms configuration documentation
2 parents dfa3be1 + c8a749c commit d7e6fd7

File tree

5 files changed

+253
-0
lines changed

5 files changed

+253
-0
lines changed

‎docs/declarative-customization/images/list-form-configuration-body.png

236 KB
Loading

‎docs/declarative-customization/images/list-form-configuration-footer.png

39.9 KB
Loading

‎docs/declarative-customization/images/list-form-configuration-header.png

106 KB
Loading

‎docs/declarative-customization/images/list-form-configuration-menu.png

31.6 KB
Loading

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

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
---
2+
title: Configure the list form
3+
description: Configure list form with a custom header, footer and body with one or more sections.
4+
ms.date: 11/17/2020
5+
localization_priority: Priority
6+
---
7+
8+
# Configure the list form
9+
10+
You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections. The form configuration does not change the data in the list item or file; it only changes how the form is displayed to users who browse the list or library. Anyone who can create and manage views in a list can use form configuration to configure the form with header, footer and body with sections.
11+
12+
To configure a form, you will use JSON formatters that you are already familar with when formatting a [column](../column-formatting.md) or a [view](../view-formatting.md) in a list or libary. Form configuration allows for certain predefined elements and attributes to build the custom header, footer and body with one or more sections.
13+
14+
## Get started
15+
To configure the form in a list or library:
16+
17+
To show or hide a column in a list or library form:
18+
19+
1. Go to the list or library for which you want to configure the form.
20+
2. If you are in a list:
21+
22+
- Open an item to view the item details in the display form.
23+
24+
3. If you are in a document library:
25+
26+
- Select a file.
27+
- In the **Information Pane**:
28+
- Locate the **Properties** section.
29+
- Click **Edit all**.
30+
31+
4. At the top of the form, expand **Edit Form** icon and then select **Configure layout**
32+
33+
![Configure list form](./images/list-form-configuration-menu.png)
34+
35+
5. In the **Format** pane, you can choose to apply formatting to the following form sections:
36+
- Header
37+
- Body
38+
- Footer
39+
40+
## Configure custom header
41+
42+
1. To apply formatting to the header, select **Header** in the **Apply formatting to** dropdown.
43+
44+
2. Paste your custom header formatter in the JSON text input area.
45+
> [!NOTE]
46+
> Form configuration allows for certain [predefined elements and attributes](../column-formatting#creating-custom-json) to build the custom header.
47+
48+
3. Below is an example of a custom header JSON:
49+
50+
![Custom list form header](./images/list-form-configuration-header.png)
51+
52+
```JSON
53+
{
54+
"debugmode": "true",
55+
"elmType": "div",
56+
"attributes": {
57+
"class": "ms-borderColor-neutralTertiary"
58+
},
59+
"style": {
60+
"width": "99%",
61+
"border-top-width": "0px",
62+
"border-bottom-width": "1px",
63+
"border-left-width": "0px",
64+
"border-right-width": "0px",
65+
"border-style": "solid",
66+
"margin-bottom": "16px"
67+
},
68+
"children": [
69+
{
70+
"elmType": "div",
71+
"style": {
72+
"display": "flex",
73+
"box-sizing": "border-box",
74+
"align-items": "center"
75+
},
76+
"children": [
77+
{
78+
"elmType": "div",
79+
"attributes": {
80+
"iconName": "Group",
81+
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
82+
"title": "Details"
83+
},
84+
"style": {
85+
"flex": "none",
86+
"padding": "0px",
87+
"padding-left": "0px",
88+
"height": "36px"
89+
}
90+
}
91+
]
92+
},
93+
{
94+
"elmType": "div",
95+
"attributes": {
96+
"class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
97+
},
98+
"style": {
99+
"box-sizing": "border-box",
100+
"width": "100%",
101+
"text-align": "left",
102+
"padding": "21px 12px",
103+
"overflow": "hidden"
104+
},
105+
"children": [
106+
{
107+
"elmType": "div",
108+
"txtContent": "='Contact details for ' +[$Title]"
109+
}
110+
]
111+
}
112+
]
113+
}
114+
```
115+
116+
4. To preview your changes, click the **Preview** button.
117+
118+
5. To save your changes, click the **Save** button.
119+
120+
7. Close the form and open the form again to view the applied header.
121+
122+
## Configure custom footer
123+
124+
1. To apply formatting to the footer, in the **Format** pane, select **Footer** in the **Apply formatting to** dropdown.
125+
126+
2. Paste your custom footer formatter in the JSON text input area.
127+
> [!NOTE]
128+
> Form configuration allows for certain [predefined elements and attributes](../column-formatting#creating-custom-json) to build the custom footer.
129+
130+
4. Below is an example of a custom footer JSON:
131+
132+
![Custom list form footer](./images/list-form-configuration-footer.png)
133+
134+
```JSON
135+
{
136+
"debugMode": true,
137+
"elmType": "div",
138+
"style": {
139+
"width": "100%",
140+
"text-align": "left",
141+
"overflow": "hidden",
142+
"border-top-width": "1px"
143+
},
144+
"children": [
145+
{
146+
"elmType": "div",
147+
"style": {
148+
"width": "100%",
149+
"padding-top": "10px",
150+
"height": "24px"
151+
},
152+
"children": [
153+
{
154+
"elmType": "a",
155+
"txtContent":"='Contact Details for '+[$Title]",
156+
"attributes": {
157+
"target": "_blank",
158+
"href": "='https://aka.ms/contacts?email='+[$Email]",
159+
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
160+
}
161+
}
162+
]
163+
}
164+
]
165+
}
166+
```
167+
168+
5. To preview your changes, click the **Preview** button.
169+
170+
6. To save your changes, click the **Save** button.
171+
172+
7. Close the form and open the form again to view the applied header.
173+
174+
175+
## Configure custom body with one or more sections
176+
1. To apply formatting to the body, in the **Format** pane, select **Body** in the **Apply formatting to** dropdown.
177+
178+
2. Paste your custom body formatter in the JSON text input area.
179+
180+
3. Unlike the header and the footer, body configuration only allows defining one or more sections and adding one or more columns into each of those sections.
181+
- One or more sections can be defined for a body.
182+
- Each section can reference one or more columns in the list or library.
183+
- A column can be referenced only in one section.
184+
- If a column is referenced in multiple sections, the first section where the column is referenced will take the precedence.
185+
- A column not referenced in any of the sections will be automatically referenced in the last section.
186+
- New columns added will be automatically referenced in the last section.
187+
188+
4. Below is the JSON structure to get started with defining sections and referencing columns in the sections:
189+
190+
```JSON
191+
{
192+
"sections": [
193+
{
194+
//give a display name for the section
195+
"displayname": "",
196+
"fields": [
197+
//reference your fields here using their display name
198+
"Title"
199+
]
200+
},
201+
{
202+
//give a display name for the section
203+
"displayname": "",
204+
"fields": [
205+
//reference your fields here using their display name
206+
]
207+
}
208+
]
209+
}
210+
```
211+
212+
5. Below is an example of a custom body JSON with sections:
213+
214+
```JSON
215+
{
216+
"sections": [
217+
{
218+
"displayname": "",
219+
"fields": [
220+
"Title"
221+
]
222+
},
223+
{
224+
"displayname": "Details",
225+
"fields": [
226+
"Department",
227+
"Email",
228+
"Country"
229+
]
230+
},
231+
{
232+
"displayname": "Application",
233+
"fields": [
234+
"Application Id",
235+
"Approver",
236+
"Reviewer"
237+
]
238+
}
239+
]
240+
}
241+
```
242+
243+
6. Once the body is customized with one or more sections, the list or library form will switch to a multi-column layout.
244+
> [!NOTE]
245+
> Configuring form body will switch your list or library form layout from single-column to a multi-column layout. We will add support for configuring the body with single-column layout in a future update.
246+
247+
![Custom list form body with sections](./images/list-form-configuration-body.png)
248+
249+
7. To preview your changes, click the **Preview** button.
250+
251+
8. To save your changes, click the **Save** button.
252+
253+
9. Close the form and open the form again to view the applied header.

0 commit comments

Comments
 (0)