Microsoft 365 Community Introduction to Viva Connections Toolkit, 15 Mar 2023

Previous Meeting

⏯

youtube image

►

From YouTube: Introduction to Viva Connections Toolkit VS Code extension

Description

In this video we focus on the introduction around the Viva Connections Toolkit VS Code extensions which is available for developers to improve their productivity when creating new extensibility for Viva Home and Viva Connections.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=Fs9r4dvSxU4&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=2

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Introduction
- Why SharePoint Framework (SPFx) is the easiest way to build extensibility for Microsoft 365
- Benefits on using SPFx for Microsoft 365
- Extensibility options in Microsoft Viva Connections
- Why Viva Connections Toolkit exists?
- Features and capabilities in the Viva Connections Toolkit
- What if you are already familiar with the SPFx?
- Additional resources

✨ Demo Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:52 SharePoint Framework as the extensibility model for Viva Connections
04:18 SharePoint Framework experiences in Microsoft 365
05:37 Microsoft Viva Extensibility options for ACEs
07:22 Why Viva Connections Toolkit?
08:47 What's in the Viva Connections Toolkit?
10:40 Viva Connections Toolkit for existing SPFx developers
11:30 Capabilities and features in Viva Toolkit
12:33 How to get started
13:29 Outro

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 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

A

We're talking about the Viva connection toolkit, which is a new Visual Studio extension built together with the community, to improve the productivity of the developers when they're, building for Microsoft Viva connection or Microsoft Viva home or in general for anything around SharePoint framework, so Microsoft Viva connection is the toolkit is really designed to improve the productivity and make it easier for new developers to actually build extensibility for Viva connection and for Viva home.

A

So specifically about those Ace components and Ace components are adaptive card components which are actually built with adaptive card Technologies and SharePoint framework. So SharePoint framework is the underlying powering technology around the ACs. This Ace components as well.

A

Now, let's go through a few slides and then, as part of this series, we have quite a few other videos where we are showing the Viva connection toolkit as a more detail. But within this intro video we're going to focus on positioning, why does it exist? What does it actually do and and what is the future around the Vivo connection- extra wheel, connection toolkit?

A

So let's jump right into the slides. So, first of all, a Viva connection, toolkit and those ACS for Viva connection are actually being built using SharePoint framework. That naming is a bit of a confusing thing, because SharePoint framework is not only for SharePoint. You can actually build extensibility with SharePoint framework for Microsoft Viva, Microsoft teams, SharePoint and nowadays also for Outlook kind of Microsoft, 365, app or office as well.

A

So really cool technology and the SharePoint framework name was introduced back in 2016 and it might actually get changed at some point because the scope is not just about the SharePoint, so the naming is certainly misleading, but it is the underlying technology which is powering a lot of the capabilities across Microsoft traders to file now SharePoint framework is really designed for those LLB implementation, so really designed an awesome way to build. The end builds Enterprise Solutions within a Microsoft 365. It can be, however, also used by the isvs.

A

Now, with all the fairness, if you have an existing website which are looking in the servers and for, for example, in Microsoft teams that website being host, that's like www.contoso.com and and people are signing in there.

A

You probably want to use Microsoft teams app model to integrate with the Microsoft teams rather than SharePoint framework, but if you're looking into having a native typescript and a web stack development experience, SharePoint framework is actually providing you that and then you can build the nice really Dynamic experience for the ux sign across all of those different applications so SharePoint framework. It is by far the easiest way to build your Enterprise Solutions with Microsoft 365, with automatic signal sign-on.

A

So as the users are using the SharePoint framework components within the ux they're already assigned in so they have the same, but the components has the same permissions as the user, there's no additional pop-ups or sign-ins or any of those processes in place. Everything is automatic. It has automatic hosting, which is a really really cool thing as well. So as you're deploying a SharePoint framework solution to a tenant level, the code is automatically hosted in a tenant as well.

A

That provides a security layer because the code is running inside of the tenant and also the code doesn't have to be explicitly hosted somewhere else. If you don't want to, that is an option still. So, if you're an is VE or you're a SAS provider- and you want to build SharePoint framework native experiences, you can still host SharePoint Fiverr components, JavaScript files and images, and all of that in your CDN, which you have or, alternatively, you can deploy the SharePoint framework solution directly in the customer tenant.

