Microsoft 365 Community SharePoint, 22 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Viva Connections ACE for public holidays

Description

In this 14-minute developer-focused demo, Nanddeep Nachan and Ravi Kulkarni deliver a thorough UX and code walkthrough on an Adaptive Card Extension (ACE) with a card view and multiple quick views to display the public holidays for user based on their detected or selected office location. Uses an ACE component type and ImageCard template in SharePoint Framework (SPFx) v1.15.0. Relies on a SharePoint list with simple schema (title, location, date, image) in back-end. See upcoming holidays in Quick view. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 22, 2022.

Demo Presenters
• Nanddeep Nachan | @NanddeepNachan
• Ravi Kulkarni (Microsoft) | @RaviKul16a87

Supporting material
• Sample – Public Holidays | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-PublicHolidays

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Foreign, it is great to be here presenting our sample on Microsoft Viva connections, adaptive card showcasing public holidays, so holidays are the most exciting part of our life and out of this excitement at least I keep close eye on the public holidays, although they don't keep changing at a regular basis, but hopefully placing this card on your Viva connection. Dashboard will help you ensure well-being of your employees right.

A

So, on the author front, uh myself, I am Microsoft MVP for M365 apps and services and I am privileged to have this sample developed along with my colleagues Harvey Kulkarni, who is a consultant at Microsoft and have joined us today with me for this presentation and Smith Anderson, who is Microsoft MVP for M365 Development, Area and here are our social media handles to get in touch with us for any later discussions so showcasing these public holidays as a Viva card was quite a common ask that we three came across during our discussions with our customers and colleagues.

A

So we took this opportunity to build one and then worked on it or a weekend project to make it available under the PNP repo, which is now self-serving. All of us all right. So as a summary for this, this sample shows how to build an ace with card View and multiple quick views to display the public holidays for employees based on their office location. At the same time, employees can also use this solution to update their office location as well.

A

So while we are adopting to Microsoft Viva connections to create some kind of an engaging digital employee experience, having this kind of a card built for them to show the upcoming public holidays will add, definitely some more value to their well-being.

A

So, for this public holidays the we built that using an S component type in SharePoint framework, which enables developers to build Rich kind of an experiences for Viva connection dashboard as well as SharePoint pages, and then we decide to create a solution. We get at least choices to create the card, probably with the basic card template image card template or a primary text template each of those have different capabilities to render the content, and this particular solution is developed with image card template because it is managing the primary text.

A

Title and image configuration better for displaying the holidays. So, specifically talking about this solution, it displays current logged in users, public holidays in card view based on their office location and with the action button on the card. It helps employees to browse the quick view which showcase all of the public holidays for their location and also from there.

A

They will be able to update the office location, so this sample is developed with spfx version 1.15.0 and it is available to download and use under the plps sample repository at the URL, which is which is mentioned on the screen. If you can scroll for a week correct. Thank you. So let us come to the implementation side of you, so this solution is backed up by the SharePoint list, which needs to be present on your SharePoint home site. So this list has some simple schema to store location, wise list of public holidays.

A

So, firstly, we have a title which is out of the box column, which presents the public holiday title. Second column is more important. The office location, so this office location is a choice field to present the locations where holiday applies to because one holiday can be applied to multiple locations. So that's the reason we have this created as a choice field, so this should be mapped from the property pane with the user profile field in the Azure ready, which contains the user location.

A

So it could be office location as in our case or even it could be CTE country or whatever property. You want to map that with. Then we have a date column which presents the date of that public holiday when it falls to, and then we have an optional image column which is used to upload image, which is related to the public holiday, and if in case, you don't specify any image, a generic image which is stored in the assets folder of the solution will be displayed in a quick view.

A

So on the property pin, we have a few things like card title which which can be shown up and then that user profile property to use with it is a major one.

A

So you need to just map that to the Azure ad profile, property of the user and from there it will be able to fetch everything based on your user location and then obviously you will have to choose the list where which will display from where the holidays are coming through, and then that was quick and with that I will hand it over to my colleague Ravi to walk us through the demo and the core part uh over to you.

B

Thank you. That was the good introduction about the card. uh Now, let's see how it works, so we have created a simple list that will store all information about the holidays across the different office location. This list contains four columns the title of the holiday. Then we have office location column, which is a multi-choice column and we support multiple locations.

B

Then we have date of the holiday and the optional column image for the holiday. Now, let's quickly see how the card works so, basically to set this card up, we have to set up few properties in the property. Pin. Let me edit this web part.

B

So the very first property which we have to set is the here we have to provide the user profile property which is used to store the user location in your organization on my tenant. We are using office, location and then the next property which we have to set is the list which we have designed to store the holidays and in case, if you select the wrong list, we have designed a record to show you the error and the detail. Error will be logged into the console, and then we have the last property.

B

