Microsoft 365 Community Microsoft Viva, 28 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introducing new Microsoft Viva Connection card layouts in the SharePoint Framework 1.18

Description

We are excited to introduce new Microsoft Viva Connection card layouts as part of the SharePoint Framework 1.18 release. At the time of this video, we are shipping the 1.18 preview version with new options which customers can partners can take advantage as they design their dashboard experiences and extensibility for Microsoft Viva.

This video is recorded for the first preview version of the SharePoint Framework 1.18 in June 2023. Depending on the customer and partner feedback, there might be changes on what exactly was/will be released around the suggested new layouts.

In this video, you will learn about
- New layout options available with the 1.18 release of SharePoint Framework
- How the layouts are presented in the desktop and in mobile experiences
- Example scenarios with sample code on the use cases
- How to use layouts in the code level

✨ Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

📃 Agenda
0:00 Introduction
3:29 Live demo on the new options in the Viva Connection dashboard
9:34 SharePoint Framework solution code for the showed scenarios
13:48 Next step and future investment areas in this side

📝 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 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

Foreign in this video we'll have a look on some of the new layout capabilities which we're introducing for Microsoft Viva and Microsoft Viva connections, especially as part of the SharePoint framework 1.18. So we kind of introduce some new layouts and with me here is um well first of all, I'm minuses, I'm a principal product manager in the Microsoft 365 area and with me here, is Alex who's. One of the creators of this feature right, yep or the creator of this feature and to be perfect. Well.

B

It's a team effort, as always absolutely.

A

It's always a theme for discipline, people and then there's developers, but you are on the software development side. But Alex can you quickly explain what is the new feature? What are we providing for Vivo connection.

B

Yes, so with the new 118 release of Facebook FX, we are providing more flexibility for uh card views in Viva connections, so developers will not be like focusing on templates so much, but on the components that they can display in their cards and in addition to that, we are introducing new text input component that can be placed in the in the card view. Another feature that is kind of evolvement of this uh idea is the search card template that is basically focused on different search scenarios like people search or document search.

B

So we are providing you a template in the generator that will like simplify creation of these search cards.

A

Yes, absolutely and in the in the past, we've been basically the reason why I'm actually taking my phone here is I'm going to do a quick example, so, basically for choosing a mobile phone.

A

uh Of course you can access the dashboard directly in the desktop as well, but it's actually pretty cool that you can access the information directly in here and stay up to date wherever you are um and to be in the past, before 1.18, we've been only having like three different card layouts so for the initial view in here and and they've been locked, but now we're basically saying that we're opening up that to be about the components.

A

What does the am I then creating the cart layout, with a smaller set of components, or what does it actually mean so.

B

We are still in charge of uh like possibilities or permutations that we allow. uh So it's not like you, can create any kind of component and uh place it in the uh in the card. uh We are providing you with a set of components and- and we are uh forcing the rules which components can be placed together on the card. So it's still not so far from what we had before. We will still have like basic uh card to primary text card image text card.

B

But in addition to that, we now can say, like hey in a basic card: I want to place text input in the footer instead of like buttons, instead of actions or I, can like mix and match and have text and text input and the buttons. So it's more flexible, still more flexible for the Developers.

A

So it provides more and of course, that provides more engaging dashboards for the mobile and desktop and more layout options and and there's going to be so many more options on the layouts in the future. But let's talk about that one in uh after the live demo. So let's, let's actually jump on your screen and see this one in practice like I, guess it's easier to understand what are we having um when we see it live so here, I.

B

Have uh the black actual Viva dashboard on my demo tenant and, as you can see the like top row, we have three new uh cars here. One is for movie survey, another one technical support chart and the last one is people search all these are based on this new uh capabilities, new components. So here uh I have a text input in the body in this card.

B

I have text input in the footer, and this one is based on the new uh search card template that is specific for focused on uh search uh scenarios and what is good about like all of this uh features like from the text, input from search box, you're, expecting that the user can type something in and you as a developer, you can handle this. You can get the result and do something based on that. So, for example, if I uh in type Alex in the search box, I click search, I have the quick view.

B

I have the same Alex in here, and that is basically the uh code behind works for like communicating between card View and the quick view, and we are getting the results for the Alex for the search box that uh searched query. That I provided same basically here. If we want to start the conversation up, I can type test, I click Send and in that case, I just opening the teams I have pre-configured person with here with whom I want to start the chat and, as you can see, we have this test in here.

B

So basically we were in the dashboard, but we can start the conversation directly in teams uh using these new uh functionality for the movie survey. It's just a more demo mock scenario in that case I'm doing nothing. Let's say like Harry Potter here submit- and it's just thank you for the submission, the response, but you can add the logic basically to post this information to the list or to the database and so on so forth. Yeah.

A

So so, let's recap on on all of this: let's start with the people search. So first of all, I can say the suggested uh item there uh is that some sort of a you can control, probably what I'm what is being listed there.

B

Yes, so uh search card contains basically of uh let's say two components: one is the search box itself and the second one is the search footer in the search footer. uh You can provide whatever information you want, so you are in charge of the label. In my case, it suggests that you're in charge of information uh displayed in the footer.

B

So in my case it's a example or tutorial for uh people search, but you can use the same, for example, for documents and in that case, instead of like an avatar, you will display I, don't know, maybe the uh icon of the uh application where to open the document like PDF words, etc, etc. uh You may have the title of the document and the creation date as a secondary text, this kind of stuff, so everything is in control by the developer, can.

A

I can I have multiple ones there and that would kind of a break the layout. Wouldn't it.

B

uh Yes, unfortunately, only one can be placed there. Okay,.

