Microsoft 365 Community Community Demos, 21 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: At a Glance Web Part and Viva Adaptive Card Extension

Description

In this 15-minute developer-focused demo, Anoop Tatti deliveres a sample web part and a sample ACE, that display the first few sentences of a news article in a carousel on a SharePoint page (desktop or mobile) or in cards in a Viva Connections Dashboard (Card view with deep link to full article). Control number sentences displayed - actual or curator authored sentences. Clean code to get articles, to extract sentences, to render. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 21, 2021.

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

Supporting materials:
• Webpart sample - react-at-a-glance | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-at-a-glance
• Sample - News article content at a glance | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-At-a-glance
• Video - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY

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

Hello, everyone, so today's demo is on a web part and an ace sample called as at a glance. uh So the plan is I'll, go through some slides and then a demo and then some slides again for the code uh right. So just quickly about myself my name is anub khatti, I'm a sharepoint developer at content and cloud uh here in uk. I write blogs uh under the platform medium and that's my link to the blog on the dot medium.com and I'm on twitter as well, and my github username is uh anupti right.

A

uh So, firstly, uh you know the idea for this at a glance. Webpart and ace uh came from the bbc news app, so in the in the beta version of the app uh you know what they have is. Whenever we open a news article uh at the top, uh you know we can see that there's a uh or you know, there's a box over here which provides the summary or the first few sentences of the article and then uh you can scroll through. uh You know uh the first few sentences.

A

So in a way you get to read the news at a glance before reading the entire news article.

A

So I showed this to one of our clients and asked them if they would want this in sharepoint for the news pages, and they said yes, so you know we went ahead and created the web part and uh once we did that uh the next thing obviously was to share it on github uh in the pnp repository and now I'm doing the demo of the same right. So uh the web part itself. These are a couple of screenshots, but uh we'll we'll have a look at the web part.

A

So all it does, is uh you know on the right side here we can see it on a on on a page on desktop. As soon as we add this web part, it gets the first three sentences of the article and uh shows the news at a glance and in mobile view, uh we have this carousel, like the bbc news app, wherein we can click through the uh dots and then read the news at a glance and then what we. What we have also done is uh created an ace for the same say.

A

For example, uh if we have an important article published by the ceo or some kind of policy that gets published in our organization, and we want that particular article to be visible on the viva connections dashboard, then we can use this.

A

This is sample and then all we have to do is add the sample and then set the id of the or yeah id of the news page that we need to display and then, as you can see it, it displays the the first few sentences of the news article uh and then clicking on on the card itself, takes you to the news article. So in a way you are reading the important article uh at a glance right.

A

uh So what we'll do now is we'll have a quick look at the and the web part and the uh ace card itself and then go through the code. So if I open this site uh so here in my developer, dev tenant I've got a news article.

A

What I'll do is I'll just edit this page and then go ahead and add the add, a glance webpart and, as you can see, the first thing it does is: gets the first three sentences of the article and shows it over here. If I edit the web part, I can control the number of sentences that need to be displayed, so I know three or four uh whatever and then, if we do not want, uh you know it to pick up the first three sentences, then you know we can uh write our own uh sentence.

A

uh You know if I can spell that correctly, yeah and then all the other sentences, uh so uh that's the web part I'll just go ahead and save that uh and then, if we view it in in mobile. So if I just refresh this page, you can see that the web part is here. uh You know you can click on the carousel and it goes through the various pages. So that's the web part uh uh on the uh in the rest of you and the mobile view and then with respect to the uh ace itself.

A

So what I have here is a site called viva test which is the home site in my tenant and then, as you can see, I have created a page called new hr policy and the id of that is 14.

A

So now, if I go to the the dashboard page uh now, there are a lot of articles about this dashboard page how to set it up, etc. I won't go into the details of that, uh but I've just gone ahead and uh created the dashboard page. It's basically, uh you know clicking on this uh button and that should uh do it for you. uh What I'll do is I'll go ahead and add a card uh which is called as at a glance.

A

uh So the first thing it says is that it needs some setup, so I'll just go ahead and edit it I'll change the size of it to large and then, as you saw, the article id uh was 14.

A

So I'll just go ahead and add that uh and then I'll just uh bring this up at the top and then uh preview that so what it does is uh it gets that particular news article uh and then we can, you know, see the first few sentences uh of the news article and then in desktop uh it looks similar, basically yeah, so that was uh uh you know showing an important news article that if we want uh in our in our in the viva connections, dashboard uh either in mobile or desktop right.

A

So if I go to the slides again so now, let's walk through the code. All this code is present in github under the sp dev fx web parts uh repository and the sp dev fx asus repository. So first we'll go through the web part uh itself um uh in the web. Part we've, uh you know got this file called as news clients webpart.ts, and the first thing that we do here is using is sp http client.

A

uh We get the the current page um where the web part is in uh and then uh what we do is we. We get a few details like the title. uh The pan is image url and the content of the page itself. uh The other option is, we can use pnpjs to do the same. So what I've done is in the in the code. I've included the this file pnpjs.ts.

A

