Modifying The Body In SharePoint List Form

Introduction

 

This is continuation of the article series, customizing SharePoint list forms using JSON which contains following

• Creating list from existing list template
• Adding Logo to your list form
• Modifying the body of the form (This article)
• Adding the footer note.

In this series, we will try to modify the body section

• by adding sections to the forms
• by applying conditional formatting

Currently, the form looks like below, where we have added header from previous series.

 

 

Adding sections to the form

 

Step1

 

For this demo, let's add multiple lines of text called ‘Mentor Comments’. We will use this in our conditional formatting section.

 

When going to list settings you should see the following columns after adding Mentor Comments.

 

 

Step 2

 

Now we will apply sections to our form, so that the columns are arranged side by side. Click on new form and go to configure layout, and make sure body is selected.

 

 

 

Just copy and paste the below code in the body section

{
    "sections": [
        {
            "displayname": "Information",
            "fields": [
                "Work",
                "Description"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "Complete by",
                "Complete?",
                "Completed On"
            ]
        },
        {
            "displayname": "Additional Info",
            "fields": [
                "Mentor",
                "Mentor Comments",
                "Relevant link",
                "Relevant files"
            ]
        }
    ]
}

Step 3

 

It should look something like below and hit on ‘Save’.

 

 

Step 4

 

Validate the form, it should show something like below. You should see all the relevant sections are added. 

 

 

Adding Conditional Formatting

 

For the conditional formatting, we will hide the ‘Mentor Comments’ if it is not assigned to yourself. In other words, Mentor Comments will be visible to Mentor only. Let’s see how we can do that. 

 

Step 1

 

Click on ‘New Form’ and now select ‘Edit Columns’.

 

 

Step 2

 

Hover on ‘Mentor Comments’ and click on ‘Vertical Elipses’ and select ‘Conditional Formula’.

 

 

Step 3

 

Copy and paste the below formula and click on ‘Save’. 

 

=if([$Mentor.email]==@me, 'true', 'false')

 

 

Note

you can replace @me to any specific org email address. 

 

Let's break down the formula. Custom formula is similar to excel, it starts with “=”. “if checks condition and basically hides or shows. The field Mentor should be internal name of the field. Since this is people picker, .email gets the email of the Mentor. The @me takes the current user context and validates against the email ID of the Mentor in this scenario. 

 

You can also refer to MSFT documentation from the link ‘Learn to use conditional formulas in a list form’ where the formulas are defined for different field types. 

 

 

Step 4

 

Validate the form, you should see in the new form ‘Mentor Comments’ are hidden. Once you put your email ID in mentor, the Mentor comments should appear

New form where Mentor Comments is hidden when Mentor field is empty.

 

 

New form where Mentor Comments are shown.

 

 

Conclusion

 

Thus in this article, we have seen how to add section to form, and how to apply conditional formatting to fields.

 

References

• https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-conditional-show-hide
• https://github.com/vayin/ListFormatting/blob/main/SimpleBody