Microsoft 365 Community Community Demos, 3 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Developing a Custom Card Extension using SharePoint Framework

Description

During this 16-minute developer-focused demo, Luca Bandinelli and John explain how SPFx powered cards connect users to resources. Native 1st party cards – include Teams apps, SharePoint Pages, Tasks, Shift, Card Designer, Web Links, etc. and 3rd party custom cards - Adaptive Card Extensions (ACEs) – built using a new SPFx component type. Then deep dive into card templates and code. Developers can build cards from scratch or start with existing personal apps or bots, SPFx solutions and web parts. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 3, 2021.

Notice that the features shown in this video will be released in summer 2021. At the time of the video recording, they were only available for preview program attendees.

Demo Presenters:
• Luca Bandinelli (Microsoft) | @BandinelliLuca
• John Nguyen (Microsoft)

Supporting materials:
• Viva Connections https://aka.ms/VivaConnections
• Register - Register for Viva Connections developer platform updates and private Beta | http://aka.ms/viva/connections/preview/register
• Designer – Adaptive Cards | https://adaptivecards.io/designer/

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

Thank you for being here welcome guys today, john pat, and I will talk about viva connection, accessibility overviews. How do you work and create the extensibility cards for vivo connection, dashboard.

A

So let's talk about the power of custom card and how sharepoint framework can help you building uh custom cards for your connection, dashboard, it's as we saw before and now john was showing right now during the demo in the mobile app you can have a card and then you can have a quick view and then the quick view can deep link either in an app that can be a web or it can be a teams, application and all of these capabilities are available for developers, so that developers can go and create custom cards for different connections.

A

So let's talk about the components and the parts of a custom card that the developer can use to build extensions for vivo connection dashboard. So the card is the first experience and it's basically the only one that is required as a developer.

A

You basically use the card to be able to uh provide a quick glance or a quick set of actions that the user can go and can operate in order to make his or her job done or be able to consume the information that he or she needs and, as I said a second ago, this is the only required part of your custom component.

A

If you create a custom component for vivoconnection dashboard, the card is the only one that you need to do in order to be able to surface and exist as part of the dashboard experience, you can also create a quick view after that, which is basically an other experience, a more immersive experience that you can provide to the end user by clicking on the card itself or by clicking on one of the button that can be available as part of your card.

A

It just like john said before, by using the power of adaptive card, it provides additional actions or additional information that the user can consume, and this is an optional experience. You can build your solution. That is just a card. You can build your solution. That is a card and a quick view, and you can select the interaction or the transition between the card and the quick view by being data button or by clicking on the card itself and then the last thing that you can do as a developer.

A

You can also be able to uh deep link an existing application being a page, an external page, modern page or a themes, application of as part of your custom card experience again, you can select, you can decide which kind of app to link and the dashboard author can then decide how to trigger that experience where available, either by clicking on the button or by clicking on the card itself and like the quick view. This is also an optional experience that you can provide here.

A

As I was saying before, we were providing different kind of smart experiences. We talked about the themes up. We talked about the car designer initial point pages.

A

We also have other first party experiences and second part experiences ability to connect with tasks and other functionalities that we provide as microsoft and, of course, we have the asus or adaptive card extensions and those are new type of spf x component that has been created in design, it's primarily and specifically for a user experience inside the with a connection dashboard, as I said before, they work both in dashboard as well as modern pages.

A

We are still discussing if they are showing in modern pages, just as part of the dashboard experience in modern pages or and when I say dashboard experience in modern pages. Basically, we are creating a new web part called dashboard that will surface the entire dashboard that you can put inside pages, but we are also considering to put the card as isolated components together with web parts inside pages as well again, the decision has not been finalized yet, but it's something that we are actively considering.

A

The adaptive card. Extensions can be used or are used so that you can build experiences like cards and quickview as part of the dashboard, and it's just another sharepoint framework component, which means that all the goodness and all the capabilities that sharepoint framework provides, I will be available here.

A

So, for example, I don't know: do you want to consume apis that are being exposed by microsoft, graph or any other application that has been registered in ad in the same way, you're doing that with web part, you will be able to consume that and surface that information as part of the card or as part of the quickview experience.

A

There is also an interesting thing to mention here so, as john said during the demo, uh because the card it is using native rendering in devices and experiences that supports, for example, the mobile experience, we had to speak and select a framework so that we can basically transition from web view to red to native rendering, depending on the case. So for that. For that reason we basically created kind of a separation between data and ux.

A

So for the ux you we will use adaptive card for the quick view and for the card itself. We still use adaptive card under the cover to build the car to build the card experience, but the card experience uh would not be something that the developer can change in terms of ux and basically, what I mean by that is that I'll talk about it in a second, we will be able to have provide some kind of templating that the developer can use to uh instructed the framework on how to build the card at runtime.

A

So, as I said before, you have the ability to have dynamic title and icon. You have the ability to have the descriptions you have the ability to have buttons that can be static or dynamic, which means that you can basically change the button at runtime. You can consume data and surface this data at the bottom of runtime.

A

This is one of these are kind of uh attributes of the card that the developer can set either at runtime or at code time, and the framework will use this information to build the card.

A

When we go to the quick view, then the developer will be able to provide the entire uh adaptive card, json payload and we will basically render natively or in web, depending on where the dashboard is surfacing the adaptive cartridges, and then you can link to an external application.

B

A

Let's talk about the card anatomy, uh where you create a card you can. You have the ability to have views which describe the content of the card or a quick view state, and you can have different views for at the beginning. We will have three different kind of views, but you can have more later and depending on the view, you will be able to have different kind of attributes available uh at runtime earth code. So, for example, you can have an icon property. The icon property is available everywhere.

