Microsoft 365 Community SharePoint Framework, 11 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ACE QuickViews and working with view navigators

Description

In this video, you'll learn more about QuickViews, view navigators, and some common optimization techniques and scenarios you can use in your card views.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=kefrLAS2DRw&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=2
➡️ Next vide on this series - https://www.youtube.com/watch?v=-Eb4KIMtwt0&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=4

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/4-quickview-view-navigators
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

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

Sharing is caring! You are awesome! 🧡

A

The rendering of an Adaptive card extension is implemented using two different types of views, card views and quick views in this section, we're going to learn more about quick views, The Navigators that are used in both types of views and some common techniques and scenarios that you can use in your adaptive cards. Let's start with the quick view, the quick view for an Ace isn't initially visible when the ace is rendered. The card view is, what's initially rendered and visible on the Viva connections, desktop in Mobile experience.

A

The quick view is shown based on some user interaction with a card View, and this can be when the ace is selected with the mouse or when, when the buttons on the card view is selected. You can see an example of that here on this slide. This is a class for a card view for an Adaptive card extension and I'm, highlighting two methods: the card buttons and the on card selected button.

A

The card buttons method returns uh three different options: either undefined for no buttons one button or two buttons, and in this case here you can see that I'm returning back a single button. It is a title.

A

That's coming from some constant that we have it's called strings and then the action is saying that the type of this action that I want to have happen is a quick view that says launch a quick view and the parameters I'm passing into it, is expecting a property called View and is looking for the ID of a quick view that I've registered with the quick view. Navigator we'll talk about Navigators in just a minute.

A

The other way of going through into launching a quick view is using the on card selection method and that's when someone clicks on the actual card View and not just one of the buttons in this case here I'm going to return back the same type of an object for my action. So it's got to have a type property, a parameters, property and that parameters property. If the type is set to quick view must be a view.

A

That's set to the ID of the quick view that's been rendered now, while the card view for an ace is implemented in that cardview.ts file that we just saw on the last slide. Quick views are, in the quick view, folder in the initial file. That's created for a quick view, quickview.ts that's created by the Yeoman generator and contains three methods: the template method, Returns the Json for an Adaptive card that defines the rendering for the quick view.

A

While the Adaptive card templates are usually found in the quick view, template folder, it's not a requirement. This method just needs to return. The Json that's used to implement the Adaptive card. For the quick view, similar to the card view, the data method returns an object, that's bound to the quick views template using adaptive card templating. The properties on this object should match the expected properties that you use within the quick views, adaptive card implementation and, finally, the on action method is called by the SharePoint framework.

A

When an action is raised within the Adaptive card, rendering actions include submit actions or when the ace uses the geolocation or media selector capabilities that are supported by Viva connections. Another topic, Ace developers must be familiar with, are view Navigators view. Navigators are used by the ace to keep track of all card views and quick views that the ace can use. The two types of views must first be registered with their respective view Navigators before they can be used. The registration involves setting the views ID and the object that implements the view.

A

The main file that contains the class that defines the ace the adaptivecard extension.ts file that contains the IDS for all of the views and the ID for the card views, isn't normally exported by the module because it's only referenced within the class, that's defined in the same file here you can see the car view. Registry ID is being um is, is defined as a constant um and it just is containing a string. This is not one that we generally have to export or we generally export, because it's not going to be used anywhere else.

A

It's only going to be used within this file or within this module. However, the IDS for quick views. These are exported from the module because they're usually referenced in the card view or other quick views. Here we can see the quick view registry ID, constant, that's defined as a string, it's exported as well. Now, then, the registration of all the views, that's usually done in the aces on init method notice, how the code that you see here on the slide is passing in two parameters for each one of the register methods.

A

The first is the ID of the view, and then the second is an instance of the view. Object where I'm just going to go, create a new instance of it and pass it in both of the view Navigators the card view Navigator and the quick view. Navigator are essentially stacks or arrays that contain views. The topmost item on the stack is, what's rendered by the spfx ace rendering engine unless a specific view is specified.

A

Let's take a look at how we can interact with the view Navigator using the quick view navigation. So here we have a couple different methods that we can use, because they're really just like a normal array. I can push items onto the stack or pop them off and then I also have special methods to control the quick view such as replacing close. So how do these work?

A

Well again, let's start at the bottom, the replace method, that's going to pass in I'm, going to pass in an ID to each one to that method, and that's going to be the ID of a quick view when I pass that in the rendering engine is going to immediately render out that quick view when I use the push and the pop.

A

What that does is that's going to trigger the Adaptive card, extension's rendering engine to render out the ID that I push onto the stack when I pop something off the stack it's going to render out the item? That's now left at the top of the stack, the close method. That's just going to close the quick view when I'm finished with working with it. We'll see all of this when we do a demo in a few minutes now, developers can also Implement complex Aces, using multiple quick views to create sophisticated interactions for their users.

A

However, maybe not all quick views will be used by most users, so in that case it probably makes sense to defer loading of the quick view only when the ace tries to load it, limiting the payload that the user has to download or wait to be initialized by the page, rendering all the aces to implement this we're going to implement we're going to remove an import statement uh that, where we're importing the quick view at the top of the module, where the quick view is being registered in our adaptive card extensions component file, you see here that I'm commented out the import, quick view statement, and then it also commented out the the first register statement.

A

That's the default one that we get in an Adaptive card extension project and what I'm doing is I'm, replacing that register statement with some new syntax. Specifically, the syntax, is just changing for the second parameter. You can see here what I'm doing is I'm, creating an async method that I'm saying import. The quick view object from the class and once I receive it, then I'm going to create a new instance of it and add it to the view Navigator.

A

But that is only going to run this when the item is going to be registered and it's going to is going to be activated by The View Navigator.

A

So in this section we learned more about quick views, The Navigators that are used in both types of views and some common techniques and scenarios that you can use in your adaptive card. Extensions.