Why Customize SharePoint Edit Form?
SharePoint’s default edit form is functional but often lacks visual appeal and logical grouping, especially for lists with many fields. JSON form formatting empowers you to:
- Improve usability by organizing fields into collapsible sections.
- Enhance aesthetics with icons, headers, and consistent spacing.
- Add functionality like help links or dynamic buttons.
In this guide, you will learn to customize the header, body and footer of the edit form popup using JSON let’s dive in!
Step 1: Enable JSON Customization for Your List:
- Navigate to your SharePoint list where you want to customize the edit form.
- Click on the “Add new item” button.
- In the form, click on the “Edit Form” option (top-right corner).
- Select “Configure Layout” from the dropdown.
- A panel will appear with three sections: Header, Body, Footer.
- Choose the section you want to customize and paste your JSON code into the editor.
Step 2: Structure of JSON form formatting:
SharePoint Forms are divided into three sections:
- Header: Modify the form header to display a title, icon or additional details
- Body: Organize fields into sections for better readability
- Footer: Customize the footer with buttons and actions.
Step 3: Customizing the Header:
The header appears at the top of the form. We can add:
The header appears at the top of the form, and we can customize it to enhance the appearance by adding an icon, title, or even a custom logo.
Adding an Icon in the header:
Where to make changes for popup form Appearance:
|
Change Required |
Modify This Part in JSON |
|
Change Icon |
"iconName": "Onboarding" (Replace with another Fluent UI icon) |
|
Change Icon Size |
“ms-fontsize-42" (increase/decrease number) |
|
Change Icon Color |
“ms-fontColor-themePrimary" (change theme color) |
|
Change Header Background Color |
Add “background-color” : “#F32F1” inside style |
|
Change Title Text |
Modify “txtContent”: “= 'Employee Information of ' + [$Title]" |
|
Change Title Font Size |
“ms-fontSize-24" (increase/decrease number) |
|
Change Title Alignment |
“text-align”: “left” ->”center” or “right” |
|
Adjust Header Height & Spacing |
Modify “height”, “margin-bottom”, “padding” |
How to select an Icon for the Header:
You can select any Fluent UI icon for your header. Follow these steps to get the correct icon name:
- Go to https://uifabricicons.azurewebsites.net/ .
- Search for the icon you want.
- Right-click the icon and select “Copy Friendly Name”.
- Paste the copied name into the “iconName” field in the JSON above.
This will display the selected icon in your SharePoint form header.
Adding a Custom logo in the header:
If you want to display a custom logo instead of an icon, modify the JSON as follow:
Explanation of Changes:
- ElmType changed from “div” to “img” - this tells SharePoint to display an image instead of an icon.
- Src attribute- replace the placeholder URL with the actual URL of your logo stored in a SharePoint document library.
- Style changes- Adjust the width, height and margin as needed.
- Note:- Ensure that the image URL is publicly accessible or that SharePoint permissions allow users to view the image.
Step 4: Customizing the Body into Sections:
Where to make changes to affect the popup form appearance:
|
Change Required |
Modify This Part in JSON |
|
Change Section Heading |
Modify “displayname” : “Personal Deatils” or “displayname”: “Company Details” |
|
Add a New Section |
Copy a section and create a new “displayname” with relevant “fields” |
|
Add a Field to an Existing Section |
Add the field name to the “fields” array |
|
Remove a Field |
Delete the field name from the “fields” array |
|
Rearrange Fields in a Section |
Change the order of fields in the “fields” array |
Step 5: Customizing the Footer with Action Buttons:
Where to make changes for popup form Appearance:
|
Change Required |
Modification This Part in JSON |
|
Change the Link URL |
Replace “href”: https://www.google.com/ with your desired link(e.g. [$ProfileURL] for dynamic links |
|
Open in Same Tab |
Change “target”: “_blank” to “target”: “_self”. |
|
Change Link Text |
Modify “txtContent”: “=’Contact Details for ‘ + [$Title]” |
|
Change Text Color |
Modify “class” and replace ms-fontColor-themePrimary with ms-fontColor-red. |
|
Make it a Button instead of a link |
Change “elmType” : “a” to “elmtype” : “button” |
Step 6: Testing and Debugging:
- Copy the complete JSON code (header, body, and footer).
- Paste it into the JSON customization panel in SharePoint.
- Click Save and refresh your list.
- Edit an item to see the customized popup form in action!
Tips for Advanced Customization:
- Conditional Formatting: Hide/show sections based on field values using “visible”: “=[$status]== ‘Active’”
- Theming: Match your organization’s colors with “style”: { “background”: “#f0f0f0”}
- Integrate Power Automate: Add buttons that trigger workflows using “actionType”: “executeFlow”.
Conclusion:
- Customizing forms with JSON in SharePoint makes it much easier to create clean and user-friendly edit forms. You can organize fields better, add helpful icons, and customize buttons to make the form look good and work smoothly. This helps users save time and makes using the form more enjoyable.
No comments:
Post a Comment