A

The title is also available on all of the views, the primary text as well, but if, for example, you have only image url, the image url is about an attribute or a property that is only available in the card view uh kind of uh the image card view and the description is only available in the other view which uh sorry I had a glitch in my in my demo or in my deck, where basically, um it's only available on one of the card views and when we go back to the quick view.

A

Instead, we will be able to give you a method that you can use to. Basically, feed the run time to the entire json adaptive card, json payload, and in that case we will just like john show it in the demo before uh the framework will be able, the runtime will be able to take a look at the json and render the json either natively if you are in a mobile or in the web view, if you are in a modern page or in another devices that support webview.

A

Those are some of the examples of the previews and the card templates that are available out of the box. As I said, this is the beginning. By the time we launch we will. I don't know if we will have more or less, but for sure, by the time that viva connections in the dashboard evolves. We are planning to have more kind of templates and views that you can use to build your solutions for vivo connection, dashboard and demo time. John, do you want to show us how to build that?

A

Or do we want to ask some question? First vesa up to you.

C

As we have 10 minutes, let's go to john's demo and and spend time on the coach uh explaining how these things are being built.

A

Yeah I was trying to be in the 10 minutes window, so it's a decent job go.

B

Yeah, all right so just get started. It's just like using um spfx to create web parts um or other um extensions like we've, I'm kind of covered, so you have to install um the microsoft sharepoint generator um and then all you have to do is run yo at microsoft, sharepoint run with plus beta. These are currently data features.

B

C

B

uh Here we go um so you'll, just a familiar uh yeoman prompt except we'll, have a new option down here, um called the deputy card extension and select that give it a name call it hello world goes to home options.

B

Select sharepoint online, so viva connections will only be available with sharepoint online.

B

Select, that's the card extension and, like luca, had demonstrated. We have three current templates that you can use um for the card view. We may expend uh expand and more and you go ahead and select uh them from here to have them scaffold it automatically for you so basic image and primary also like primary name. This will um scaffold, it'll, go and install all the various packages, I'll kind of skip this for.

B

B

But this is what the scaffolding will end up. Looking like.

B

um So this is what a the anatomy of a dependent card extension it'll look really familiar to web parts. We have our adaptive card extension class here, um different props and states. These are a couple new things that allow us um to be able to ensure that the right uh types are enforced throughout the card in the quickview um there's a couple things that are interesting here um to note.

B

We have this notion of a card navigator and a quickie navigator uh I'll expand on this a little bit later in the advanced demo, but this allows um us to manage the different views that you have between the cards, so you could have multiple card views that you kind of switch between then um navigate through as a stack. You can also have multiple, quick views um as well.

B

We're also going to, by default scaffold uh the property pane as a webpack chunk. um What we found is that a lot of web part code ends up being a part of the property pane, and so it's nice to have it by default chunk, and so this is a um a new pattern that you will, um by default. Scaffold.

B

And so there's not really a lot going on here for the basic card just go ahead and we'll do a little serve.

B

One thing to to note if you're familiar with the sharepoint framework is that adaptive card extensions will not work with the local workbench. um We're sort of moving away from that, and so um the support for being able to use gulp serve will only work within um sharepoint, um either on a page using the debug portion parameter or within the the hosting workbench.

B

So I'm running both serve now refresh the warning goes away, I'm able to add my hello world card.

B

We also by default scaffolds into a new um group called dashboard. This will be over all the different time. Cards will be um on the workbench hello world, and here is my uh adapter extension, so you won't be able to interact with it while you're in edit mode, so you'll have to switch to preview and uh when in preview, then we can go ahead and interact with the card.

B

So this is what, by default, we scaffold for the um the basis like primary text card view, um and so we'll have some default properties here being able to change the code icon out. Currently, we support uh only uh image url for the card icon, um but later on um in the beta we'll be able to re-changing this up, to um being able to select fluent icons that will render natively and be beamable.

C

A

Cool thanks john, so one thing to mention here in terms of availability. As we said before, and as I mentioned, uh you sign for the private data program and you will be able to get access to uh internal version of 113 where this is available. However, we are also working to release 113 beta as part of the new way that we are now taking for releasing a public version of sharepoint framework, where we will release a better version.

A

First, then we will release a release candidate and then a final release and in the beta version once that has been released. The idea is that you will be able to access the uh bits for adaptive card extensions from there, uh just like john mentioned before, because we also need to do some work on your tenancy. One of the things that we are working is to be able to enable car development in the workbench so that when uh 113-beta will be available publicly, you will be able to do what john did.

A

Similarly, what john did right now, which basically is the ability to create a card using 113 beta and surface that in the workbench yep.

B

Yeah, so we had a more uh advanced demo prepared, but we're running a bit short on time, um so real quick. What I do want to um to cover is what you end up getting once you sign up with the the private beta and being able to um actually get access to the github, so once you have registered for the private beta and you get added to uh github you'll be able to have access to um the github where we'll be tracking all the issues.

B

um Additionally, level wiki here that covers all the different, hands-on labs that go um in depth about all the different new functionality. That's going to be available, we're also tracking release notes um as we release additional private data um packages to the private feed. Here.

B

What we uh like luca mentioned um with spf x 113, we we do plan on moving eventually to a public beta later this summer, and so once 1.13 beta gets released, we'll be making the ace functionality available um publicly as well, um although so that what that means is that you'll be able to use um and create the debit card extensions on the workbench.

B

You still have to go through the sign up process. If you want to use the rest of the viva connection, functionality um like being able to create a dashboard on your comp site or on your home site and being able to interact with any additional parts you make available through viva connections,.

C