Microsoft 365 Community Community Demos, 14 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections Adaptive Card Extensions - Dynamic Announcements

Description

In this 20-minute developer-focused demo, Siddharth Vaghasia delivers a single ACE component to show multiple cards and items from a SharePoint list. Each list row is rendered separately in a Card view. Card view format based on schema and data stored in list row. Additional information in row rendered in Quick View card or link to external resource. Display and rotate card on Dashboard by time and date. Navigate through card items with Prev/Next. Update CardJSON and CardData in list with Power Automate. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 14, 2022.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Sample Repo - Dynamic Announcements | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Dynamic-Announcements
• Sample Repo - Event schedule and registration | https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/event-schedule

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

A

Extensions which I have recently submitted to the spfx Adaptive card extensions, GitHub repo uh little bit about myself, I am so I am a Microsoft MVP and I am an active, PNP contributor and proudly uh just showcasing all the patches which David has talked about about various currently Pages which we get while we are contributing to all the PNP reports and everything. These are some of the social handles through which you should be able to collect with me.

A

So today, I'm going to talk about an S component to basically show multiple cards and items from the SharePoint list and at a time based on the days. uh This is the report to the sample from which you would be able to download the apple and also uh make changes if you like- or you can just let you use it as it uh by just building it.

A

uh Let's first see a summary of the uh this particular adoptic card extension sample, so it basically is a single component here, which we have been. We would be able to show various cards and items from the SharePoint list at a time and that will be based on the date. So that is why I call this as a dynamic announcement wherein, as in tactical use case, what we can do is we can use this particular adaptive card extension solution to display different kinds of announcements uh in our Viva connection. Dashboard right.

A

uh The good thing about this sample is that generally, when we create an Adaptive card extension, we would have one card View and we could have multiple feed views right. But generally, if you want to make any change to the uh quick view or any changes to the card view, we would have to probably uh based on where the template has been stored. We would have to probably change the code and redeploy it right.

A

So here it is kind of a reusable electric card extension wherein a single component would be able to render different formats of adaptive card extension and that which has been configurable in a SharePoint list. So we will see that how that will work in a while, and then there is an option in the card view whether we can choose whether we wanted to open an external link or we wanted to open a quick view on the click of the card view, or we don't want to do any any suggestion.

A

We just wanted to have a plain and simple card view to be displayed on the dashboard right. Some of the examples which I think this can be useful is to basically show the communications uh or the news and articles which we can get it from the external external systems or external apis.

A

From the same way, we can Implement rssp to be displayed and update into SharePoint list, any other important updates, a part of that tip of the day or any other announcement which we think we would like to give to all the uh users within our organization in our Viva connection, dashboard itself.

A

Now these are some of the other features uh which uh these adaptive card extensions uh provide is. Basically, you know, allows us to create the list from the configuration panel. So it means that you don't have to pre-create the list uh from manually uh from the SharePoint, but you can use this Adobe connections and just click on the button and it will automatically create the required schema or required list to be used for this.

A

There is an option to enable auto rotate the card for every four seconds, so it is configurable in the uh web part property in the card properties itself. Then there is previous and next button to navigate between different items, and we can also basically use the same card on the multiple times on the dashboard, pointing to different list, because the list from there to get the data is configurable in the web part properties itself.

A

So without much uh you know, let's uh quickly see the demo. uh So this is my dashboard. Okay and you can see many adaptive card extension, but we are mostly focusing on this particular component. So right now, if you see it is showing one uh card view which is PNP landing, page a single URL to find them all. So once you click on it, it will take us to the home page where we will be able to find all the links to the PNP uh on click of next.

A

It is showing a different sample, which is basically a restaurant sample, and you click on it and you see a different kind of hit you so the first uh card view which we have seen was first and simple to link to the external system. uh This one is where we are displaying at quick view, and this is one of the uh example from the Adaptive card designer IO, from where it shows how we can different kinds of adaptive card can be displayed uh next, it's an image gallery sample.

A

This is again from the designer LW card design samples only where we can display some of the images within the adverty card. So now you can see that, though there is a single card view, but on each card view, which we display, there are different formats in which we can display uh quick use. Also right, so it's every quick, you would can have its own format and we will see how that will how that is.

A

Working- and this is another sample of you- know, FAQ, which is basically available in the Adobe required sample to display the FAQ questions and answers from there right. uh First, let's see also see the properties which are available, so uh you can configure the obviously the card title which is displayed like Dynamic s, then the card icon and the list name from where we wanted to get the data from, and this button will basically create a list.

A

uh If at all, you wanted to create a new list and use this card in multiple in the uh same dashboard. But we wanted to add this multiple times and then there is a auto rotate on end of property, which will basically kind of auto rotate a particular card in every four seconds.

