Microsoft 365 Community SharePoint, 25 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create an event page in SharePoint with SharePoint Spaces and custom Lists

Description

In this 13-minute developer focused demo, let Anand Ragav show you how Spaces, 4 lists, a timer web part and a quick links web part for UI supported by an Events list in the backend are blended to create a sharp Event page in SharePoint. Step through the Spaces embed, column formatting, list and list view set up for Sessions, Tracks, People and About Event. Informational pop ups, event filtering, registration and more. . This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 25, 2021.

Demo Presenter: Anand Ragav | @anandVragav

Supporting materials:
• Article - Create an event page with SharePoint, SharePoint Spaces and formatted Lists | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/create-an-event-page-with-sharepoint-sharepoint-spaces-and/ba-p/2994438

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hi everyone, I am anand an I.t consultant working with sharepoint and the power platform uh in the recent months. I have become an active community contributor thanks to some inspiring community members, some of whom are in the meeting today. I'm excited to be joined. The call today and present to you all an event page created in sharepoint using spaces and formatted lists.

A

The solution itself involves blending spaces lists a timer web part and a quick links web part for the user interface supported by an events web list that works in the background. So, first of all, what I'd like you to do is show you the event page itself in action and then dive into the backend setup.

A

So with that, I will dive into the demo here, and that is here. So what you see here is my event page, uh and that is uh it's actually uh the content and the data that you see here is all some sample data that I pulled together from my dev client. uh The event itself is a it's called hybrid in this case.

A

It's a two day event focusing on the future of work and what you see on this event page is, first of all, a header that I put in here with some introductory text text and then followed by the sharepoint space embedded web part.

A

So basically, what I've done is created a space within this site uh and then embedded that in in here using the embed web part- and you will see here it loads in a sort of idle state and then only upon the user clicking that in uh web part will it then actually no, and that was actually a performance tip that I got actually from the microsoft spaces team.

A

So now, within this space, uh the users are graded, with a welcome message, of course, and then there is a an introductory video as well that they can click and watch and pull it up close if they wanted to, and then they can click and drag to look at the different components that are in the in the space.

A

We have a sharepoint icon here, which takes the user to uh the the learning and training content that we've uh curated here that are related to this event, and the teams is where we are running the event using live events and a yammer community, where people can collaborate and take part in the conversation about the event. So that's the 360 or 3d space within the sharepoint event page and on the right hand, side. You see a timer web part that basically tells the visitors uh they have.

A

The event is in six days they can sign up for sessions and uh right below beneath that I have used um a list actually and that uh shows up some key dates and important information about the. What when, where and who about the event, if I further scroll down here, it comes to sessions list which is a custom json formatted list.

A

I've used column formatting for this list. So it has these columns here. There's a session column which tells the title of the event. People can read up about the title. They can then go here and click on the more icon here and comes the pop-up message with the uh full text there.

A

The host information is available here and then a couple of hyperlink columns for the two-day event itself, so they can see what times uh which sessions are on which times and then they can click open this to then open the actual event and then add it to their calendars, or they can simply join the meeting directly from here and that sends them to the microsoft teams live event link.

A

Finally, there is a session track column here, which tells them which track each session belongs to and that I also have a complimentary or a helper list, which is view formatted, and that uh with with which users can then filter down uh the long list of sessions by tracks, and then they can take a look at all of the all of that.

A

From here and you'll see these colored codes, I've used a border color here that matches with the track border color, so that tells a visual connection between the tracks and the list session sessions in the list.

A

Further down on the event page is the the team information that is, the people that are behind the event um and hovering over the cards will open up the profile cards and people can uh contact the team. Finally, on the page is a rate. The event um forms um a survey link um linked using the quick links web part and that takes the users to create the event page. So that is the event page.

A

uh So what I'd like to do next is show you a quick uh page design and the code itself behind the scenes, so I'm going to go there all right so, starting off with the space itself, the space is created on the same site. Like I mentioned, and I have used some text web parts here, a video web part.

A

The video is stored in the document library within the same site, and I've used some logo icons uh with some transparency background setting uh within the space to to sort of nicely blend that into the space uh and the even uh the space itself is embedded on the event page like I mentioned, uh and the other thing is like you might wonder why I went to this space and why not a hero or a highlighted content web part.

A

uh A couple of reasons one is uh I could I am I'm able to pack more content uh within this space without really taking too much real estate on the page itself, because I'm using the embed web part and then and then the other thing is as much as possible.

A

I'd like to keep the users on the event page without them having to leave the page to go and access the content, because I can put in videos and the other embed parts within the space and that loads up within that event, page itself and I've used this embed code to put in the put in the uh space inside the um inside the page.

A

So that's the uh space uh moving on so I'll talk about the lists that I uh have on the on the event page. So the first list is the sessions list. Here I have these column sessions. A single line text column about is a multiple person, column, sorry multi-line column. A host is a multiple person column.

A

