Create an event page with SharePoint and Lists

Anand • 2021-10-16

Recently I tweeted about an event page I was working on and how I used SharePoint and Lists to design the user experience. To my pleasant surprise the tweet got great response and reactions from the SharePoint community. Some folks asked if I could share the details of how I made the page. That is the background to this post. Thank you for asking because it helped me get back to my blog after a long time 🙂.

Having fun creating an event page with #SharePoint and bringing together #SharePointSpaces, formatted #Lists to enhance the experience. pic.twitter.com/0bloo2BmMv
— Anand (@anandVragav) October 11, 2021

I will break down the components first and then go into the details one by one.

a headerless SharePoint page as the event page
a SharePoint Space
an events list in SharePoint
a SharePoint list to store the sessions information
Optional: a SharePoint list to store session tracks
a SharePoint list to store people information
a timer web part
a quick links web part
a related events web part (this could also bea news web part or sites web part or any other is relevant for your case)
a yammer community web part related to the event

A headerless page: For the event page, I chose to have a headerless page in my SharePoint site. My intention was to save some real-estate on the page because there is no header image banner on a headerless page.

To create the headerless page, make a copy of the site homepage (the default home page created when you create a new site does not have a header and title at the top), rename the URL and rename the page title in page properties. The copy gets added to the page library with url ending “..home1.aspx”.

For comparison see the amount of space saved below.

With header, the image banner takes more space

For the page layout choose the vertical section. This puts a vertical section for the full length of the page on the right-hand-side.

Create a SharePoint space

Below image snapshot shows the design of my Space and the web parts I used.

Now with the Space created, copy the URL to the Space and to add it to the event page (the headerless page) using the embed web part on the page.

Paste the URL to the Space in the embed web part and save the page. If you want to customize the height and width properties of the embedded Space, use an iFrame embed code like the below and adjust the properties to taste.

<iframe src="https://<Replace with your Space URL>" width="100%" height="550" style="border:1px solid black;"></iframe>

To get a similar result as shown below you may need to adjust the positions of the web parts in the Space by checking how they are aligned once embedded on the event page.

Events list: The sessions are scheduled using the events calendar in the SharePoint site. However I chose not to display them on the event page using the events web part; instead I chose a SharePoint list (details in next section).

From the events calendar, for each event we can get the event ID and the .ics file. This information is needed to let users download the ics file to add the event to their calendars. To add the events, use the Events web part on a separate hidden page or use the events list from the backend through Site contents. Use Microsoft support documentation for help.

***Use the Events web partWhen you add a modern page to a site, you add and customize web parts, which are the building blocks of your page. This…** support.microsoft.com

SharePoint list to display the sessions information: To display the sessions on the event page, I created a list in the SharePoint site with the below columns. The field labels for the columns were renamed later to suit the event needs.

Sessions list column headers

If you are new to lists and want to learn how to work with lists and add entries, follow the Microsoft documentation in below link.

***Introduction to listsNote: Note that the information here and the types of lists available to you depend on the version of SharePoint you…** support.microsoft.com

After adding the session entries, I formatted the columns using JSON to give it a better format and styling like the below. I recommend creating a separate view before proceeding with formatting the columns. That way you have a view to embed on the event page and another view in the backend for editing purposes.

Let’s look at the formatting, lets’s take them column by column starting with the Session column.

The session column is a single line text column and has a left-hand-side border, session title and a share button. The share button opens the default share option for list items to allow users to share session links through email or copy the link to share through Teams or another channel.

