Back to form formats
Form formattingSharePoint Online

Status Header and Footer

This sample shows a customized header and footer for a form with a Status column with possible values 'Thinking about it', 'Working on it', 'Done', and 'Nevermind'. This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used.

Status Header and Footer formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Form footer
Download JSON
{
  "elmType": "div",
  "txtContent": "='© ' + getYear(@now) + ' Warrior Horses'",
  "style": {
    "font-size": "10px",
    "border-top-style": "solid",
    "border-top-width": "4px",
    "padding-top": "2px",
    "display": "flex",
    "justify-content": "center"
  },
  "attributes": {
    "class": "=if([$Status] == 'Done', 'ms-borderColor-greenLight', if([$Status] == 'Working on it', 'ms-borderColor-blueLight', if([$Status] == 'Thinking about it', 'ms-borderColor-neutralLight', if([$Status] == 'Nevermind', 'ms-borderColor-yellow', 'ms-borderColor-orangeLight')))) + ' ms-fontColor-neutralPrimary'"
  }
}

From the contributor

How to use this sample

Summary

This sample shows a customized header and footer for a form with a Status column with possible values 'Thinking about it', 'Working on it', 'Done', and 'Nevermind'.

This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used.

screenshot of the sample

screenshot of the sample

screenshot of the sample

screenshot of the sample

Form requirements

A Choice column called Status is required with possible values 'Thinking about it', 'Working on it', 'Done', and 'Nevermind'.

image on the list template

Type Internal Name Required
Single line of text Title Yes
Choice Status No

Sample

Solution Author(s)
status-footer.json Chris Kent
status-header.json Chris Kent

Version history

Version Date Comments
1.0 January 31, 2021 Initial release
2.0 August 20, 2021 Added readme and screenshots

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.