Microsoft 365 Community Community Demos, 19 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Office Locations Viva Connections Adaptive Card Extension with SPFx

Description

In this 20-minute developer-focused demo, Anoop Tatti acclimates viewers to his Office locations ACE starting in the property pane. See configuring this ACE with multiple card views showing details of geographically distributed offices for an organization. Key solution properties: Multiple data sources (local properties, taxonomy, or SharePoint list), Bing and Google for maps, PnP JS v3, OpenWeather API to get weather, Temporal API to get local time, Geolocation action type and Caching. Uses new Show location action. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 19, 2022.

Demo Presenter
• Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials
• Sample - Office locations | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-OfficeLocations
• Demo - Getting started on building Microsoft Viva Connection adaptive card components using SPFx – Patrick Rodgers (Microsoft) | @mediocrebowler | https://www.youtube.com/watch?v=KQGsY5fvLaY
• Ignite session - Get started with Microsoft Viva Connections Extensibility | aka.ms/CONLL112
• YouTube Channel - PiaSys Tech Bites | https://www.youtube.com/c/PiaSysTechBites
• Documentation - Location capabilities in Adaptive Card Extension | https://docs.microsoft.com/sharepoint/dev/spfx/viva/get-started/actions/geolocation/geolocationdocumentation
• Overview - JavaScript Temporal API Cheatsheet | https://temporal-api-cheatsheet.rodneylab.com/

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/m365pn

A

Hello, everyone and welcome to this demo on adaptive card extensions, in particular uh the office locations, adapter card extension right. uh My name is microsoft, mvp and the developer at a company called content plus cloud in london, united kingdom. I write blogs on a platform called medium under the username uno. T I'm on twitter, under the username on hotels and getting my github username is another. You can follow me on those platforms if needed.

A

Okay, let's start with the demo, we were connections and yes, uh not. That is an oop. It's not tennis season. Yet we will get there soon, but let's go to the actual demo right. So uh here I am in my dev tenant in the home site in the dashboard page.

A

So what I'll do is I'll go ahead and edit this dashboard and add the card which is called as office locations and if I just go to edit the properties I'll set it to large, and then it says there is some setup that is needed in order for the adapter card to render so, let's start uh adding those values, so um so car title will find with that card.

A

Icon will leave it empty and then the image to show on the card I'll just pick a random image from the web and we'll see that soon and then there is a property to say, show quick view as list we'll set that to know, and then the next thing it asks is the data source. So basically, this adapter card extension shows all the different offices that are present in our in our tenant or in our company.

A

uh So these offices are might be stored in different places. um So that's what we are looking at here, so it is asking. Where are the offices stored yeah? So let's pick the data sources local. uh So once we pick that it says we need to manage uh the 38 or four offices, so we are using here a nice uh pnp, uh reusable uh control, uh so it asks the details for the office. So here we are saying that we are going to provide the data locally.

A

um So uh let me give these details that I have copied across so firstly, we'll give the name of the office, which is london office and then we'll give an address, and then it asks for the latitude and longitude so I've copied these values. I'm just pasting them over here and longitude map image link.

A

We will leave that, as is for now I'll explain the details in a minute soon and then we'll it asks for the time zone, we'll set the time zone as europe, slash london uh and then we'll give it uh the url of a page. uh You know an internet page related to this office and finally, uh we'll say who the manager of this office is, and it's our favorite user megan bowen, and we save that. So if there are more offices, you know we can.

A

uh You know, go ahead and add other offices needed, but for this demo I'll just say, there's only one office and once we do that, you can see that over here it says that we've got one office and then, let's quickly go through the other properties.

A

It says whether to show search box or not we'll say that yes and then there is, there are some properties related to maps. It asks whether we have to show maps in the quick view. We'll say that to yes and then it asks for the map source, we'll choose ping, and then it asks whether we have to use the maps api.

A

We say yes to that and then provide the api key and then some other properties like whether it has to show the local time we say yes and then what uh what api should it use to show the local time there are a couple of apis temporal and looks lux on. We will have a look at these in a minute and then it says whether to show local, whether yes or no.

A

We set that to yes, uh should we get whether from list or use whether we api, we say it has to use, so it has to use weather api, and then we provide the open weather map api key right.

A

Sorry, there are a lot of properties, but these all make sense in a minute. So once the properties are set now, if I just say that as draft and then when we it says we have one office, we click on view details. uh It shows the details of that office. So basically it says the london office.

A