To get that format, use the JSON code below. Open the drown-down arrow next to the column header > select column settings > select Format this column. Then paste the below JSON and click save.

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",  "elmType": "div",  "attributes": {    "class": "sp-css-backgroundColor-neutralBackground"  },  "style": {    "border-color": "=if([$Sessiontrack] =='Keynote', '#0fc373', if([$Sessiontrack] =='Product Roundtables', '#ff8c0a',  if([$Sessiontrack] =='Breakout', '#af78d2' '#0082f0')))",    "border-left-style": "solid",    "border-width": "4px",    "border-radius": "4px",    "background-color": "sp-css-backgroundColor-neutralBackground",    "white-space": "normal",    "padding-top": "0px",    "display": "flex",    "flex-direction": "row",    "height": "60px",    "margin-left": "-10px"  },  "children": [    {      "elmType": "span",      "style": {        "margin-left": "3px",        "display": "flex",        "flex-direction": "column",        "justify-content": "center"      },      "children": [        {          "elmType": "span",          "style": {            "padding-top": "0px",            "display": "flex",            "flex-direction": "row"          },          "children": [            {              "elmType": "span",              "style": {                "padding": "6px",                "white-space": "normal",                "font-size": "13.5px",                "font-weight": "400"              },              "txtContent": "@currentField"            },            {              "elmType": "span",              "style": {                "align-content": "right",                "justify-content": "right",                "padding-left": "2px",                "white-space": "normal"              },              "children": [                {                  "elmType": "button",                  "customRowAction": {                    "action": "share"                  },                  "attributes": {                    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",                    "title": "Share Item"                  },                  "style": {                    "padding-top": "4px",                    "border": "none",                    "background-color": "transparent",                    "cursor": "pointer"                  },                  "children": [                    {                      "elmType": "span",                      "style": {                        "align-content": "left",                        "justify-content": "left",                        "padding": "4px",                        "white-space": "normal"                      },                      "attributes": {                        "iconName": "Share",                        "class": "ms-font-l"                      }                    }                  ]                }              ]            }          ]        }      ]    }  ]}

The About column is a multi-line text column and has the below formatting applied.

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",  "elmType": "div",  "style": {    "flex-direction": "row",    "justify-content": "start"  },  "children": [    {      "elmType": "div",      "txtContent": "=substring(@currentField, 0, 70) + '...'",      "style": {        "white-space": "normal",        "padding": "2px 0",        "font-size": "13px",        "margin": "6px 4px 4px -6px"      },      "attributes": {        "class": ""      }    },    {      "elmType": "div",      "attributes": {        "title": "@currentField.description",        "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent  sp-card-content sp-card-highlightedContent",        "iconName": "MoreVertical"      },      "style": {        "margin-top": "1px",        "font-size": "13px",        "padding": "0 4px",        "color": "black",        "pointer-events": "=if (@currentField == '', 'none', 'auto')",        "text-decoration": "=if (@currentField == '', 'none', 'auto')"      },      "customCardProps": {        "openOnEvent": "hover",        "directionalHint": "rightCenter",        "isBeakVisible": true,        "beakStyle": {          "backgroundColor": "#3c3c3c"        },        "formatter": {          "elmType": "div",          "style": {            "color": "white",            "background-color": "#3c3c3c",            "width": "300px",            "padding": "10px"          },          "txtContent": "@currentField"        }      }    }  ]}

The Host column is a Person type column and allows multi selection. It has the below formatting.

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",  "elmType": "div",  "children": [    {      "forEach": "personIterator in @currentField",      "elmType": "div",      "style": {        "border-color": "#0050ca",        "border-style": "solid",        "border-width": "2px",        "width": "30px",        "height": "30px",        "overflow": "hidden",        "border-radius": "50%",        "margin": "2px",        "display": "=if(loopIndex('personIterator') >= 3, 'none', '')"      },      "children": [        {          "elmType": "img",          "attributes": {            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",            "title": "[$personIterator.title]"          },          "style": {            "position": "relative",            "top": "50%",            "left": "50%",            "width": "100%",            "height": "auto",            "margin-left": "-50%",            "margin-top": "-50%",            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') >= 2, 'none', '')",            "vertical-align": "baseline"          }        },        {          "elmType": "div",          "attributes": {            "title": "=join(@currentField.title, ', ')",            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"          },          "style": {            "width": "100%",            "height": "100%",            "text-align": "center",            "line-height": "30px",            "font-size": "14px",            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') == 2, '', 'none')"          },          "children": [            {              "elmType": "span",              "txtContent": "='+' + toString(length(@currentField) - (2))"            }          ]        }      ]    }  ]}

The Day 1 and Day 2 columns are Hyperlink columns and have the below formatting. The time value is stored in the Description field of the Hyperlink field. The “Add to calendar” element holds the URL to the ics file of the event. To generate the URLs I used this amazing blog post by Joao Ferreira.