uh You can restrict your web part to show already still a particular date using this field, for example, if you want to restrict it to this year, I will simply select 31st December from the calendar.

B

Now let me uh save this and let me preview it so currently, my user profile property is set to India location. Hence it will show me the next upcoming holiday on the card view.

B

For my location, this is a default card view which is uh which will be available on the dashboard, and we have provided a card button here like upcoming holidays, and that will open the quick view and that will show next upcoming holidays at my location and in the quick view, I can see that my location is set to India and these are the next upcoming holidays at my location.

B

Also, we have provided here a update, location button action button and this will provide you a drop down to select from the available location and these available location. We are querying from the from our holiday list so suppose, if I want to change my location to Australia and if I click on update the location has been successfully updated, uh this message we are getting and then, if I click on the close now you can see that the default card view has been updated to the Australian holiday and if I click again on the upcoming holidays.

B

Now it will show me the next upcoming holidays in the Australia location and similarly, I can again update my location to do some different location as well.

B

So that was pretty much about the card and let me quickly jump on to the code view. Okay, so this sample is developed using spfx version 1.15.0, and we have used three packages. Pnpsp is used to interact with the SharePoint data. Then we have spfx property controls which used to show the list speaker in the property pane, and then we have the moment to interact with the dates.

B

We have also designed a service that will help us to interact with the SharePoint data and to get and update the user profile property. So, firstly, in this service we are setting up the context and the very next method is to get the office location based on the current user profile property.

B

And here we have used Ms graph, client V3, which is part of the SP HTTP package and then similarly, the next method is used to update the particular office location with the new location which we have using in our quick view, then the next meter is to get the upcoming public holidays based on the current user location and if I have provided any limit to date in in my property pin, it will get me the filters uh public holidays and the very last method is to get the available location.

B

This is to get the filtered available location from the holiday list that we are showing in the in the quick view when we are actually updating our location. So moving on to the main TS file, we have declared some State variables over here, but the important ones are the available locations which are the filter available location from the holiday list.

B

Then we have office, location, restores the current user office location and then these are some of the Boolean values which we are interacting in into the our code, and then we have upcoming holidays. This will basically store all the upcoming holidays for the current user location.

B

Then we have uh set up some views, uh so there are uh the default view. Is the card View and we have three card views over there and then we have three quick, four quick quiz which we have registered over here. So the very first uh default view, which we see is the card View, and then we have error card, View and setup card view, which are the supporting views for the card View and related to quick view.

B

We have the the quick view here and then we have supporting views which are loading, views, error, views and success view which are supporting this loading, uh which are supporting this quick review.

B

Then we are setting up our service with the current context, and if the user has not pick up the list title, then we are actually showing him. The card view setup ID uh view, basically, which tells him that you need to set up your weapon property paid first, and then you will be able to see the card.

B

If all goes well, then we are calling this load card info method over here, which is basically querying our service with the current user location and the profile property, and it's getting all the available location as well and the upcoming holidays, and it is finally into our state.

B

If all goes well, then we are showing the default card view onto the dashboard else. If there are any errors, we are actually showing the error card View.

B

So next thing is to we are actually rendering the card view. Race So default card view over here, and then we have a method over here, which is on property, plane, field change which actually, when, whenever you make any changes in your property pane, this will be triggered and it will automatically load the refreshed card info on your dashboard.

B

Then we have the cardview.ts file. Basically, this is this: file represent this card block actually, and the very first method is the get data method which fetches the latest upcoming holidays from our state variable and displays the very first holiday on cover card, and then we have the card buttons over here. So we have created one card button that is upcoming holidays and when you click on it, it will simply load the quickview registry ID.

B

That is our quick view, and then we have the last method, which is on card selection, which will basically navigate to the upcoming holidays list. When you click on this card.

B

Moving on to the cricut.ts file, so this quickview.ts file will represent the next upcoming holidays view. So this is the quickview.ts file and basically into into this file, we are actually getting the data again and we are setting up this state with the next upcoming holidays and again, if everything goes well, then we are just displaying them in one by one. If something went wrong, then we have the supporting error, view quick view which we are displaying over there, and then we have on action button over here.

B

So this is basically triggered when you have selected any location and you click on update. Then this basically will call our service and it will update the user's new location, and this quick review is based on the Adaptive card, which means quickly, template.json and based on the state variables. We are leveraging the state variables to set the values over here and we have few action card as well here action.stroker and then we have the action.subset, which is the submit button and when clicked on it, this method will be triggered.

B

So that's pretty much from the core part and the demo part. uh So, thank you very much for the opportunity to have us here to present our sample and please do reach out to us in case of any queries, to see this social media handlers. Thank.

C

You thank you very much. Absolutely fantastic demo really love that it's generated tons of uh chat as well around locations, uh so it's definitely something that people are really interested in so uh fantastic. Thank you very much for that.