A

So depending on a customer Preference, they might have an opinion either way of making things happen. It provides a consistent Dev experience and using a node.js gallop and all of that stuff. So using that industry, standard tooling for web stack development, and we are hearing a lot of great feedback related on just react developers moving the Microsoft, create, sd5 and saying that well, ship and framework was the easiest way to actually to build the stuff in Microsoft 365, because again automatic hosting automatic single sign-on. It's just web stack development in typescript.

A

Well that wasn't easy enough now, as already mentioned, SharePoint framework actually provides and Powers capabilities across multiple different services within Microsoft 365. So the naming is certainly a bit misleading. It started as a SharePoint framework solution for SharePoint. Then it extended to be supported also in Microsoft teams. So Microsoft teams was a supported option. Then it extends to Microsoft Viva and Microsoft Viva connections and we have a home and we're looking into extending that to other VMware modules as well.

A

No announcements at this video at least yeah and then pretty recently as part of ignite 2021 announcements. We actually announced SharePoint framework to be available also for Outlook and Microsoft 365..

A

Technically, this is really cool, because now you can have a one component which you built and then you can actually expose the exactly the same component in SharePoint in Microsoft teams in Microsoft Viva in Outlook and a master Trace is Fafa and in your code, you're, able to say okay, where am I being hosted, oh I'm, actually being exposed in the team. So therefore I will a big change. My rendering logic if I want to- or you can render the exactly the same logic and you'll- have access on the service specific apis through that model.

A

So really really cool and modern way of doing things, controller applications single sign. We talked about that one already automatic hosting and in the standard tooling, so we mentioned already in the previous slide now. If we then think about what is the Viva extensibility, we mentioned the Viva connection we mentioned Viva, home and Viva. Home is something new which was announced again on November 2021, opposite October anyway, in ignite 2022, no 2022, not 2021 2022 uh in Econo 2022, and so my accessor Microsoft gave a home will be the default starting point for Viva module.

A

So the intention here, which you're seeing on the left side of the screen is that there's going to be a native mobile experience for first-line workers and you can easily access all of this information through your mobile device or your tablet device or if you are in a desktop experience, you can actually access that same experiences within the desktop experience and you can see those individual cards and those are Ace components. So those are adaptive card components which can be created and customized and modified using SharePoint framework.

A

The right side of the picture is showing you Viva connection, which is something which was released: 2021 November, um so you it. Basically, provided a baseline for the Viva home, and now you can actually combine all of this starting from 2023. and for the actual Ace creation. That's what Viva connection toolkit is all about. So how do we create those card? Adapter card components? How do we make them work? How do we, when we click a button? How do we hit a graph API on Surface information?

A

How do we hit a lob apis or how do integrate, even in on-premises directly from a mobile device um to get access on information through Azure channels and all that stuff? So that's all possible with SharePoint framework, which is powering all of that access and hosting behind of the sales?

A

Now, what did we actually create the Viva toolkit? Well, the the point here was really to simplify the getting started so there's a lot of new people and partners and and developers coming into the Viva Microsoft Viva world, because Microsoft web is extensible, so we wanted to make sure that it's it's as simple as possible and there's a lot of lot of visual uh code extensions available. So we wanted to create an extension together with our community members to make it easier to get started on creating those River components.

A

We wanted to have an automatic setup because quite often uh the setup of the Enterprise environment, your development environment, is the hard thing so making sure that all of the dependencies are in place. So you look, you can click a button and the button says: oh you're missing this node.js version or you're missing this bucket. Let me fix that for you and then it will make everything available for and that's the environment verification you can also start from a sample or a scenario, and those scenarios are actually even with the code tour.

A

So if you start a is a real creation of a solution from a Microsoft craft scenario, we will call out the different pieces of code. What you need to consider and what's happening where and what you can change to make that Ace to work on potentially and against another is another Microsoft graph API. So really. The objective here was to simplify development, to make it easier for the developers to build and create experiences for Microsoft Viva.

A

