Microsoft 365 Community Community Demos, 30 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections ACEs CardView Types in SharePoint Framework

Description

In this 12-minute developer-focused demo – Paolo Pialorsi delivers an overview on three ACE CardView types - BaseBasicCardView, BasePrimaryTextCardView and BaseImage CardView. All extensions you create in scaffolding tool rely on these 3 card types and rendering is predefined by Microsoft. In this session, look at properties, capabilities, and code for each type. Essentially BaseBasic (one text field, title and icon), BasePrimary (two text fields, title and icon), BaseImage (one text field, title, icon, image and buttons). This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Blog – Viva blog | aka.ms/viva/blog
• Documentation - Overview of Viva Connections Extensibility | aka.ms/viva/connections/extensibility
• Samples - Viva Connection Adaptive Card Extensions (ACEs) sample repository | aka.ms/spfx-aces

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

Let's talk about the available options that we have whenever we want to create an adaptive card extension and we want to focus on the current view, types in fact, whenever we create an adaptive card extension at the very beginning, the very first content that we get uh created through the scaffolding tool, the human generator for sharepoint framework is an electric card extension with a card view and the default quick view and talking about the card view, we always see the options to choose between three different flavors of card view.

A

In this short demo, we will figure out what these card view types are and what are the differences between each of them? So, first of all, we have three options: the base basically view the base primary text card view and the base image card view, which are the actual base types that we will inherit from when we will create any card view in an adaptive.

A

Current extension, all of them have a base class which is called base car view and which is defined through some generic attributes, like the interface defining the properties and the state of the adaptive card extension, and we will dig into these topics in one of the upcoming demos too, as well as an interface defining the basic card parameters for the card view and depending on the layout of the basic card parameters, we will have the three different flavors of the card view, so the basic the primary text and the image one an important thing to know is that whenever you create an adaptive card extension, you can only rely on these three different flavors that we have out of the box, and you cannot create your own custom card views.

A

uh At least I would like to say so far. Hopefully, in the future, someone will make the choice to make it possible, but right now that's what we have. So that's what we can talk about. So what do I mean? Well, when I create a new sharepoint framework solution in order to create an adapter card extension using the homer generator as like, as we saw a couple of weeks ago in the previous demo, about their attic and extensions okay, we choose the solution, name, we target sharepoint online. We can target the current folder.

A

We can make the solution tenant wide available and eventually we can user isolated permissions, and then we can choose what kind of component we want to create and when we select adaptive current extension here we see three different options as you see basic card primary text and image card. So now let me dig into each of them and let me explain you what the main capabilities and features are for each of them. So, first of all, let's focus on the base basic car view, which is the really simple one.

A

In this scenario, you can create a card view and it will be automatically created for you by this folding tool, a car view which will simply have a configurable property called primary text which will be rendered in the main as the main content of your card view and users using your curview will be able configuring the adapter card extension to configure just the title and the icon of the adapter card extension, which will be shown in the rendering in the default rendering of the card view, plus your primary text. What do I mean?

A

Well, I have a sharepoint framework solution that I already created where we can see this option in action. First of all, let me use the workbench just to show you the actual result, and then we will see the code scaffolded. So let me get the basic card sample and here you can see. This is my adaptive card extension. This is the card view I can eventually have in this auto generated one.

A

I already have a quick view so here when I configure my adaptive card extensions, I have the capability to configure in the property pane the title and the icon, which will be the title and the icon, which will be used for all of the card views rendered for this adapter card extension, and then I can eventually control my code, the content of the primary text, this area and, as you can see, I can configure this card as like as any other adaptive card extensions to be rendered as a medium size or as a large size and just as a reminder when we are in large size, we can have two buttons in medium size.

A

We can have up to one button rendered. So if I switch to visual studio code to show you the generated code here we have the adapter card extension and I will not dig into the implementation details of the latter cab extension because we already covered them in the previous demo a couple of weeks ago, but I have a card view which is generated by the scaffolding tool.

A