So instead of using spss tpclient, you can use pnpjs to get the same details so once we have all the details of the current page, I.e the you know the image and the content. uh What we do is we. We need to do some clean up of the of the content, so we go ahead and remove the html tags and then we remove any goods uh and then what we do is uh uh we uh over here. As you can see, uh we get that content uh which is present between full stops.

A

So that's how we get a sentence, but that regular expression can be changed to anything else based on how a sentence is defined. uh So once we have extracted the uh the sentences from the content, we just populate a local variable and then store all the sentences in that.

A

After that, what we do is in the render method. We use this dot width property of the web part. If it is less than 400, then we render a component called as news glance, small, uh which is uh in the mobile view, uh we'll have a look at that component quickly and then, if the width is greater than 400, then we render the the desktop view right. So in the news glass, small component, that is the mobile view. What we have here is an npm package called react, multi carousel.

A

We can either use this or there is a pnp, reusable component called as carousel. We can use that one as well, so we we import that particular carousel and then all we do in the render method is just render that carousel by passing all the sentences to that. So that goes ahead- and you know, like you see on the right side- shows all the sentences in the carousel and with respect to the news glance large, which is the desktop view of the card. uh This is very simple.

A

All we do is uh have a title at the top uh and then show the image uh if needed. uh If it is uh set in the web properties uh to show the article image, we show the image, and after that uh we show a nice ul unordered list with with some list items. There's some styling around that and that's about it.

A

So uh that's the um you know, that's how we show the sentences in the mobile view and then in the desktop view, right and now that that was the web part and the next one is uh the the ace for the same.

A

One thing I recommend is watching this video by patrick uh on getting started with uh viva connection aces, uh it's a brilliant video uh that covers a lot of a lot of information on these uh aces, uh the different types of them and how we can how we can. uh You know, start uh working with those. It's a it's, a brilliant video and so using uh that I have developed this extension and then I have. This is all available in the repository again.

A

uh It's the asus repository that david uh mentioned earlier, uh so I won't go through uh details of each of the file. You can uh watch the video from patrick that um that that covers everything in detail.

A

uh However, in this case, what we have here is the and the main file which is the card extension.ts and again, uh the first thing that we do is we get the news articles of properties like the title, the image and its content, based on the id of the news article that was set in the properties and once we have all the details, what we do is we just build a custom object uh with, in which we store the content of the article, uh the image uh and then the title of the article uh as the reason we store all this uh in this object is later on.

A

We will, you know, expand this object to get more details uh so uh this. So this is the uh a method called as low details, which gets called when the ace itself loads. So what we are doing here is we are creating a custom type called as glance card um which has uh certain properties, like uh you know, image, url, uh title uh and primary text. uh This is simple. You know this is an extension to the out of the box image card extension uh interface.

A

I think I might be wrong, uh but um you know we. I could have used that extension itself. uh Sorry without that interface itself, but we have just created a custom one and then firstly, we create an array of this type and then we we push uh the image, url and and the title into that, and then what we do is uh on on line number 163.

A

We go ahead and push the first card. uh So if I just show it over here, uh the first card, as you can see, has the primary text as the article title. So we've got the image url and then we've got the title, which is at a glance that we have over here and then the primary text is the uh title of the article. So that's the uh card we saw earlier so uh basically in in this process.

A

We are building up the content, so we have built up our first card, which has to show the title of the page uh or the title of the news: article, its image and then the title for the card and after that, what we do is like we did earlier in the web part we go into the article, can content, remove all the html tags, remove the codes get all this get the sentences and then for each of the sentence.

A

We build a new card and then that that card will will have the again the image and then the title, and then the primary text or the main content of the card uh will be the sentence itself. So uh if I bring this up over here, uh you can see. We've got the image and the title at the top and then uh the sentence itself, so um there'll be one one card for each sentence: yeah, so that was uh building the the content itself.

A

So we've built the title and then we've built all the sentences that we need to display. Now we need to display these cards. So how do we do that? We've got something called as card views. uh There are different types of card views, one for the image and the other ones for quick view, uh etc. Again, patrick's video explains all the different card views.

A

So what we are doing here is we are using the image card view and then the first thing we do is if, if we do not have the data, yet we just show a loading image. uh That's what is seen over here and after that, what we do is we.

B

A

The the first card that needs to be shown, which is nothing but the card with the title, and then we have the next and the previous buttons, and all we do here is whenever the next button is clicked. We show the the next item in the array, so, for example, when we click the next button here we show the first sentence and then the second sentence and the third sentence and then similarly for for the previous button, we just decrease the index and that'll automatically re-render uh the whole card.

A

uh So those were the web parts and the ace cards. So I have the links for them over here uh and then I've also included a link for patrick's video. uh Just one improvement uh for this is uh you know I was speaking to waldeck earlier and he mentioned about us, your cognitive services that can be used to get the summary instead of us building the sentences itself, so that can be thought of as well uh right. So that's it from my side, uh patrick back to you.

B

Awesome, thank you. Anub great demo really cool to see that and I'm glad uh the video was helpful and uh you enjoyed that so great stuff.