SharePoint List Formatting
Back to form formats
Form formattingSharePoint Online

Event Itinerary Header

This sample shows a customized header for the item form used in the "Event itinerary" list template.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Jan 31, 2021

Event Itinerary Header formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

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 header
Download JSON
{
  "elmType": "div",
  "style": {
    "display": "=if([$Title] == '' , 'none' , '')",
    "flex-direction": "row",
    "min-height": "100px",
    "width": "100%",
    "margin-bottom": "10px"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "150px",
        "justify-content": "center",
        "padding-bottom": "5px",
        "display": "=if(Number([$StartDateAndTime]) == 0 , 'none' , 'flex')"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "flex-direction": "column",
            "width": "85px",
            "margin": "5px",
            "display": "flex",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "=getYear([$StartDateAndTime])",
              "style": {
                "margin": "2px"
              },
              "attributes": {
                "class": "ms-fontColor-themePrimary ms-fontWeight-bold ms-fontSize-24"
              }
            },
            {
              "elmType": "div",
              "txtContent": "=if(getMonth([$StartDateAndTime])==0, 'Jan', if(getMonth([$StartDateAndTime])==1, 'Feb', if(getMonth([$StartDateAndTime])==2, 'Mar', if(getMonth([$StartDateAndTime])==3, 'Apr',  if(getMonth([$StartDateAndTime])==4, 'May', if(getMonth([$StartDateAndTime])==5, 'Jun', if(getMonth([$StartDateAndTime])==6 , 'Jul', if(getMonth([$StartDateAndTime])==7, 'Aug', if(getMonth([$StartDateAndTime])==8 , 'Sep', if(getMonth([$StartDateAndTime])==9, 'Oct', if(getMonth([$StartDateAndTime])==10, 'Nov', if(getMonth([$StartDateAndTime])==11, 'Dec', ''))))))))))))",
              "style": {
                "display": "flex",
                "justify-content": "center",
                "align-items": "center",
                "width": "100%",
                "height": "30px",
                "border": "1px solid",
                "margin-bottom": "-1px"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-24"
              }
            },
            {
              "elmType": "div",
              "txtContent": "=getDate([$StartDateAndTime])",
              "style": {
                "display": "flex",
                "justify-content": "center",
                "align-items": "center",
                "width": "83px",
                "border": "1px solid",
                "height": "50px"
              },
              "attributes": {
                "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-42"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "margin": "10px",
        "width": "100%",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center"
      },
      "attributes": {
        "class": "ms-bgColor-themePrimary ms-fontColor-white"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "margin": "10px",
            "width": "100%",
            "height": "100%",
            "border": "2px dashed",
            "display": "flex",
            "flex-direction": "column",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "padding": "5px",
                "text-align": "center"
              },
              "attributes": {
                "class": "ms-fontSize-28 ms-fontWeight-bold"
              },
              "children": [
                {
                  "elmType": "span",
                  "style": {
                    "display": "=if([$SessionCode] == '' , 'none' , '')",
                    "padding-right": "10px"
                  },
                  "txtContent": "= '[' + [$SessionCode] + ']'"
                },
                {
                  "elmType": "span",
                  "txtContent": "[$Title]"
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "padding": "5px",
                "display": "=if([$Description] == '' , 'none' , '')",
                "text-align": "center"
              },
              "txtContent": "[$Description]",
              "attributes": {
                "class": "ms-fontSize-16"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "100%",
                "min-height": "50px",
                "display": "=if([$SessionType] == '' , if(Number([$StartDateAndTime]) == 0 , if([$Location] == '' , if([$Capacity] == '' , 'none' , 'flex') , 'flex') , 'flex') , 'flex')",
                "flex-wrap": "wrap",
                "align-items": "center",
                "justify-content": "space-evenly"
              },
              "attributes": {
                "class": "ms-fontSize-14 ms-fontColor-themePrimary"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "display": "=if([$SessionType] == '' , 'none' , 'flex')",
                    "border-radius": "10px",
                    "padding": "5px 10px 5px 10px",
                    "white-space": "nowrap",
                    "margin": "5px",
                    "align-items": "center",
                    "line-height": "14px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-white"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "padding-right": "5px"
                      },
                      "attributes": {
                        "iconName": "Tag"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "[$SessionType]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "=if(Number([$StartDateAndTime]) == 0 , 'none' , 'flex')",
                    "border-radius": "10px",
                    "padding": "5px 10px 5px 10px",
                    "white-space": "nowrap",
                    "margin": "5px",
                    "align-items": "center",
                    "line-height": "14px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-white"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "padding-right": "5px"
                      },
                      "attributes": {
                        "iconName": "DateTimeMirrored"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "=toLocaleTimeString([$StartDateAndTime]) + ' - ' + toLocaleTimeString([$EndDateAndTime])"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "=if([$Location] == '' , 'none' , 'flex')",
                    "border-radius": "10px",
                    "padding": "5px 10px 5px 10px",
                    "white-space": "nowrap",
                    "margin": "5px",
                    "align-items": "center",
                    "line-height": "14px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-white"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "padding-right": "5px"
                      },
                      "attributes": {
                        "iconName": "MapPin"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "[$Location]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "=if([$Capacity] == '' , 'none' , 'flex')",
                    "border-radius": "10px",
                    "padding": "5px 10px 5px 10px",
                    "white-space": "nowrap",
                    "margin": "5px",
                    "align-items": "center",
                    "line-height": "14px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-white"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "padding-right": "5px"
                      },
                      "attributes": {
                        "iconName": "People"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "[$Capacity.displayValue]"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
View sourceLink to this definitionevent-itinerary-header.json

From the contributor

How to use this sample

Summary

This sample shows a customized header for the item form used in the "Event itinerary" list template.

screenshot of the sample

This format is intended for the Header Format of the form body in the Configure Layout panel. The body layout shown in the screenshot can be obtained by configuring sections within the Body panel (not included in this format).

Form requirements

The following fields are all included in the "Event itinerary" template. You can find this template in the new List dialog:

image on the list template

Type Internal Name Required
Single line of text Title Yes
Multiple lines of text Description No
Single line of text SessionCode No
Choice SessionType No
Person or Group Speakers No
Date and Time StartDateAndTime No
Date and Time EndDateAndTime No
Calculated Duration No
Number Capacity No
Choice Location No
Multiple lines of text Notes No

Sample

Solution Author(s)
event-itinerary-header.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 January 31, 2021 Initial release

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.

Keep exploring

More formats like this

Countdown Timer Header

A form header formatter that displays days remaining until a due date with color-coded urgency: green (calm, >7 days), amber (warning, 4-7 days), red (urgent, 1-3 days), and crimson (overdue).

Explore format

Two Column Logo Header

This sample displays an Icon and Title in a two column header with the Icon on the left and the Title on the right. An additional Icon and RequestStatus and added below the Title.

Explore format

Workflow Progress Header

This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.

Explore format