Microsoft 365 Community Community Demos, 29 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: New card template options for Viva Connections in SPFx 1.18 release

Description

📺 Microsoft is releasing new template options for the Viva Connections cards with the SharePoint Framework 1.18 release. In this demo, Alex Terentiev is showcasing the different new options and shows how to take advantage of them within your solutions.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
• Alex Terentiev (Microsoft) | @alexaterentiev

📖 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18
• Survey sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Prompt-Survey
• Start a chat sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Start-Chat
• People search sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-PeopleSearch
• Viva Connections sample cards - https://aka.ms/viva/samples

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

Mentioned we released the first beta yesterday.

A

uh It provides new possibilities for card views now, first of all, you're getting more flexibility with the mix and matching different components on the card views, but we are providing new capabilities to include text inputs in the card views and we have a brand new uh template for card view for search scenarios that provides you like a search box and also the footer where you can have any information you want in my case it's just a sample for the people search, but you can do document search or whatever search you you like.

A

So uh this allows you to have more engagement with your cards on your dashboard. So in this scenarios, I have some survey like for the movies. Like click submit, you can expect that this information is sent somewhere, another sample for technical support again, if I uh type, something in here click Send. It will open the teams. In my case- and this is everything- is just a custom code. So basically you can do whatever you want, but the good thing about that is the information from the input is available for the developer.

A

So uh it's slow, but yeah. You can see it is appearing in the chat here. So basically it's it's pretty straightforward, so you can grab information from the text input and do whatever you want with that uh same for people search and I'll be showing the code for this one. Today again, we have a search bar here. If I do something like that search load in and I got results for the uh like. The the uh Alex in that case, uh I have some additional information about him. uh So yeah everything is available.

A

uh Pretty rich scenarios that you can uh Implement and now, let's jump to the code and I'll, show you some uh differences, some new things that we are providing so for card views. Now all the new card views will be extended from base components, card, View and the difference between this one and like previous, uh we don't have data getter. We don't have card buttons getter. uh Instead of that, we have this new property called card view parameters and in these card view, parameters you're basically describing uh the whole layout of the card view.

A

So if you look at the uh what we're returning from here, we are returning search card view. It's a helper that allows you to provide less information that the actual types contain, but we are providing card bar. This is where you have the icon and the title you should provide header. In our case, it will be text in the body we want the search box and for footer we want to provide these suggested element suggested footer with the suggested person that we grab from the Microsoft graph.

A

So this is how you now should configure the card views. It's a bit more flexible. It doesn't mean that you can use like any custom components or any type of components. In the card views. We are still enforcing rules. We are enforcing rules. uh What components can be mixed and matched matched on the card, but still it provides more flexibility as right. Now it's not like hey just a basic card view or a primary text card view or image you can mix and match them.

A

You can combine them uh yeah and in that case, for example, you can have image card view. That also has a text input in the body, so much more flexibility, and we will be, of course expanding this in future. One more thing: I want to showcase here.

A

If I go to my uh adaptive card extension itself, if you look at the on before action, so you you can override this method and you will get the information about what action is going to happen like, for example, in in my case, it's a quick view, but additional thing here now, with the quick view uh arguments we are providing data uh property in the same or a similar way as for Action submit uh actions, and this is basically how you collect data from these inputs.

A

So everything you see here- everything the user typed in the text input or in the search. This information will be available as part of your data. So this is how you basically can grab information from the card. View and sync it through the state to the quick view, and basically vice versa as well, and that's probably everything I have.