Now what does this actually contain? So what are we actually providing? There's some pictures on the right side, which are actually showing you some of the pictures and capabilities in place. Some of this we already mentioned, but really this is for pro code developer, tooling, the simplify development validation, purposing of custom, Microsoft, Viva experiences within your tenant or potentially also why not in the in the actual store in appsource.

A

So all of the you can use the Viva toolkit to create your Solutions and then expose them to be available through appsource for all of the other customers who are building or using Microsoft fiber experiences. We have Quick Start experiences so making it super easy to get started on things. It builds and debug with ease. So there's an easy way of actually associating your development experience to a tenant, so you can easily see and access your app catalog where the where the deployments are happening, you can click of a button.

A

You can actually deploy Your solution to the Tenon. You can either start debugging, you can either start testing things and, of course, behind of the scenes. The SharePoint framework is providing the automatic hosting so there's no costs or complexity or maintenance or operational challenges. On hosting your code, everything what you deploy as a SharePoint framework solution is hosted for free without uh without any complexity of operations and without complexity of getting that website in place in Azure on the customer, tenant Azure, and maybe that works for some customers super easily.

A

Maybe for some it's much more complicated, but SP effects. You don't need to worry about it at all right now, uh this the solution is in a data or preview status, and so we are collecting feedback. So if you have ideas how to improve that, we would love to get your feedback around the viewer Viva toolkit to understand how we can improve that even more now, if you are a developer, who already is familiar of using the SharePoint framework, human generator? Why would you use this? Well, you don't have to.

A

You can still continue using spfx human generator and CLI for Microsoft 365. So the toolkit is an overlay, an abstraction layer on top of those two tools, so there are no additional actually tricks or hidden capabilities or anything everything. What you can you would do with display effects and CLI from Microsoft 365 in command line is basically what the tooling is doing. So it's an abstraction layer and and again you don't have to use it. If you don't want to, if you're familiar with German generator with spfx sure you can use that as well.

A

What we wanted to do here is really Target the new and inexperienced developers who might not feel familiar with spfx human generator to start using that so what's available and there's a connection or signing in against your develop return on, so you can do easily operations directly in Visa Studio code against the tenant. So you can deploy the solutions you can open up the tenant. You can open up the app catalog easily and access points. There's an environmental validation which we talked about installation of technical dependencies solution updates with CLI for Microsoft trades sd5.

A

So, if you're looking into, for example, updating from a previous version of SharePoint framework to a latest version of SharePoint framework, you can actually use the tooling for that as well again behind the scenes, it's using the CLI for Microsoft 365, and it will give you the insights on how do I upgrade the latest version. This tooling also works in any SharePoint framework solution so that those quick buttons and access points to against the tenant.

A

They are actually available in any SharePoint framework solution, not only within the Adaptive card Component Solutions, because it is a SharePoint framework solution. It works in the same way for Microsoft teams, for Microsoft, Viva, Outlook and chat point, and so on. Now, how would I actually get started on this? The vs code extension is in the vs code extension Gallery. You can easily access that by https akms Diva code. It is currently in preview, hopefully we'll look at it in uh production.

A

uh Yes, as part of this testing sequence, so we're looking into getting your input from this. Is this valuable? What you want us to update and what are the things you would like to see in general, around the Viva connection, toolkit development, looking into getting that feedback directly in GitHub, so github.com vs code Viva, and we actually do welcome contributors. So if you are familiar about extension development for Visa Studio code, we would love to get you involved on on potentially maintaining or adding new features directly into extension.

A

Of course, the most important thing is the feedback. So please, let us know what works and what does not actually work cool. So that's actually a quick intro on the Viva connection, uh toolkit for visual studio code and hopefully, you'll find the tool interesting, as mentioned so many times, the feedback, the feedback to feedback, we're recording this video in January 2023, because we need to remember that it's right here and we would love to get your feedback to understand. Is this helpful if you would like to have something useful and additional features on it?

A

What else we would like to see how we can make your life easier to build this experiences? So please, let us know through social media channels or adding uh adding comments directly on the issue list on the project. Super super, valuable and looking forward to engagement. Thank you. Thank you. Foreign.