Microsoft 365 Community Community Demos, 28 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Image Gallery Web Part Built with Adaptive Cards

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 28th of February 2019. In this video, Ravi Kulkarni (Accenture) demonstrates how to build a SharePoint Framework web part, which can be dynamically adjusted using Adaptive Cards.

Presenter - Ravi Kulkarni (Accenture)

Code sample available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-adaptive-cards-image-gallery

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

We are going to have a quick demo on SPFs web part like using adaptive cars, and we are also going to discuss why deputy cars and how it can be effectively used in a SpaceX web part, so I'm Ravi Kulkarni working with Accenture as SharePoint, 365 and Azure consultant. These are some of the ways you can connect with me and share your feedback or queries related to add up to cars post our demo, and we will be happy to resolve them and so move over to the next plane.

A

So you will find this web pack at this URL and it also describes all the prerequisites required to make this running on your on your site.

A

So adaptive cards like wraps cards, are basically a common way to exchange car content in a common and consistent way. So you will find more information about adaptive cards on this link. Let me quickly navigate through this link.

A

So some of the key features of inert precursor is its open framework and it supports multiple platforms like dotnet, iOS, Android and HTML.

A

It support all common browser like IE, h, Chrome, Safari, etc, and it is speech enabled and accessibility compliant, and it also gives you ability to add actions on your card like you can accept any user input or you can add a button and you can navigate to some other links and etc. So Microsoft provides that with us with several radius sample, which you can directly use in your X s, pfx web part. So here we have a sample link.

A

So if you go here in the left side left section, you can see the number of samples are all readily available, the activity, update, kind reminder, etc, but for this demo we are using image gallery. So you can see there is some JSON present in the middle section you can easily like edit. This JSON and Microsoft provides a design on which we can, which we can use from the browser to design this car. So you can either click on the designer or you can click on. Try it yourself.

A

Here you go so in the left section. It gives you the containers, elements and inputs which you can directly drag and drop in the visual preview. Suppose if I want to edit this text, so what I will do? I will just click over here and just navigate to the text and I will write P and P demo.

A

Now you can see on the runtime, it has updated my car and as well as the Jason.

A

So now you can how you can use this Jason in USB fx2 apart, so you can directly copy this jason and move into the your into a visual should have code and one we are using two packages over here. One is SP PNP GS, which we are using to retire data from the SharePoint list and another one is the adaptive cars.

A

So let me go to that. Link and I will show you which package we are you're actually using. We are using this NPM I adaptive cards and if you go down, you will get the entire information about how you can install it, and now we can use it. So let's have a quick demo about it.

A

So now the first thing which we are going to do is we are going to import that add up to card, and then we have written the server wastes which will retry us the images from the list which resides on the SharePoint, which typically have three columns, that is title, the icon, URL and the image link. Now we are going to update the JSON, which we have got from bishop designer, so one thing we are going to do is we are going to create an object and we are going to provided type to it.

A

That is image similar to the image type we can also use. There are another readily available types which are text, block, steaks, etc, and we are going to have it. You are a type where we are going to print the URL in the link, and then we can have certain actions on our car, like on click of this card. We we are going to navigate to a particular URL, whether its internal or external.

A

These are easily configurable in the SharePoint list, so we are pulling that data over here and then we are just pushing that into the JSON and if you see the below card is something which we are we have copied from the designer. So the first thing which is important over here is the type that is add up to card. Do not change it as your package inside optical package, both recognize your position and then we have the body. That is a text block which we have just edited and then in the email case.

A

I am just passing the images jason and then we are creating an object of the adaptive car and you can set the font family of that out of your car. And then you are actually initializing your action on the card and then you are going to pass that card and and you are going to render it intuitive so moving on to the SharePoint site.

A

It will look something like this.

A

That street, from my side,.