Create Microsoft Lists and SharePoint custom forms without using Power Apps

By João Ferreira Jan 24, 2021 Microsoft Lists, SharePoint 11 Comments

List forms are generated automatically when a new list is created but sometimes it simply does not meet the business requirements and when that happens you need to create custom forms.

SharePoint list forms can be customized since forever and if you know the platform for a log time, things like InfoPath and Power Apps might sound familiar to you as these were the tools used to build custom forms.

With the new Microsoft Lists you can now create your own custom forms without leaving the application, using what is provided out of the box.

The customization options in the form allow you to configure the header, footer and the body using a custom JSON schema.

How to format the header and footer in a list form

The header and footer of a list form can be customized using JSON with HTML elements that will allow you to build complex HTML structures that are used to render information that is stored already in your list.

To format the header and footer of a list form you must do the following:

1. Open a list form, you can do it from the new form or the item detail form
2. Click in the edit form button
3. From the menu click in Configure layout
   
4. In the Apply formatting to drop down, select Header or Footer
5. Type the JSON formatting in the text box
   I’m providing the following example so you can use it as a starting point; it creates an HTML structure that displays the page title along with an icon and an underline matching the main color of the site

   {
       "elmType": "div",
       "attributes": {
           "class": "ms-borderColor-themePrimary"
       },
       "style": {
           "width": "99%",
           "border-top-width": "0px",
           "border-bottom-width": "2px",
           "border-left-width": "0px",
           "border-right-width": "0px",
           "border-style": "solid",
           "margin-bottom": "16px"
       },
       "children": [
           {
               "elmType": "div",
               "style": {
                   "display": "flex",
                   "box-sizing": "border-box",
                   "align-items": "center"
               },
               "children": [
                   {
                       "elmType": "div",
                       "attributes": {
                           "iconName": "Money",
                           "class": "ms-fontSize-su ms-fontWeight-regular ms-fontColor-themePrimary"
                       },
                       "style": {
                           "flex": "none",
                           "padding": "0px",
                           "padding-left": "0px",
                           "height": "36px"
                       }
                   }
               ]
           },
           {
               "elmType": "div",
               "attributes": {
                   "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-xl"
               },
               "style": {
                   "box-sizing": "border-box",
                   "width": "100%",
                   "text-align": "left",
                   "padding": "21px 12px",
                   "overflow": "hidden"
               },
               "children": [
                   {
                       "elmType": "div",
                       "txtContent": {
                           "operator": "+",
                           "operands": [
                               "Expense - ",
                               "[$Title]"
                           ]
                       },
                       "style": {
                           "height": "24px"
                       }
                   }
               ]
           }
       ]
   }
   

6. Click on Preview to see the formatting applied
   
7. Click on Save to make the new formatting available to all the users

How to format the body in a list form

The body formatting in a list form allows you to create groups where the columns are displayed side by side, saving screen space and giving you a holistic view over the list item.

The body formatting despite being done with JSON uses a different schema and does not support the use of HTML.

To format the header and footer of a list form you must do the following:

1. Open a list form, you can do it from the new form or the item detail form
2. Click in the edit form button
3. From the menu click in Configure layout
   
4. In the Apply formatting to drop down, select Body
5. Type the JSON formatting in the text box
   I’m providing the following generic example so you can use it as a starting point; The JSON structure is quite simple and you just need to know the following properties:
   • fields – The display name of the column
   • displayname – The string that will be displayed as the title of the group

   {
       "sections":[
           {
               "displayname":"Section 1",
               "fields":[
                   "fieldName",
                   "fieldName1"
               ]
           },
   		{
               "displayname":"Section 2",
               "fields":[
                   "fieldName2",
                   "fieldName3"
               ]
           }
       ]
   }
   

6. Click on Preview to see the formatting applied
   
7. Click on Save to make the new formatting available to all the users

Important rules about the body formatting that you should keep in mind:

• Columns are organized disregarding the definition order inside the section
• Columns cannot be repeated in multiple groups
• Pre-existing column formatting defined for the list are kept inside the body format

The customizations made to the list form will be visible in the new item form and in the item detail form and you will end up with a form similar to the following animation.

Now its time for you to get creative and surprise your users with amazing list forms built inside the lists platform.