The time in london office is 1522, which is the same time zone as the current user, which is myself and then the address, and then the the map itself of the office and then the the weather in london, which is very nice today, 21 degrees and sunny, um and then there are some uh other uh buttons as well get directions clicking on that it opens. uh You know, bing maps and uh you know asks you can uh give a from address and then you can take a look at the map and then the other.

A

This is like contact the manager that opens the chat in teams and finally, more details takes you to the to the internet page. We set that's fine. Now you might say uh you know you would. If the data source is, we don't want the data source to be local. There might be some terms in the taxonomy which which have the offices defined already, and that's what I have here exactly. There is a term store uh called as offices and in this I have about uh six offices uh over here and then each office.

A

So if I just click on that uh has some properties you know, address latitude, longitude and the time zone etc, yeah. So these are all defined over here now.

A

What we'll do is uh uh we'll use the id of this term set I'll, just copy that and then uh go back here and then change the data source from text from local to taxonomy, and then it asks the for the id of the term set and paste that, and then you can see that there are six offices, okay and then the third option for the data source is a list as well. So if you have offices in a separate list, then you can supply that as well.

A

Okay, so now let me just save this as craft and then, when I click on view details again and now it shows all the other offices. So you can see, we've got the bangalore office and now the local time in bangalore is 1954, which is four hours and 30 minutes ahead of us.

A

And then you know all the other offices you know with their respective time and the map and weather as well and uh yeah. So that's how we can see all the offices now, the the other functionality that exists in this is uh the search functionality.

A

So uh if, if you want to search for something, if let's say if you want to search for the seattle office, so if I type in settle instead of seattle uh or making a spelling spelling mistake on purpose and then search for that, you can see that you know search for, settle and then the return results in seattle. So we are using something called as uh fuse.js, which which does a fussy search uh on the on the text uh and then the final thing I wanted to show was before we jump into the code.

A

Was this uh you know uh here we have a property which says show maps in quick view and then, if I set that to no and then say that again and then, when we click on view details now you see that there are no maps in quick view. However, you've got this button called as open in maps, which is nothing but the the geo location action provided by viva connections. I think this is part of spfx, 1.14 or 15. I'm not sure. However, there is uh information on how to use this as well.

A

So when I click on that, uh it doesn't work. I'm sorry about that. I should have tested it before uh before letting you know, but uh there is a glitch uh of course. The democrats have decided that that they'll not coordinate with me, but essentially the idea was when you click on that it should open a pop-up and then show the map anyway.

A

uh Let's, uh let's have a look at the code, so so what are the different features used in this? Is these are not sharepoint features. These are the properties of this solution, so, firstly, we have multiple data sources, as we saw can be local or taxonomy or less. We are using pnp js version 3. In order to get the data from taxonomy and from the list.

A

uh We are using a temporal api or luxon to to get the local time, uh and then we are using the geolocation action type which for some reason is not working currently and then finally, uh uh I mean the geolocation action in this solution is not working. So I need to take a look at that and then the final bit is uh caching, so we are, you know, wherever possible. uh We are using a lot of caching uh in in the solution right.

A

So let's take a look at the code, so the code itself is part of the pnp asus repository, uh so there's an is called as image card office location. uh There's a pending pull request, like david mentioned earlier, with some updates, so that will be uh merged soon. So in that case, we've got this adapter card extension.ts file uh and that file what it does is. It has a method called as load offices which uh you know which which has functionality in order to load the offices based on the data source.

A

So what we do is we switch on the data source and, depending upon what has been selected, we either get the data source uh from the local properties or from the term set or from a list. So in this case we have selected the data source as taxonomy, so let's have a look at uh how the how the terms from the terms set are being obtained.

A

So uh there's a method called as get office terms. Now we are using pnpjs to call this. Let's see how we are doing that so there's a file called as office location service and that in that file we are using pnpjs, in particular the extend factory method in order to extend the term store and uh to define our own methods uh in order to uh you know or our own functions in order to get the offices or the in this case the terms.

A

So there are some nice samples available uh with respect to pnpjsv3 which which provide the same information. So what I've done is I've? Just used one of those samples and then changed the code slightly right, so we've got this function called as get office terms, and what we are doing here is with pnpjs. We are saying, get, firstly, get the term set based on the term set id and then get all the terms under those and in particular, just get the id and the labels and the properties of the terms.

A

So once we have that information, we then use caching in order to store all this information in the browser cache.

A

So once we have all the terms, uh these are nothing but all the six offices that we saw earlier. uh We just map all those terms into a custom object. So we get the uh you know the different properties, like the name of the term, which is name of the office, uh the the address uh latitude and longitude the time zone uh who the manager is and what the page is, etc.

A