A

So uh this was the sample and now, let's, let's see the schema of the list? Okay, so so this is basically the list from where all the three cars which we have seen right now, we have all coming uh so First Column, which we have is the card View Title and the description which will basically control what we are displaying on the card. View Title and the description, then there is start and ended. uh As I said, it is more like an announcement.

A

So this is the feature wherein you can have a single list, but you can control what you wanted to display on that particular uh dashboard for what all items you wanted to get based on the start date and end time, so it means it's like an uh expiry of a particular announcement or expiry of a particular card. So if the current today's date will fall between the start and end date, then only it will display here. Otherwise it won't. So we are just filtering based on the start.

A

They can end it so right now, if you've seen uh it was displaying these three samples, uh this four samples, sorry, uh the FAQ image gallery and the test one.

A

Then there is a column for on card selection type. So this will tell the uh code logic. You know what to do when a card particular card is selected. So if it is a quick view, uh it will basically go and refer this two column which I'll be talking about in few seconds, uh but if it is just an external link, what it will do is it will try to find from in which link you wanted to redirect to search.

A

So this is where the uh links to an external liquid work whenever a card is being clicked now, if it is a quick view, then what we have to do is we have to basically Define the schema and the data here now. So this is something which we have to understand uh generally, when we create an electric card extension.

A

What we do is we Define our adaptive card schema uh within our code base itself within a template, folder somewhere and then what we do is we have our data method, which we basically kind of pass the dynamic data to that adaptive card schema and then the rendering of the adapter card takes place by the spfx framework itself right. So this is where uh you know, rather than getting that adaptive card schema from the uh record solution or from the template folder.

A

What we are doing is we are allowing user to make it configurable in the SharePoint system. So here you can Define all the schema which you have and the data data column would be where you have to basically uh create your data, which basically will combine with the Adaptive card extension right now. One question: uh you know we would have in our mindless signal how we are going to update this data column right.

A

So uh in a way, if you think about this, basically because this is an announcement kind of thing uh behind the scenes- probably you might have a power automate or you might have other automation, which uh would have been running behind the scene, which will take care of updating this column so like.

A

If, for example, if consider an RSS field, which we wanted to display onto the Adaptive card here and which probably can be on the daily basis, uh a power automate would be kind of running daily or uh on the scheduled time, and what it will do is it will read the RSS feed and what it will do is it will automatically not automatically, but basically based on our logic. It has to create a specific Json format in which the schema would require right. So that is how both of this would combine and then it will.

A

uh The spfx framework would take care of displaying the data in the quick view itself. So, let's just quickly see you know how we can probably start create a new entry here. So what I'm going to do is I'm going to use this adaptive card template repo, wherein there is an Adaptive card sample uh which basically displays the event schedules and registration? Okay, and within this, if you think about this, uh there are two uh two Json files: one is the template, Json file, template file and the data file, which is there right.

A

So let me do one thing: let me create one uh one sample here, so foreign.

A

Ly available for the event schedule in the Json column, and we also have the sample data, which is uploaded here as a part of this sample, so I'm going to just copy this and I'm going to put it in the data panel.

A

I'll choose this start date, which is earlier than today and end date, which is later than today and I'll. Just save it here.

A

Let's just refresh the dashboard now and uh if you see the new item has been created here and it is getting displayed, every signal, 2021 click here to show agenda, and if you click on it, it is showing exactly the way the sample was showing uh in the repo itself in the quick view, with all the functionality as it is now. One thing to note here is because this is an Adaptive card announcement kind of thing. uh Probably it will not support any update, which we have to do like, for example, this particular sample.

A

What it does is. It has a registration form also and on click of submit. Probably we might be submitting data to some of the API or we might be storing this data into SharePoint. So that won't be supported, but it's more or less a read-only kind of scenario in which you can use this adaptive card, uh and this is how, overall, uh you would be able to do it now in this particular case.

A

Also, if you think about it, probably the agenda, which is which we had displaying in terms of the data we might be getting it from the API or we might be getting it from the uh another system or within SharePoint somewhere itself.

A

We just need to make sure that that particular piece of automation is uh going to go, go and update the data in a particular Json format where, based on this schema, which you have created so this particular adaptive card extension, is more or less targeted to developers like us who can basically, you know, kind of use, this kind of reusable adaptive card extension to be displayed somewhere and give a solution to the client that we are in if they say that okay I need to quickly display some announcement or something, but it should be in this format and depending on the type of the announcement or type of the message, we wanted to display different kind of carbon.

A

So in this case this would be Um this can be used. So uh let me uh quickly: that's it from the demo side. So, let's quickly do the Code walkthrough. You know how uh how this particular piece is built uh to start with. uh We have the we have a typical adapter card extension. uh You know project structure which we have. uh Then there is a property which basically, uh which are the configurable properties, uh to hold the values of the title. The List name the icon and the auto rotate true or Folds.