A

But that could be, for example, your manager or somebody who you work closely with yes and depending on the scenario absolutely or the primary conduct for the help desk, uh for example, or something else uh which is uh the the most uh easily available.

A

um This is clearly I did to add a demo tenant. So I can say that that's really cool.

B

A

Technical uh support chat- and this is just a recap on what you showed there, so we can basically redirect directly. For example, that's that's your custom code, which is redirecting to the team's chat, but.

B

A

To the developer to decide whatever you want to do, when you click a button, you could show quick card view. You could redirect people to.

B

Somewhere else.

A

You can do whatever comes to your mind. Is that the case.

B

Yeah, it's basically the same as we used before so, for example, for submit button and developers already got used to it. You can assign some uh action to the button. Same scenario is applicable and same code is applicable here. So for this kind of buttons there are still buttons. There are still actions, so developer can provide like external link, quick view, action, submit, uh show, location, etc, etc.

B

So all the actions that are available for adaptive card extensions, they're, basically available for these uh actions as well, and actually this is even applicable for this uh footer here. So in my case, I'm opening a quick view. Right, but again you can just open the external link and navigate to the user's profile or like actual documents or whatever.

A

Collecting input from the end users, Now The, Logical question, which will come up immediately when somebody says this is that okay can I do choices, can I do graphical elements, can I do other question type of things and the answer I guess right now is unfortunate to know.

B

Unfortunately, no I would suggest for this one. We have not submit, but some other uh text in the button and open quick view for the more uh like reach surveys. But we are looking into providing uh more components and more flexibility in our card use as well. In.

A

Future absolutely absolutely, and that might be maybe in 1.18 whenever that's shared or maybe 1.19 or whatever so we'll we'll see whenever we will introduce additional layouts. Now, how does this look from a code perspective? If we, uh if you have code open.

B

Yeah so and I'll Focus, mostly on the car view, because this is basically what we changed and what we promoted the new way to configure uh the uh card view so uh previously before 118. What a developer needed to provide is um data getter, where he can Define like what like primary text, basic text, this kind of stuff uh he or she wants to display on the card plus. Another getter is four card buttons, where a developer uh defines all the buttons that will be available for the card view.

B

Now we are promoting new way to configure the uh compo the card view based on components and, first of all, we have this new base components, card view, Base, Class and all new cards will be extended from this uh Base Class and instead of having multiple, Getters or multiple properties. Now developers will need to override these card view, parameters getter that basically defines the whole structure of the cardio of the layout of the card view.

B

So uh what will be displayed in the header in the footer in the body and also the Properties or like data of like what the data should be displayed in this component? So, if you think about it, it's pretty similar to like um either property pane that we have in web parts and adaptive card extensions or in general, is pretty similar to how we define the properties for react component and, in my case, I, have some extra code here to basically collect information about the suggested user like job title, etc, etc.

B

But at the end, I want to display search card View and we are providing some helper classes that allows you to not like put a lot of Json a lot of properties in your code, but be as minimal as possible, and here I am Define. The defining the layout of the car, so I have card bar, which is like icon and title I have a header with my text.

B

Basically for the search in the body, I have search box, I can provide placeholder I can provide ID for the search box, I'm, providing how my button should look and what the basically not how it should look. We control how it look or how it looks for a search template but you're defining the action as we discussed. So it can be any action available in the Adaptive card extensions and for the footer.

B

This is where I'm, creating these suggested footer with the text secondary text, image, URL and, as you can see, it's not tied to um to a person or to people search. You can just provide text like my awesome document, secondary text modify date and work with or display information about the documents itself as well. So this is the new way how you define the uh templates, basically how you define card views.

B

If we look at another example- and this one is for a survey so again, I have the same base component curve you as a base class here, but instead of search card I'm using text input card view, but the idea is the same. Basically, I need to provide the layout. What exactly I want to display play in the in the card? View.

A

Really cool and that's that's super cool that we're providing that structure more efficiently directly within a code rather than assuming that people will read the documentation and change and scammers, and all of that it's basically defined in the code should be easier for developers right.

B

Yes, yes, and we are providing intellisense, we are providing type checking, so uh developers will not be able to break themselves. So it's it's pretty. We have forced uh a lot of type checking for developers, yep yeah.

A

So reducing the probability of unfortunate bugs and mistakes within the code, which is OS code, really really cool, and this is awesome stuff excellent, so that that's kind of a recapping on what's in 1.18 points, uh whatever the 1.8 in beta. So this is going to go out uh or is out as part of these announcements where, when we release the video this video as well, are we expecting to have still more layout options in 1.18 uh or are we looking into having those in the subsequent versions.

B

uh Most probably, it will be in subsequent versions. So for now we want to check on the adoption of what we are providing right now so for the search scenario and for text input. uh We want, of course, to collect feedback. What else is important, what other components? Potentially we can promote in future and yeah, based on that we'll be looking into the new components, new templates and new layouts.

A

Yeah and I can probably just tell it say in general, we're looking into having much more flexibility and more layouts, but we're not looking into opening up the car to you completely. We want to control the card view, because that is that is actually a performance uh uh uh consideration there. But if we provide sufficient amount of flexibility within the layouts, then customers and partners can make beautiful, looking dashboards for mobile and and for desktop as well.

B

A

Yep, that's true. Absolutely that's awesome, so thank you. I really, really great uh great to have a chat with you Alex, and thank you for showcasing. What's available, all of the samples what you showed are also available as open source samples within a GitHub and we'll have a reference for them within the uh within the video notes as well. But thank you Alice for this one really really cool.

B

Thank you Russell for having me.