***Download ICS files from SharePoint calendars - HANDS ON SharePointThe other day while playing with SharePoint modern Events web part with my colleague Francisca Peixoto we realized that…** t.co

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  "elmType": "div",  "style": {    "white-space": "normal",    "flex-wrap": "wrap",    "display": "flex"  },  "children": [    {      "elmType": "div",      "style": {        "width": "135px",        "flex-direction": "column",        "border-color": "#0050ca",        "border-style": "solid",        "border-width": "1px",        "box-sizing": "border-box",        "padding": "4px 8px 5px 8px",        "display": "flex",        "border-radius": "4px",        "height": "100%",        "align-items": "left",        "white-space": "wrap",        "overflow": "hidden",        "margin": "6px 4px 4px -5px"      },      "attributes": {        "class": "ms-bgColor-themePrimary sp-css-borderColor-themePrimary sp-card-borderHighlight sp-card-subContainer"      },      "children": [        {          "elmType": "a",          "attributes": {            "title": "@currentField.description",            "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-content sp-card-highlightedContent",            "href": "@currentField",            "target": "=if (@currentField== '', '', '_blank')"          },          "style": {            "margin-bottom": "6px",            "font-size": "14px",            "padding": "0 4px",            "color": "white",            "pointer-events": "=if (@currentField == '', 'none', 'auto')",            "text-decoration": "=if (@currentField == '', 'none', 'auto')"          },          "txtContent": "=' '+'@currentField.desc'"        },        {          "elmType": "a",          "attributes": {            "title": "@currentField.description",            "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent  sp-card-content sp-card-highlightedContent",            "href": "@currentField",            "target": "=if (@currentField== '', '', '_blank')",            "iconName": "AddEvent"          },          "style": {            "margin-top": "1px",            "font-size": "13px",            "padding": "0 4px",            "color": "white",            "pointer-events": "=if (@currentField == '', 'none', 'auto')",            "text-decoration": "=if (@currentField == '', 'none', 'auto')"          },          "txtContent": " View/save event",          "customCardProps": {            "openOnEvent": "hover",            "directionalHint": "rightCenter",            "isBeakVisible": true,            "beakStyle": {              "backgroundColor": "#3c3c3c"            },            "formatter": {              "elmType": "div",              "style": {                "color": "White",                "background-color": "#3c3c3c",                "width": "100px",                "padding": "10px"              },              "txtContent": "View/add to calendar"            }          }        }      ]    }  ]}

The Join columns are of type Hyperlink and have the below formatting applied. The URLs stored in the Hyperlink fields are URLs to meetings created in Microsoft Teams.

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  "elmType": "div",  "style": {    "flex-wrap": "wrap",    "display": "flex",    "white-space": "normal"  },  "children": [    {      "elmType": "div",      "style": {        "box-sizing": "border-box",        "border-color": "=if(Date('11/17/2021') <= @now + 86400000, '#464775', 'gray'",        "border-style": "solid",        "border-width": "1px",        "background-color": "=if(Date('11/17/2021') <= @now + 86400000, '#464775', 'gray')",        "padding": "4px 8px 5px 8px",        "display": "flex",        "border-radius": "4px",        "height": "50px",        "align-items": "center",        "white-space": "nowrap",        "overflow": "hidden",        "margin": "6px 4px 4px -5px"      },      "attributes": {        "class": "sp-field-borderBottomRegular sp-field-borderBottomSolid sp-css-borderColor-WhiteFont"      },      "children": [        {          "elmType": "span",          "style": {            "font-size": "14px",            "color": "=if(Date('11/17/2021') <= @now + 86400000, 'white', 'black')",            "display": "inline-block",            "padding": "0 6px"          },          "attributes": {            "iconName": "TeamsLogo"          }        },        {          "elmType": "a",          "attributes": {            "title": "@currentField.description",            "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-content sp-card-highlightedContent",            "href": "=if(Date('11/17/2021') <= @now + 86400000, [$Link], ''",            "target": "=if ([$Link] == '', '', '_blank')"          },          "style": {            "font-size": "13px",            "padding": "0 6px",            "color": "=if(Date('11/17/2021') <= @now + 86400000, 'white', '')",            "pointer-events": "=if ([$Link] == '', 'none', 'auto')",            "text-decoration": "=if ([$Link] == '', 'none', 'auto')"          },          "txtContent": "Join",          "customCardProps": {            "openOnEvent": "hover",            "directionalHint": "rightCenter",            "isBeakVisible": true,            "beakStyle": {              "backgroundColor": "#3c3c3c"            },            "formatter": {              "elmType": "div",              "style": {                "color": "white",                "background-color": "#3c3c3c",                "width": "100px",                "padding": "10px"              },              "txtContent": "=if(Date('11/17/2021') <= @now + 86400000, 'Join the session', 'Check back on the 17th'"            }          }        }      ]    }  ]}

