DEMO - Implement in meeting experience with a side panel

Key Takeaways

now that we've done our end meeting or our pre-meeting experience here let's now implement our end meeting experience so meeting apps with for teams can implement the side panel experience for some rich user interaction and the side panel is going to occupy the same space where the meeting participant is in the the participant list is displayed and the chat is displayed so you can use this area to provide a user specific experience during the meeting that's specifically related to your app so now let's update the meeting app to display a different experience during the end meeting with the side panel so what i'm going to do is go back to our tab that we have here and before we update the media experience i want to add some additional code to our existing uh right before or right after our uh toggling the stop the stand up topic status so that is right here so let's go ahead and add uh this code in now what this code is going to do is it's going to toggle the status of the topic to indicate if it's been presented or not we're going to use that during our our end meeting experience now the next thing we'll do is we're going to add in a utility function to create our end meeting experience so we've already got this pre-meeting experience set up so let's go down we don't need to we don't need to use this one right now let's go and let's add a new one here all right so what is this code going to do this code is going to take a look at all the topics and what it's going to do is i only want to show the topics that have been approved to the current user if they're an attendee but if they're an administrator or the organizer of the meeting then i want them to see all the topics so in this case here if they're the organizer then give them all the approved topics otherwise only give them the approved topics that they were the specified presenter of and then i'm simply going to sort those topics out now we're going to implement the user experience so i'm going to do that by just pasting in some code and what this is going to do is it's going to create a list of cards and each one of those cards is just going to display the the different topics um it's also going to have a control on it um to uh toggle control to indicate if the meeting topic has been presented uh or not so the last thing that we're gonna end up doing here is i need to go through and implement our user experience for the side panel so what i'm going to do is go a little bit farther down and right here in our context or in our frame context we're going to check to see if we are currently in a in the side panel experience and if we are we want to display our side panel experience so i'll go ahead and save that change and because i didn't restart my web server or the ingrock serve it's going through and rebuilding our project so i'm going to go and let that finish before we go back and take a look at our meeting all right now that our app is running let's go back over here to our app into the let's go back into the meeting and this time we're going to join the meeting now the reason we're going to join the meeting is because we have to we have to um be able to join the meeting and be in an active meeting in order to be able to see our meeting app so here's our app that's been installed showing right up here in this tool in the toolbar and when i select this we can see our tab is going to go ahead and load and here we can see we've got all of our different um topics that have been approved you've got the alex uh wilbur tab uh the the um feature charlie review by alex wilbur you've got another one from megan and another one from megan as well one of the things i can also do is i can come over here and i can select one of these different uh toggles and this will show that all of these different topics have been presented or let's go ahead and let's just toggle a couple of them on and off so now what you can see is we've now created our a conditional experience in our pre-meeting experience that the meeting organizer can see with some additional controls to approve some of these topics and then we also have our stand-up agenda um is showing in the side panel uh as a different tab um as well we can still see even once we leave our meeting as well uh i can still see that the um the pre-meeting experience is still there right we haven't changed that we'll see how to do that in a new demo