Well, as you can see, this one inherits from base basic card view and, as you can see, we have this get data which will return an instance of I basic car parameters, interface, which only provides a primary text property, which will be the value that we see in the ui of the other of the card view right here.

A

So whenever you simply want to show a simple text message inside the card view, you should choose to use the basic card layout, keep into account that when you create an adaptive account extension, you can add as many card views and as many quick views as you like. So this one is just the auto generated one when you go through this scaffolding tool, but that you can add additional ones, simply creating your own uh ts files and adding your own card views and registering them.

A

So this is what we have out of the box with the base basic card view. What else? Well, we can also use and have the base primary text curve view, which is slightly different from the previous one. In fact, we have not only the primary text, but we also have a description that we can use to render the content of the card view. In this scenario, the user can still select an icon in the title for the adapter card extension, which will be used also to render the curve view.

A

But what is interesting is that we can configure two different uh sections to different text areas inside the rendering of the card view. Again. If we go back to the workbench, I can remove this one and I can add the primary one, and here we can see now we have the primary text and the description. The description is something that by default, the user can also configure from here.

A

But of course you can change your implementation and provide the content programmatically instead of using the ui and again, you can play with medium and large size to render your card view again from an implementation point of view. Let me close this one and let me dig into the primary text.

A

The curve view will simply inherit from base primary text curve view, and in this scenario the get data method will return an instance of a type implementing the I primary text, the car parameters, which will be, at the very end, the data source that you will bind to the predefined rendering of your card view.

A

In the definition of this interface, we simply have the primary text and the description and again here programmatically you can render content coming from a resource thing like I'm doing right now or you can read something from the state or from the properties of the adaptive card extension.

A

It is up to you, the third and last option that we have is the one that allows us to render an image card view, which is the card view in editing from base image card view, and here we can manage the primary text as well as the image, and this is from some degrees of perspective.

A

In my opinion, one of the most interesting car view options, because we have quite some things to think uh to keep into account like, for example, when we provide the image we can either provide the url of an image, or, as I will show you shortly, you can also use an embedded image which will be embedded in your solution and using the required syntax.

A

You will be able to render an image embedded in your solution. You should also keep into account that when you configure the rendering of your adaptive card to be with medium or large size, the behavior of the rendering of your image will change and in fact, in the medium one, the image will be rendered at the top and the size will be the one you see here, 164 by 80., and you will not have any button rendered in the ui, because there is not enough room to render also a button in the medium one.

A

If you will switch to the large one, you will have a 164 by 180 size which will be rendered on the right side of the card, and you will be eventually able to have some buttons rendered in the ui again. Like always, users can configure title and icon. So let me switch back to this third option. Let me remove this item and, let me add the image one just to show you the card in action.

A

This is with the default image generated by microsoft, with the human generator for sharepoint framework and, as you can see, if I will switch from medium to large, the image will move to the right side of the of the rendering of my car plus. If we go to the actual implementation of this car view- and I'm almost done now- we have the basic type which is based in mage cardview.

A

The interface will provide the primary text and the image url, which can actually be the url of an image or can be based on the required syntax, using an asset which can be embedded in my solution, and I can eventually return through the cart buttons method, one or two buttons which will be available if and only if I will use the larger view. In fact, if I come back here- and I refresh this view- we can see that now we have the sharepoint logo, which is taking the whole right area of the screen.

A

I see the two buttons, but if I will switch to the medium size, I will simply see the picture at the top, but the image at the top and the primary text.

A

However, if you want to trigger, for example, a quick view or something else, you can still implement the action right here, the on card selection and instead of using an external link action, you can always use a quick view, action and still trigger or render a quick view when you do that.

A

So, at the very end, three different flavors to render card views based on a predefined rendering provided by microsoft and, depending on the rendering that you want to use, you will have different options to configure to make your adaptive card extension render in the best way, and that's all for me as well so back to you david awesome.

B

Paulo thank you so so much, that's a great overview for such a new technology in the community. Many many are are just coming up to speed and that's going to be super valuable.