The Session tracks column is a Single line text column with below formatting applied.

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  "elmType": "div",  "style": {    "flex-wrap": "wrap",    "display": "flex"  },  "children": [    {      "elmType": "div",      "style": {        "width": "135px",        "box-sizing": "border-box",        "padding": "4px 8px 5px 8px",        "display": "flex",        "border-radius": "4px",        "height": "50px",        "align-items": "center",        "white-space": "nowrap",        "overflow": "hidden",        "margin": "6px 4px 4px -12px"      },      "attributes": {        "class": {          "operator": ":",          "operands": [            {              "operator": "==",              "operands": [                "[$Sessiontrack]",                "Keynote"              ]            },            "sp-css-backgroundColor-BgWhite sp-field-borderBottomRegular sp-field-borderBottomSolid sp-css-borderColor-WhiteFont",            {              "operator": ":",              "operands": [                {                  "operator": "==",                  "operands": [                    "[$Sessiontrack]",                    "Product Roundtables"                  ]                },                "sp-css-backgroundColor-BgDarkWhite sp-field-borderBottomRegular sp-field-borderBottomSolid sp-css-borderColor-WhiteFont",                {                  "operator": ":",                  "operands": [                    {                      "operator": "==",                      "operands": [                        "[$Sessiontrack]",                        "Breakout"                      ]                    },                    "sp-css-backgroundColor-BgWhite sp-field-borderBottomRegular sp-field-borderBottomSolid sp-css-borderColor-WhiteFont",                    {                      "operator": ":",                      "operands": [                        {                          "operator": "==",                          "operands": [                            "[$Sessiontrack]",                            ""                          ]                        },                        "",                        ""                      ]                    }                  ]                }              ]            }          ]        }      },      "children": [        {          "elmType": "span",          "style": {            "white-space": "normal",            "overflow": "hidden",            "text-overflow": "ellipsis",            "padding": "0 3px"          },          "txtContent": "[$Sessiontrack]",          "attributes": {            "class": {              "operator": ":",              "operands": [                {                  "operator": "==",                  "operands": [                    "[$Sessiontrack]",                    "Keynote"                  ]                },                "sp-field-fontSizeSmall sp-css-color-BlackFont",                {                  "operator": ":",                  "operands": [                    {                      "operator": "==",                      "operands": [                        "[$Sessiontrack]",                        "Product Roundtables"                      ]                    },                    "sp-field-fontSizeSmall sp-css-color-BlackFont",                    {                      "operator": ":",                      "operands": [                        {                          "operator": "==",                          "operands": [                            "[$Sessiontrack]",                            "Breakout"                          ]                        },                        "sp-field-fontSizeSmall sp-css-color-BlackFont",                        {                          "operator": ":",                          "operands": [                            {                              "operator": "==",                              "operands": [                                "[$Sessiontrack]",                                ""                              ]                            },                            "",                            ""                          ]                        }                      ]                    }                  ]                }              ]            }          }        }      ]    }  ]}

Now that the formatting is done, the list is embedded on the event page. Select the view to be shown, hide the command bar and Apply. We will cover the Dynamic filterning in the next section.

Optional: a SharePoint list to store session tracks information: After I made the twitter post, I added a support list in my site to help users filter down the sessions by tracks. This list is what is used to dynamically filter the sessions list as you see in the image above. So, when the user selects the track in the Tracks list, they will see sessions listed under the selected track in the Sessions list.

The Tracks list has two columns, the default Title column and an About column, which is a multi-line text column.

I have used JSON formatting of the view on this list. Create a view for the list and apply the below JSON under “Format view”

