Microsoft 365 Community Community Demos, 15 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Latest on building Microsoft Viva extensibility with SharePoint Framework

Description

In this 13-minute Maker/Developer focused demo, Vesa Juvonen delivers an update on SharePoint Framework and Microsoft Viva - Viva home (desktop) experience and Viva Connections (mobile) experience. Cover off on segments - We’ve built a Teams app, what’s next? Quick operations using the ACE Quick View, Expanding from Teams to Teams+Viva, New partner opportunity – Viva apps in the Microsoft Store, and Future - ACEs, templates, card sizes, and UX capabilities.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 16, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - New experiences for Viva Connections are now rolling out | https://techcommunity.microsoft.com/t5/viva-connections-blog/new-experiences-for-viva-connections-are-now-rolling-out/ba-p/3729071
• AppSource – Microsoft Viva | aka.ms/viva/store

All Developers
• Documentation - Start using Viva Connections | aka.ms/Viva/Connections/GettingStarted
• Documentation - Start a Solution | aka.ms/Viva/Connections/Platform
• Documentation - Design Guidelines | aka.ms/Viva/Connections/DesignGuidelines

Teams Developers
• Documentation - Enable SSO for your Teams App | aka.ms/Viva/Connections/Teams/SSO
• Documentation - Enable deep linking | aka.ms/Viva/Connections/Teams/DeepLinks
• Documentation - Consider Message Extensions | aka.ms/Viva/Connections/Teams/MessagingExtensions
• Documentation - Consider Stage View | aka.ms/Viva/Connections/Teams/StageView

Jump Start Development
• Documentation - Training | aka.ms/Viva/Connections/Platform/Training
• Documentation - OSS Samples | aka.ms/Viva/Connections/Samples
• Documentation - Plug into Community | aka.ms/community/home

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

A

A

Microsoft Viva extensibility with the SharePoint framework and we're going to talk about what's happening there now. First of all, SharePoint framework. uh It is the easiest way to build your Enterprise Solutions um within the Microsoft 365, and it is evolving. uh It's already used by tens of millions of monthly active users worldwide and it has been, has been really uh well. The growth has been phenomenal from an adaption perspective.

A

The beauty of the SharePoint framework is that you can actually build the SharePoint framework without worrying about single sign-on, without worrying about where the code is being hosted so, uh which is almost the same thing as per platform, but if you're building a scenario or hosting something in Azure that might get complicated for some of the customers or for you for your company as well, depending on scenario. Of course, it has consistent depth scenario using typescript and web stack development tooling, and it's using the industry standard tooling, as mentioned now on the previous demo.

A

Within this call, we saw a live demo on chair is chair at SDK. Live share. Sdk live share, SDK as an example is completely supported to be used with SharePoint framework with the latest version of 1.17.x.

A

So it's evolving all the time and the beauty of SharePoint framework is that you can use the same extensibility model and the same code cross multiple different application across Microsoft 365 and you can build event SharePoint framework Solutions, using teams toolkit you can build it using SharePoint framework, human generator or you can use the Microsoft Viva toolkit as well, which is a Community Driven, Visual, Studio code extension. So there's a lot of option, A lot of commitment and a lot of scenarios, and the key here is the reusability of the code.

A

So you can actually use the same code, same experience across multiple different applications, not only just in SharePoint, but also in teams, also in Outlook, in Microsoft, 365 app and in Microsoft Viva, which is the topic of this demo. Now, just a quick recap on what is the Microsoft V1, and this is an integrated employee experience platform which empowers people and teams to be their best. That's a really really nice marketing statement, but basically it is an employee experience platform providing you a set of modules. Some of those modules are free.

A

Some of those modules have a license Associated to them. There's also the Viva Microsoft Viva, the family, licensing behind the scenes. I'm not going to talk about Licensing in this call, because it's also a bit complicated topic always, um but you can use SharePoint framework to extend especially Viva connection within this all up.

A

Microsoft scenarios and Viva connection is also the home of Microsoft Viva, and we will see that within the upcoming slides and also within a demo so depending on which Viva modules you have actually bought, you will see those modules to be available within Microsoft Viva connection, and you can actually see the capabilities lighting up in the Microsoft viewer connection for both desktop and a mobile workers, and the mobiles and scenario here is the key.

A

So the Microsoft V1 is also targeted natively to support Frontline workers who might not sit in the front of the desktop computers, uh eight hours in a day or throughout their working day. So it's really flexible platform. Adapting based on the end user, based on the device and what is available, and you can extend that and you can extend that using SharePoint framework, as mentioned now. What do we have on the Viva home or Viva connection? So this is the Viva connection. uh This is a kind of a graphical uh view.

A

On that uh sorry, a picture view on that we will show I will show a live one, but I will call out few things from here. So, first of all, uh the Viva connection will be the home experience. It will have the header section, which will include all of the different Viva modules based on the licensing which have been both to this particular channel, so you can easily access from one centralized location. uh All of the Microsoft people.

A

Experience is directly within the Microsoft teams, because Microsoft Viva Builds on top of Microsoft teams and it actually from an extensibility perspective. It's really there to drive adaption of Microsoft teams platform as well. Now. What we also can do here is that we can design our personalized company specific dashboard, so a mobile experience and mobile targeted experience, which also is available in desktop, so you can design what are the? What are the cars and experiences? What are we exposing here?

A

You can actually Target those based on a role based on the other attributes of the of the user as well, so the managers could see a different set of cards than the employees who are employed within the company, and then we also have the feed, which includes SharePoint stream and Yammer content personalized for each user, so, basically being a one feed where you can see. Okay what's happening within the company. Oh that's a really cool thing, and somebody created a new news.

A