A

Then we have state object which will basically hold the data which we get from the SharePoint, uh the area of the items, uh the current index, which is being displayed in the card view, then the current item, which will hold the actual uh item within that particular uh selected uh card, and then there is a click view uh right now. This is not been used. uh I was trying something else, uh but you can ignore this. uh Then there is uh on init method. uh It's the only init method.

A

What we are doing is we are initializing an SP service provider class, which will be talking later, uh but overall first thing to do is to get the SP list item. By using the test we provider class, uh then initialize all the states with the items which we got from the SharePoint list, and uh this is the fixture method which basically, it's kind of um to help us to do the auto, auto rotate.

A

uh If I remember correctly, uh I got this reference from one of the session uh or demo, which Patrick did on how to auto rotate the uh particular card and, if I, uh from based on a few seconds. So this is the same logic which I have kind of you know, uh get it from the particular demo which was when done.

A

uh Then we here we have only two cars, I mean the cardio and the big View, and the single quick view is basically uh make dynamic in a way to get uh the schema and the data from the SharePoint list. So there is, there are no multiple, quick views or anything. It's just single cardigan single click view here.

A

uh Next. uh This is a method to create the list. uh Whenever a create list button would be clicked in the configuration window panel and the properties uh in the get property pen configuration. We have the list name from which we have to read the data. Then there is an uh a text.

A

Then there is a label to basically display the instruction text and uh the button to basically uh uh on when, when the button is clicked, we have to uh create the quality method to create this SharePoint list and then the property of Auto detect whether we wanted to do auto, rotate or not, or it has to be always manual.

A

Okay. Moving on to card view. uh First uh thing to understand here is the buttons so, depending on the current item index, uh we would have to either add one button or two button. So if the current index is greater than zero, then it means we know that there are more items to be displayed, so we'll display previous button also. But if it is a last item, if it is not the last item, then we have to display the next button.

A

So this is the logic typical logic to basically enable disable uh either whether it is a single button or multiple buttons on the card View.

A

The next thing is on action. uh This is where, uh whenever an action button from the card view has been clicked uh so here what we are doing is we are just incrementing and decrementing uh the index and the current item object uh change. The current item object depends on whether the previous or next button has been clicked in the data method. uh As I said, the card view is basically getting data from the SharePoint list and from the current item.

A

So what it will do is we are displaying the primary text, which would be configured in the SharePoint list and uh the description which would be configured in this Advantage. Based on the current item, which has been displayed, and now this is important uh on card selection means what we need to do whenever a user clicks on the card right so depending on what is the current value set of the current item in the card?

A

Whether it is a quick view, we will return the quickview object, but if it is an external link, then we would return the uh object of the type external link and also we will set the target parameter to the uh column value which is there in the external link.

A

Url and if the card view selection doesn't have any Excel item, then what we are going to do is we are going to do nothing, so it means nothing would happen on click of that, uh then coming to the quick view, uh so this is interesting uh generally in the quick view. What we would have is we would have, we would be either returning the uh making the API calls uh getting data from somewhere uh based on the use cases or the scenario.

A

So in this case we know that we just have to get the data from a particular column in the SharePoint list item. So what we are doing is if it is. uh If the current item is of the card selection type of the quick view, then we are passing the Json object and we are reading the Adaptive card data column, data column to pass data to the Adaptive card, schema and same way for the template.

A

Rather than reading the template from the template, folder, which would generally be in somewhere in the course section we are reading the schema from the Adobe part, Json column and again passing it and returning it so that you know, basically, whenever spfx framework would have to display the UI, it will combine the a schema object with the data object to basically dynamically, create the click View and display it in the URL right.

A

uh Next uh is the SP provider class, so SP provider class. Basically, uh we are using PNP, but we are using the older version of Plenty when I started. uh I still start I worked on the older version, but yeah. This would be a right candidate to apply to the new version of the PNP. So you can see that we are initializing the context object here and then there is a get list.

A

Item method, wherein we are getting the item from the list uh based on the filter of the start date and end date, and then the other method which we have is the create list with column, which is the uh this is the method which takes care of the creating the list uh with the required schema, which we need for supporting all the logic behind the Adaptive card external.

A

So this is how- uh and there is one more method checklist uh which is just to check whether the list already with the same name already exist or not. So if user tries to create again this list with the same name, we can just display an error message thing and list already exist right, so yeah. So this is it. uh This is it from my side.

A

You know uh hope uh this particular sample is useful for the community and can be used as it is, and some of the use cases at least thanks for watching and thanks for listening and uh Patrick over to you great stuff there. Thank you so much Siddharth.