View format JSON:

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",  "height": 105,  "width": 310,  "hideSelection": false,  "fillHorizontally": false,  "formatter": {    "elmType": "div",    "attributes": {      "class": "sp-row-card sp-card-borderHighlight"    },    "style": {      "width": "310px",      "height": "105px",      "border-color": "=if([$Title] =='Keynote', '#0fc373', if([$Title] =='Product Roundtables', '#ff8c0a',  if([$Title] =='Breakout', '#af78d2' '#0082f0')))",      "border-style": "solid",      "border-width": "2.5px",      "border-radius": "4px",      "background-color": "white",      "white-space": "normal",      "padding": "4px 4px 4px 4px",      "font-size": "13px",      "flex-direction": "column"    },    "children": [      {        "elmType": "div",        "attributes": {          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-subContainer"        },        "children": [          {            "elmType": "div",            "attributes": {              "class": "sp-card-displayColumnContainer"            },            "children": [              {                "elmType": "div",                "style": {                  "background-color": "white",                  "white-space": "normal",                  "padding": "4px 4px 4px 4px",                  "font-size": "17px",                  "font-weight": "600"                },                "attributes": {                  "title": "[$Title]",                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"                },                "txtContent": "=if ([$Title] == '', '–', [$Title])"              }            ]          },          {            "elmType": "div",            "style": {              "background-color": "white",              "white-space": "normal",              "padding": "0px 4px 4px 4px",              "font-size": "14px"            },            "attributes": {              "class": "sp-card-lastTextColumnContainer"            },            "children": [              {                "elmType": "p",                "attributes": {                  "title": "[$About]",                  "class": "ms-fontColor-neutralPrimary sp-card-content "                },                "txtContent": "=if ([$About] == '', '–', [$About])"              }            ]          }        ]      }    ]  }}

Next, on the event page, embed the Tracks list between the Spaces and Sessions list web parts.

With the Tracks list now embedded, we can now look at the Dynamic filtering of the Sessions list. Connect the two lists as show in the image illustration below and save the page.

a SharePoint list to store people information: For every event there are people behind it and I have used a third list to show this information. The reason I chose a list instead of the native people web part is, in the available space on page, I can show 5 people in one row using the list as opposed to 3 people with the people web part. I also get additional control with lists in terms of formatting and what information of the people is shown.

The peope list has two columns, the default Title column and a Person column.

Create a view for the list and apply the below JSON under “Format view”

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",  "height": 76,  "width": 254,  "hideSelection": false,  "fillHorizontally": true,  "formatter": {    "elmType": "div",    "attributes": {      "class": "sp-card-container"    },    "children": [      {        "elmType": "button",        "attributes": {          "class": "sp-card-defaultClickButton",          "role": "presentation"        },        "customRowAction": {          "action": "defaultClick"        }      },      {        "elmType": "div",        "attributes": {          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"        },        "children": [          {            "elmType": "div",            "attributes": {              "class": "sp-card-previewColumnContainer"            },            "children": [              {                "elmType": "div",                "style": {                  "display": "flex"                },                "children": [                  {                    "elmType": "p",                    "attributes": {                      "class": "sp-card-userEmptyText"                    },                    "txtContent": "=if(length([$Member]) == 0, '–', '')"                  },                  {                    "forEach": "personIterator in [$Member]",                    "elmType": "a",                    "attributes": {                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"                    },                    "style": {                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"                    },                    "children": [                      {                        "elmType": "img",                        "defaultHoverField": "[$personIterator]",                        "attributes": {                          "src": "=getUserImage([$personIterator.email], 'S')",                          "title": "[$personIterator.title]",                          "class": "sp-card-userThumbnail"                        },                        "style": {                          "display": "=if(length([$Member]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"                        }                      },                      {                        "elmType": "div",                        "attributes": {                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"                        },                        "style": {                          "display": "=if(length([$Member]) > 5 && loopIndex('personIterator') == 4, '', 'none')"                        },                        "customCardProps": {                          "formatter": {                            "elmType": "div",                            "attributes": {                              "class": "sp-card-personCallout"                            },                            "children": [                              {                                "forEach": "personIterator in [$Member]",                                "elmType": "div",                                "attributes": {                                  "class": "sp-card-userContainer sp-card-userCustomCard"                                },                                "style": {                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"                                },                                "children": [                                  {                                    "elmType": "img",                                    "defaultHoverField": "[$personIterator]",                                    "attributes": {                                      "src": "=getUserImage([$personIterator.email], 'S')",                                      "title": "[$personIterator.title]",                                      "class": "sp-card-userThumbnail"                                    }                                  }                                ]                              }                            ]                          },                          "openOnEvent": "hover"                        },                        "children": [                          {                            "elmType": "span",                            "txtContent": "='+' + toString(length([$Member]) - (4))"                          }                        ]                      }                    ]                  },                  {                    "elmType": "div",                    "attributes": {                      "class": "sp-card-userTitle"                    },                    "style": {                      "display": "=if(length([$Member]) == 1, '', 'none')"                    },                    "defaultHoverField": "[$personIterator]",                    "txtContent": "[$Member.title]"                  }                ]              }            ]          }        ]      }    ]  }}

The result is a formatted people web part. Another good thing about this it also lets the users hover/click on the people to get their office profile information.

Other web parts in the vertical section on the right-hand-side.

Countdown timer: In the vertical section I thought it would be useful to have the countdown timer web part with a coutdown towards the event date.

About web part: I used the fourth list web part to show “what”, “when”, “where”, “who” of the event.