I have four hyperlink columns, which I showed two of them for the event links and two of them for the join links for the microsoft teams, live events and a session track, which is a single line text so in terms of the the back end setup. uh So what I've done is uh column formatting for each of these columns. So let's take a look at them.

A

The session column is a single line text and I have a div element type here with styling uh to only show the left hand, side border and the border radius is set to 4px to basically get that curved edge. Look and the borders are colored based on the track they belong to, like I was showing earlier. The session name is then rendered by a span. L type and I've also used a share button. Here, with the with the custom row, action property set to action type share.

A

This then brings up the default share, pop-up window when clicked and then users can copy the link or send to email with the appropriate, appropriate permission settings so moving on to the the second column, which is the about column, this is a multi-line text column, and here I have two div elements: wrapped inside a pair and div, and the first child div renders the text in the field but restricts that to 70 characters and the second child renders the more icon and and when the icon is hovered, it shows the full text in a pop-out window.

A

So that's the about column and then the host column and the third one is a multi-person column which is basically and actually an out of the box field in lists. So for each person in the list item it is rendered a div element which contains two developments: the first development to show the person's image.

A

If the index value of the person in the array is less than or equal to, two and a second div to basically show all person's name separated by comma, and this div also contains a span to show the number of remaining people in the person column. So we only show pictures for the first two and the others we just show a plus two plus one and so on, depending on the number of people that are in the list item uh the next one I have is the event day columns.

A

These are two columns, hyperlink columns and one for each day of the event and basically apply the same formatting for both of them.

A

Here, I'm rendering two l type a's one showing the time of the event, and this is basically a simple text that I have just put a text string that I've put in the description field of the hyperlink and the other one to let the user view or save the even to their calendar, and that is basically hedge driving the uh the fee.

A

The current field itself, and that is picking up the hyperlink, the url that I've stored in the hyperlink field, so that is the um even day column, and I also have this call to action pop out again using custom car props uh on the on the field.

A

Next, I have the adjoin day columns which are again two hyper link columns, uh one for each day, again same formatting, applied to these two as well, so within a dividend type.

A

I have a span for showing the team's logo and then an l type a to show to h of the team's live event, and I also have the same custom card props to for the hover text, for the call to action and for the last column there session track, I haven't really uh put in any formatting, but it's just a simple single line text at the end of it. This is how the session uh sessions list looks.

A

So I did some uh column width adjustments as well and saved that to the view so that it stays the same with the same dimensions in the page when embedded and I've embedded using the the list web part on the page and then I've also hidden the command bar and all the see all options.

A

The second list is the next one, and that is the the tracks list. This, uh like I was showing this was this. Is this acts as a helper list allows users to um filter the sessions by tracks, and this is how I've connected them, editing the sessions list and then specifying uh using the dynamic filtering on the sessions list and then choosing the tracks list for the filter.

A

So for the tracks list itself, I've used view formatting. It has two columns, basically the title and the about column. The title is the single line about is the multi-line.

A

Both of them are rendered by two div elements inside a inside, an sap hp row card class, because I wanted that boxed card view, and then I also set a sorry border styling so that the color matches the tracks colors in the sessions list. So users can see a color code, sync between the two sort of acting like a color legend. If you will, then I have the people list, which is my third list and on the event page and basically to show uh all the people involved.

A

In the event um I mean the reason I went with the list instead of the the standard out of the box. People web part is because one reason I get more flexibility with this. The list, because I can customize it and the other thing is.

A

I can fit in, let's say five columns where in that, in that column layout the section layout. Whereas if I went with the out of the box people web part, I could only fit in four, but I wanted to fit in five columns. So that was one of the reasons I did that uh the people web part itself is uh it's. It's actually out of the it's actually out of the box tile view uh simply stripped down to just show the person's image and the name uh with a hover profile card.

A

I haven't really done much formatting on that one. The the the list four and the final one here is the. What when, where and who of the event uh that basically shows uh some key information about the event and like a quick summary at the very top. These are four columns um and then uh are.

A

Each of them are rendered by a span which has the icon on the and the field, names that are rendered by span element types and then the text content itself is rendered by a pl type, so it kind of sits beneath the the title there.

A

So um this is the final result, the even page using sharepoint spaces and formatted lists to design the user experience and what I'm looking at the future of the event page after the event, I'd like to transform the event page itself into a sessions, video recordings portal- that is all sessions that are happening in the event uh will which are which will be recorded.

A

Of course, will then be later published on the same event page and then I'm planning to use this um json formatted sharepoint document library, uh with a nice card view with a lot of rich information and action, buttons call to action buttons appearing there on the cards, that's how the page will transform into after the event.

A

So that brings me to the end of my presentation. So thank you so much for listening. uh Here's all the sample code. uh I actually put it out there in the community blog thanks to all the viewers to to have it published. I think it went out a couple days ago. Everything that I showed in terms of the demo. The code is in that in that blog post, so you can scan that with the qr code. So thank you and uh over to you dave.

B

Awesome very, very cool stuff that really looks clean and slick uh excellent job uh thanks for sharing it with us and nice. Nice work.