Article or new content in somewhere I can go easily and access that I can like the things. I can bookmark items from a feed as well, and then we also have the company resources available uh within this home page as well. So we can access the isolate the main frequency of sites. You can access these like the followed sites and also of the company resources from a mobile friendly experience.

A

That's actually really really cool and, if you're looking into getting more on a SharePoint portal and Global portals disorders links into the uh connected liver connected home site, so you can access the SharePoint portal and a global internet directly from the Microsoft Viva connection experience as well.

A

Now, as we start designing experience and extensibility for that dashboard area, explicitly you're, seeing those individual cards and Designs there, where this works in a way that we provide you a set of designs by default or set of layouts for those cards which you can take advantage right now, the set of layouts are bit limited, we're looking into adding additional layouts in future I'm, going to show some of that as a teaser within this quick demo as well. But basically you design a what's. What is the card? What is the thing?

A

What is available for end user and, of course the card can be completely Dynamic. It can change the image it can change the text dynamically as well, and then the question is what happens when I click the button when I click the button? We have a flexibility of using adaptive card experiences of Designing, a really kind of a quick view or quick operation which are visible for the mobile or desktop experiences and I'll show this one in practice in the demo.

A

So it makes more sense, but basic idea here is that, rather than redirecting the U user to a complex Microsoft teams, application which has too many operations too many things with surface cards which are targeted for the operations relevant for the role, and let me actually explain that a bit. So if you have a explicit, if you have implemented a Microsoft team solution, explicit solution for explicit scenario like in this case, we have a Microsoft team solution being accessed through desktop and also through the mobile experience in your company.

A

You might have actually tens of Microsoft team solution, hopefully in place, and as you have this solution, you can start designing what would be the suitable cards for the dashboard so that I within the company Mobile portal and in the default welcome page the Vivo connection page, we can actually surface the relevant information based on a role and based on the behavior. What we want so rather than always saying well, you need to find a solution. You need to go to the solution and click a button there.

A

We can Surface the relevant actions and the quick actions directly within the for connection and then the quick view is there to give you the relevant most common action, rather than redirect forcing redirection to the Microsoft teams. So that's kind of a cool way of of having the mobile first experience within a mobile and again I'll show that one in practice in a second now what's new in here, is that we do have a new partner opportunity.

A

uh So pretty recently, starting a few weeks back, uh we can actually expose also Microsoft Viva offerings directly within the app source so in the Microsoft store. So as long as you build a SharePoint framework solution which has a which contains an ace, that's an Adaptive card extension which is targeted for Viva, and it will automatically be listed under Viva section in the marketplace and we're seeing more and more application providers in here, which is a great um any existing solution which is in a store, however, needs to be re-submitted.

A

So basically, this detection of that component type happens as part of the submission Pipeline and that's why we see a bit less listed in here than in the SharePoint store from that side. But this is a really great cool new opportunity for Developers, really quick demo on the Viva within this Microsoft team site. So in here we're in Microsoft teams and Viva is really. The max of Viva is really there to provide you.

A

The corporate landing page, which is again personalized based on a role personalized based on the company, so I can I can easily modify. For example, the section I can change the image to be based on my branding in the future. We can do more branding elements in here as well. I can, of course, modify the dashboard based on my business requirements and based on the roles, and here I can go to my dashboard designer and, let's actually add a one example.

A

Dashboard, which is retail uh inventory in here, for example, for the Frontline workers in our company. Let's say imaginary contoso retail company, which is having many many stores and the clerks within the store, are connected to the company Communications through a mobile phone and the teams rather than desktop. So let's actually give them the targeted experience uh within the retail within the mobile experience. So that's the retail experience. Let me republish and basic idea here is that from the desktop I can get access on the information I can list.

A

For example, the the information uh relevant for the business or, if I'm in the desktop I, can of course use the full Microsoft team solution as well to get access on the inventory. But again, the most important thing here is not remember that it's all about that mobile mobile experience as well, so taking into the account those mobile Frontline workers and making sure that our employees in the desktop and our employees.

A

It have the same experience so here we are in Vivo connection here we are in Viva Connection in the mobile phone and mobile experience, and you can actually see the same dashboard to be available, and these are the quick views and quick cards available in my iOS experience. So this is actually the mobile experience which are recorded directly from my mobile phone.

A

So this way you can actually provide that connection for the Frontline workers and people who prefer or who views mobile phone to get connected on company assets, rather than always assuming that they have a desktop because that's not always the case, help desk submission forms.

A

All of that would be a great examples of of providing in the Viva connection and all of those cards, as we can see here, can be built using a SharePoint framework I'm not going to Deep dive on how, because we do have a lot of assets available on how in our documentation, but a lot of a lot of cool things and options to get started on building things now, I will get one more in here from a timing perspective. We are pretty short.

A

We will talk about the future of Asus and Viva and all of these options, more detailed and upcoming calls as well for sure, but we're looking into providing additional card types. We shared this one first time in Las Vegas a few weeks back so we're looking into having, for example, a textbook search options directly within a cart view, also a large cards and a graphic cards uh and charge cards directly within the Viva collection.

A

So you can actually build much more uh compelling and dynamic dashboards, which can then link to Microsoft teams, application or power apps natively supported directly in the dashboard as well. So if you have a set of power apps within a company, you can easily collect them to be available in the dashboard and targeted them based on the roles and profiles and then get them visible for users. So really really cool scenarios and more to come in here as well. Now, there's a lot of a lot of things available and assets available in the Viva connection.

A

Extensibility. Thank you. David just shared links a lot of assets, a lot of information, but if you're interested on, please have a look on that and we're always interested in all so on your feedback. What is what you need to get started and- and maybe we should be covering a bit more detail again. Those scenarios within this weekly call what we can provide within the dashboard and how things are working foreign.