{  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",  "height": 350,  "width": 300,  "hideSelection": true,  "fillHorizontally": true,  "formatter": {    "elmType": "div",    "attributes": {      "class": "sp-row-card"    },    "children": [      {        "elmType": "div",        "attributes": {},        "customRowAction": {}      },      {        "elmType": "div",        "attributes": {          "class": "ms-bgColor-white sp-card-subContainer"        },        "children": [          {            "elmType": "div",            "style": {              "background-color": "white",              "font-size": "15px"            },            "attributes": {              "class": "sp-card-displayColumnContainer"            },            "children": [              {                "elmType": "span",                "children": [                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "attributes": {                      "class": "ms-fontColor-neutralSecondary sp-card-label",                      "iconName": "Info"                    }                  },                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "txtContent": "[!Title.DisplayName]"                  }                ]              },              {                "elmType": "p",                "style": {                  "background-color": "white",                  "white-space": "normal",                  "padding": "0px 0px 10px 28px",                  "font-size": "15px"                },                "attributes": {                  "title": "[$Title]",                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",                  "role": "heading",                  "aria-level": "3"                },                "txtContent": "=if ([$Title] == '', '–', [$Title])"              }            ]          },          {            "elmType": "div",            "style": {              "background-color": "white",              "font-size": "15px"            },            "attributes": {              "class": "sp-card-displayColumnContainer"            },            "children": [              {                "elmType": "span",                "children": [                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "attributes": {                      "class": "ms-fontColor-neutralSecondary sp-card-label",                      "iconName": "Event"                    }                  },                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "txtContent": "[!When.DisplayName]"                  }                ]              },              {                "elmType": "p",                "style": {                  "background-color": "white",                  "white-space": "normal",                  "padding": "0px 0px 10px 28px",                  "font-size": "15px"                },                "attributes": {                  "title": "[$Title]",                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",                  "role": "heading",                  "aria-level": "3"                },                "txtContent": "=if ([$When] == '', '–', [$When])"              }            ]          },          {            "elmType": "div",            "style": {              "background-color": "white",              "font-size": "15px"            },            "attributes": {              "class": "sp-card-displayColumnContainer"            },            "children": [              {                "elmType": "span",                "children": [                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "attributes": {                      "class": "ms-fontColor-neutralSecondary sp-card-label",                      "iconName": "TeamsLogo"                    }                  },                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "txtContent": "[!Where.DisplayName]"                  }                ]              },              {                "elmType": "p",                "style": {                  "background-color": "white",                  "white-space": "normal",                  "padding": "0px 0px 10px 28px",                  "font-size": "15px"                },                "attributes": {                  "title": "[$Title]",                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",                  "role": "heading",                  "aria-level": "3"                },                "txtContent": "=if ([$Where] == '', '–', [$Where])"              }            ]          },          {            "elmType": "div",            "style": {              "background-color": "white",              "font-size": "15px"            },            "attributes": {              "class": "sp-row-cardr"            },            "children": [              {                "elmType": "span",                "children": [                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "attributes": {                      "class": "ms-fontColor-neutralSecondary sp-card-label",                      "iconName": "Group"                    }                  },                  {                    "elmType": "span",                    "style": {                      "display": "inline-block",                      "background-color": "white",                      "white-space": "normal",                      "padding": "0 4px",                      "font-size": "15px"                    },                    "txtContent": "[!Who.DisplayName]"                  }                ]              },              {                "elmType": "p",                "style": {                  "background-color": "white",                  "white-space": "normal",                  "padding": "0px 0px 10px 28px",                  "font-size": "15px"                },                "attributes": {                  "title": "[$Title]",                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",                  "role": "heading",                  "aria-level": "3"                },                "txtContent": "=if ([$Who] == '', '–', [$Who])"              }            ]          }        ]      }    ]  }}

Related events web part: I am thinking I will change this to Related news instead.

Yammer web part: Users can join conversations around the event directly from the event page. For this I used the Yammer web part and used the classic version as it fits the available space on the vertical column.

Finally, towards the end of the event page, I added a Microsoft Forms link to collect a Net promoter score feedback question, and this would help me understand how users feedback the event.

The result is an event page made with SharePoint, and enhanced by SharePoint Spaces, Formatted Lists, and other web parts. I am pleased with this and believe SharePoint offers some amazing opportunities to create pages that can meet business needs.

Hope you found the information in this post useful.

See More Posts

chatbot-component-powerapps-using-power-virtual-agent

Anand

Link-in-bio profile cards in SharePoint lists

Anand

Create a quiz with Microsoft Lists

Anand

Find me here