So basically, we get all those custom properties and then store them in a custom object, and then once we have got all the offices, what we do is if there are no offices, we just say that we just display the error card.

A

But if there are some offices, then what we do is we just add some extra properties, like the chat link for the manager and then set some other properties like like the time as null, and then whether the map and the uh whether we've gotten those or not so initially, we set them to null or false, we'll be changing these values later on, and then with all this, we then set the state of the adapter card extension in which we set all the offices.

A

We also set something called as filtered offices which we'll have look at in a minute, and finally, we will say the card view to render is the initial card view, which shows us the number of offices right so just to tell you where we are now so currently, we've got all the data related to offices from the term store. It is now present in the in the state variable called as offices. Then the next steps are.

A

We have to display the number of offices and each office needs to be displayed in the quick view in detail right.

A

So uh there is a file called as cardview again asus have got different cards if you want to take a look at what are the different card views, uh there are a lot of sessions or a lot of videos available on youtube from the calls.

A

uh So we can take a look at those, so one of such views is the card view. So what we do here is we we get the title from the properties and then we calculate the number of offices using the length property, and then we just say we have how many number of offices. So in this case we got six offices. So that's the that's the information uh we display right. So that's the car view, which is very simple and then when when, when we click on view details what happens?

A

Is we open the quick view? So the quick view is nothing but an adaptive card, json file. So, as you can see on the left side over here, it is a simple adapter card, json showing or all the all the properties that we have set in the offices. Now I won't be going into the details of this json file because it's just uh like I said, a simple json file with some text or some uh you know buttons etc, which shows all the different uh you know properties of of the office.

A

But we will take a look at how we are supplying data to this json file uh so that they get displayed. uh So it's nothing, but this uh you know the json when it renders it looks like that. uh So so there is a corresponding file called as quick viewer ts, which is highlighted on the right side, so that that's that that is a file wherein we we set all the data.

A

So, firstly, uh we have this object, called as uh quick view data in which uh you know we need to set what office we are going to show, and you know whether we have to show the search or not whether we have to show the weather or not show the time or not, etc. So all this data is gathered into this object and it is set initially with some values and then what we do is from the state we get which office needs to be displayed.

A

So there is an index uh that we we set uh so by default. That index will be zero, so it will show the the first office from the offices array uh and then what we do is for each office. uh We call different methods so, uh whether if the map has to be shown, then we we call a function which we'll have a look at in a minute. If we need to show the time, then we call the function that shows the time.

A

And finally, if we need to show the weather, we call a function uh that shows the weather.

A

Once we have all that data, we again manipulate the data to return object with this extra information and then that basically gets shown in the quick view.

A

So, in order to get the map, uh we have a method called as get office, location map, details and, as you can see over here, uh what we're doing is based on the map source if it is bing or google, we just call the uh call this url, which gives us the static image for the for that particular location based on the latitude and longitude that is passed, and that's what you see over here in the quick view, and then for the time I said, like I said earlier, we've got two apis.

A

One is the temporal api which is which is slightly new. It is, uh it will be. I think uh it will be used quite heavily in the future, because uh uh you know it uh there will be no need to use any third party libraries, basically with the help of temporal, so it will all be a part of the of the javascript engine that the process will run. uh So I think the pro the proposal is still uh in the last phase, but it will be available soon.

A

However, that's why they have given us a polyfill as of now. So that's what we are using here currently, so, if we have to in the a settings, uh if we say that the time needs to be obtained by temporal, then we just load that temporal uh polyfill and then we get the current time uh and then we get the offset uh to to get the time difference.

A

So uh you know how many hours or minutes the uh the the office time is ahead of or behind us uh and then we'd do some computation to compose this nice thing to say uh the local office uh is ahead of or behind so many hours etc, and show that information, and that's what you see over here in this case seattle is eight hours uh behind london and then, finally, in order to show the weather, we use the open weather map api. uh This is a simple http call.

A

We pass the lighting to random longitude and get the weather and then put that in a custom, object and show that and that's what you see over here and yeah and then in order to do the search, we use something called as fuse.js which in which we set the property initially and then.

A

Finally, whenever the user clicks the search button, which is called the fuse dot search method, which then goes ahead and does the search in the office array right so there uh there are quite a few sessions uh from from patrick uh from waste and valdec and from paolo. uh You can take a look at those to get more information on asus and these are the resources that were used in today's demo. Thank you.

B

Great stuff, really impressive demo, uh the way you linked all that stuff together nice, clean code and well structured demo there with all the different uh code samples and showing the ace uh as you're, showing the code really impressive stuff.