Microsoft 365 Community Community Demos, 21 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Navigating Cards in Viva Connections ACEs

Description

In this 8-minute developer-focused demo, Paolo Pialorsi focuses very specifically and concisely on how you can manage navigation inside ACEs with SPFx. Every ACE has navigation properties (Navigators) that can be used to navigate across Card View(s) and Quick View(s). Functionality includes Read the current item ID, Register and Push, Pop & Replace. You can rely on these objects to precisely manage the ACE navigation flow and stack. Code for functionality including Start and Restart logic shown. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tools - Adaptive Cards Schema Explorer | https://adaptivecards.io/explorer/
• Documentation – ViewNavigator | https://docs.microsoft.com/sharepoint/dev/spfx/viva/get-started/advanced-quick-view-functionality#viewnavigator
• Sample - aces-navigation-demo | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-navigation-demo

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/m365pnp

A

We are going to talk about how we can manage navigation inside adaptive card extensions with spfx. So, first of all, just to set the context when you develop an adapter card extension, you can get access to some properties like the car navigator and the quickview navigator, together with the navigator property which is available in the base, adapter card extension, so inside the main adaptive card extension component that you build and through those components you can manage the navigation across card views and quick views. So you can push pop a card in stock.

A

You can replace the currently selected a card or, of course, in the initialization code of your electric card. You can register the card that you want to render. So let me quickly move to the demo and let me show you a a sample adapter card that I've built just for the sake of explaining you how to navigate across cards. So it is not a real solution, but it is just a solution for the sake of explaining you how the navigation works. This is a card based on the basic image template.

A

This is a card view and just to give you an idea of how it works, there is a button we can start the rendering of a quick view by clicking on the button, and here we can play with the replace or with the push functionality of the quickview navigator. When you click the uh push, when you invoke the push method, you will push a new quick view or a new card view into a stack, and you can always go back. You can see here.

A

We have an arrow, we can go back just following the out of the box ui or we can do our own logic to go back in the stack when you use the replace functionality. Instead, you will simply replace the currently selected quick view or card view without having the capability to go back.

A

Unless you do that manually, replacing again the card to go to another one and then, when you do that playing with the navigation of quick views, for example, you can also then switch back to the card view rendering, like I can do right here. If I click on the finish button, as you can see now, I updated the currently rendered card view in the rendering of my adapter card extension, and we can also eventually, if needed, implement a logic from within a card view to restart or resume our wizard or our complex navigation logic.

A

Inside the ace that we are developing, and here you can see, we are back and ready from scratch. So how did I implement this sample so that you can do the same in your own real-life solutions? Well, first of all, I created a bunch of card views and quick views. As you can see, I have the start card view which is registered inside the on init method, together with all of the other card views and quick views.

A

And as you can see here, we use the register method provided by the navigator properties and we need to provide the id as well as the instance of the car that we want to render.

A

In the start card view, we simply have a button which will be of type quick view and which will show the initial quick view that we want to start from, which is the star quick view in my sample, and in this scenario I also decided to uh provide the capability to start the same quick view also on card selection, so while clicking on the card.

A

So when I go to the start, quick, quick view that one is a really simple one from a code based perspective, but in the uh json of the adaptive card, I have a couple of columns a column on the left, as you probably remember, in which I have an image which will be the double uh chevron to allow the user to replace the current quick view.

A

With another one, and as you can see this image as a select action option which will be of type action.submit and we we will be we, it will be with an id of type replace, which is a custom one that I created.

A

The same applies for the other button, which is again an image with a select action of type submit and with an id of push so inside the on action of my quick view, I can simply say: okay: if the action is the push one, let's go through the quickview navigator that I have and push a new card if it is the replace one. Instead, we will call the replace method and we will provide the id of the quickview that we want to use to replace the current one.

A

When we do the push, then, in the push quick view, we can easily do the pop to go back to the previous one by code or we can push in the card navigator. The end card to complete our navigation flow in the replaced quick view. On the contrary, whenever we get the focus and the rendering of the current replaced quick view, we can go to the final card view again using the push method, or we can go back to the previous one using the replace, because we landed to this quickview card using the replacement.

A

So we don't have a stack and if we want to navigate back, we can't simply do a pop, but we need to replace the current quickview with another one which could be again the starting one. It is up to you and it is up to your navigation flow, but basically using these methods, push and pop or replace you can play at the card navigator level or at the quick view, navigator level and manage the navigation of your ui.

A

Interesting to note is that when, for example, you switch from the quick view to the card view, you also need to remember to close the quick view in which you are because you can only have one acting card per time and as such, when I, for example, click sorry, click on the push and then on the finish button.

A

First of all, I need to close the quick view that I'm rendering and then I can push the next card to switch the context of the card view, rendering, if we don't do that, if we will not do that, we will not see the new card popping up, because we will keep on having the quick view which will be a kind of a foreground card in the ui of our rendering of the adaptive card extension.

A

This is really useful whenever you want to create a complex ui with your adaptive card extensions, because you can easily switch across different options. Last but not least, I want to show you- and this will be the last part of my quick demo, how I managed to do the restart logic. So here you see, I can click on the restart. I see a dialog I can cancel or I can confirm and restart from scratch. Well, in the card buttons method of my card view, I'm providing an icard button which will be of type submit.

A

I can eventually even provide custom arguments, custom parameters to the submit that will happen. I provide an id to my button and I can eventually this is optional, provide a confirmation, dialogue with the title and the message, which is the one you saw when I click on the button, to confirm what I want to do.

A

The on action method will be triggered and I can see the id of the action and do whatever I want to do and again you can do a replace so that you can go back to the initial card or you can even do a pop because, for example, here we simply did a push of the card, so we can even do a pop to go back to the previous one.

A

So, just for the sake of completeness here, you can find some useful links which are also in the chat right now, and that's all for me so back to you, patrick. Thank you.

B

Thank you, paulo fantastic job to to get through that topic really quickly. But it's a great topic. uh You can build a ton of rich experiences using uh those capabilities. Paolo talked about there, the push pop and replace uh giving you pretty much unlimited control uh over how your aces behave and allowing you to present lots of exciting scenarios to your users.