Microsoft 365 Community SharePoint, 6 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to Microsoft Viva Toolkit to kickstart your Microsoft Viva extensibility

Description

In this 15-minute developer focused tour, Vesa Juvonen highlights synergies between Viva Toolkit & SharePoint Framework (SPFx) – community created pro-code developer tooling that simplifies development, validation, and publishing of custom Microsoft Viva experiences. Toolkit features include connection between Visual Studio Code and tenant, environment validation, installation of technical dependencies, solution update with CLI for Microsoft 365, start from scenario or sample, CodeTour, and it works on any SPFx project! Create a Viva Connections project from scratch, from a scenario or from an ACE sample. Alignment to Teams Toolkit. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 6, 2022.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Marketplace - Viva Connections Toolkit (Preview) | aka.ms/viva/code
• Repo - Viva Connections Toolkit for Visual Studio Code | https://github.com/pnp/vscode-viva
• Feedback – vscode-viva/issues | https://github.com/pnp/vscode-viva/issues

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/m365/community

A

A

I wanted to talk about an introduction to Microsoft Viva toolkit, which is there designed to kick start your Microsoft Viva extensibility experience and I'm going to talk about that. The positioning. Why and how? And what does it actually do? The SharePoint framework is really intended to be the easiest way to build your Enterprise solution for Microsoft trade list, five using Pro code methods. So, of course you can create your Enterprise Solutions using Power Platform. That's absolutely an fine option as well, but SharePoint framework is standard for pro development.

A

Power Platform is for no code, low code options and really the the benefits is the automatic single sign-on automatic hosting, which is by far the most widely uh let's say, raised benefit, and actually one pretty recently raised. Consideration was that many of our partners are saying that customers are willing, rather than rather willing to your SharePoint framework, because the code is actually hosted within their tenant, so you're not accessing or allowing an application externally from Azure or AWS accessing your tenant. No, no.

A

The code itself is hosted in the customer tunnel, so it's super secure compliance and everything else taken into account. Consistent development experience- and it is industry, standard, tooling, using typescript and web stack development and like uh like we covered already in the past as well, uh using the SharePoint framework. We can nowadays do much much more. So it's not just for SharePoint uh it's for Microsoft Viva. It's for teams, it's for Outlook and Microsoft 365 and actually even more, is coming.

A

So there's a lot of a lot of cool stuff uh in the roadmap and in the pipeline. Now, in this case, we want to talk about the Microsoft, Viva, extensibility options and and I wanted to actually do some graphical, slides first to to Showcase one of the explicitly talking here. So the Microsoft Viva toolkit is a visual studio code extension which is targeted to simplify the micro, favor extensibility, so creating these Asus adaptive card components which basically are those card style components which you can see in the Microsoft.

A

Sorry, the Viva Home on the left side or in the in the mobile experiences or in the Viva connection experience on the right side. So you will see us rolling out the Viva Home gradually and then, of course, we have this same card. Same extensibility options same Aces and option to do mobile desktop tablet. Views are coming pretty soon and all of that stuff. So there's a lot of a lot of benefits, a lot of investments from the Microsoft side around these Aces.

A

Now, as you use SharePoint framework to build the Microsoft Viva extensibility, why did we actually create the Viva toolkit now? A lot of the partners who started building extensibility for Microsoft Viva? Don't necessarily have a previous knowledge about SharePoint framework. Our previous knowledge about web Parts previous knowledge about Microsoft 3 is 65., so we wanted to actually build a tool which simplifies the getting started and experience.

A

So you can basically just install the tool from the resource to regular code extension gallery and it will help you to actually get started, so it will show you how to get started. It will link to the docs. It will check your environment, it will automatically install all of the the dependencies and those are really important thing for us, as well as a Microsoft, because quite often, as we see in the SharePoint framework issue list where people are having issues, those issues are quite often related on environmental setups or some dependencies are missing.

A

So we wanted to have a tool which will make it easy for any developer, just click a button and it will install the needed environment variables, environment, setup and it you can always check that this environment ready to go or not, then it will actually fix itself as well. We also wanted to provide a sample and scenario based start.

A

So, basically, if you're looking in the building an ace, an Adaptive card extensibility for Viva, which is connecting for craft, you can actually select that scenario as a starting point and you'll actually have immediately a solution which is connecting to the graph with code to our step-by-step guidance. So you will be explained. What are we doing in the code and and then basically explained how to get stuff done so objective here is, is really the simplify development.

A

Now there is a slide for this one uh in the in the later starts with so, but I wanted to maybe mention this one already in here, so one if you are familiar with SharePoint framework, why would you use something like this as a visual studio code? Well, you don't have to this is completely optional, and this is something which overlays automation from the Yeoman generator from the the SharePoint framework element generator, which we as a Microsoft are providing and CLI for Microsoft 365..

A

So all of the features and capabilities what you see within the Viva toolkit these are already available in GA, either from CLI from Microsoft 365 or as I shipped SharePoint framework German generator. What it does, however, do is that you don't need to remember the commands in the command line. If you do orkit, you can keep on doing the command line, but for the new developers this is really intended to make it easier for them to get started easier to get access on the, for example, just where's my app catalog in this thread.

A

Well, you can just click the URL and it will get opened within the within the browser so really trying to simplify the development experience um and, of course, we're trying to make it easier for everybody to deploy test and automate, have the documentation in place and make it make it super super sweet I will show a lot of the stuff uh in live demo, as mentioned I know, if you already know the Yeoman General by which I've used this you don't have to you.

A

You definitely don't need to use this toolkit if you don't want to, and what what I'm, seeing even in my personal usage is that I well it it actually starts helping me. It's I can quickly go and test the extension click a button and if we'll do some things rather than going to the command line, it's a matter of a preference behind of the scenes again, it's always using the official Yeoman generator or the CLI for Microsoft 365. So it's not doing anything which anything's surprising it's just this simplification abstraction on the water command line.

A

Now, what's available within the viva viva toolkit, we have a connected connected to your tenant option, so you can actually easily see operations and the URLs within your tenant. So you can sign in against the tenant. I'll show you that one in practice, you can do the environment validation, which is super important thing as well. We mentioned already so double checking that I have the required dependencies in place and all of that stuff I can install the the dependencies.

A

So if something is missing, I can click a button, and if the tooling will make sure that my environment is ready to go, which is super super cool, it does uh support updating of the solution with CLI for Microsoft 365. So again behind us the scenes. A lot of this automation is using the standardized command line tooling, which you would be using anyway, but it's just behind of a button behind the clicking. Click click through start from Scenario sample, which is really really cool.

A

You can see an example related on call Microsoft craft to get data in a code tour step number three. So basically, we have a step-by-step guidance, which is explain laning. This is what we're doing here. This is why it's important here's additional information and this actually works in any SharePoint framework project, which is quite interesting.

A

So of course we prioritize the Viva with this one, but if you open the Viva toolkit in top of in a solution in a solution folder with SharePoint framework in it or SharePoint framework solution, it actually gives you already additional value and I'll show you that one in a second as well, so it does adapt on any SharePoint framework project. Let's have a look on this one in practice, so, let's start by looking into. Where can you get it? uh It is still in preview and it's been available for a while.

A

We haven't actually promoted this too much, uh but we wanted to actually do a recap on the promotion and then see uh when we will actually release the 1.0 version of this. Now this is community created we as a Microsoft. We do coordinate some of this work. We help with the work, but there's it's primarily led by the community, which, by the way, is open for contributions.

A

We'll come back on that one in a second as well, but we want to make sure that this is an open source project where anybody can actually come and provide their contributions and- and you can see openly what's happening within this- it is an overlay on top of the human generator and the tooling as mesh. Now, if you go to the visual studio code, extensions listing and you search for Viva, you will actually find that this one as the default entry there.

A

You will need to do install the preview version, uh because there is no release version available at this moment, so you can already use it and it is safe to use it. So it's basically again as it's an overlay on top of spfx.

A

There's. No additional gimmicks there's no additional operation, what it actually is doing behind the scenes, so it's it's actually safe to be used even in production usage. So it's pretty radical, but officially we want to still test out things and make sure that it's super polished before we release a 1.0 version of this tooling. Now, as it's being then installed, it's actually visible right now, as that icon on the left, menu will probably change that a bit the icon.

A

uh Whenever the the timing well I'm going to have time to do that, and if I click that one we can actually see the main operations which are available uh with the Viva connection toolkit. So it is adapting similar way, as the teams toolkit and I'll come back on. What does that mean in practice in the future? Now we can start creating a viewer connection project and it will actually start going through the Yeoman generator question. So basically, whether we want to save this, what is the name? What is the solution?

A

All of that stuff one option or, alternatively, you can actually create from Scenario, and these are the code tour scenarios provided by us by waldek, while they already did the previous demo today, which is cool. Thank you, Walter doesn't work on this or you can actually have a look on The, View samples, and these are the ace samples, adaptive card samples which are available, and you can actually start from any of the access to example.

A

As you download the sample down, it will automatically update all of the goods and settings and everything else so that the solution which you created is not hard copy of the sample with the same matching solution, IDs and all of that. No, no, it's actually a fresh new solution with that code, which is in place, so it really makes it easy for you to get started on on top of any of the existing sample, which we have available or I can actually check the dependencies which is really cool. So I can double check my environment.

A

Quite often, people have whatever confusion versions or whatever is available and I can I can double check this anything. My environment is ready to go and you can actually see the messages, then that well in my case, I have obviously everything installed and then, as I said, I can start from Scenario and create the solution. Now, in my case, I already created the solution to save some time and the solution is already available here. It is a typical, a solution open in in the right side and, of course, like it, is a typical spfx solution.

A

Again you can use terminal, you can use your command line, but if you want to, you can go to the extension and then it will give you additional set of operation as an example. You can sign into your tenant and after that it will automatically detect where the app catalog is and if I need to open up the app catalog I'll. Just click to you, click the URL and voila I'm in the app catalog. So I can easily operate between my development.

A

My experiences, all of that I, can easily do a deployment of the solution which will automatically deploy that to the app catalog. It will detect automatically things we can do upgrade solution. Technically right now, there's a small delay because of dependencies of versions with CLI for Microsoft 365, but that's that's, working as well and I can easily access the documentation and samples an electric card designer tooling, as well so making it super again easy for developers to do this.

A

Now we're not going to spend too much time from a timing perspective in here, but what I wanted to actually show is this one um so uh and we'll by the way, have a lot of lot of lot of lot of more samples available and videos around this tooling pretty soon, but as an example, the code which, while deck showed you was the spfx productivity, yeah I, know I, know that the point of this one. Thank you valdek for being me, uh point is not what's on the code uh what's on that screen.

A

So that's why I didn't actually increase that but fair point now the sample which Wildlife showed us is an spfx solution, and that was a wet part with the team's part it with the Manifest and and all of that stuff. But this is a bit of a different. uh Oh, it is actual manifest version. 1.14 now, what's really cool about the Viva toolkit is that it actually can be used with any spfx solution. So let me actually go one step back. Whenever the extension starts there we go now.

A

We can actually see it and I can activate that and voila I have detection of my tenant detection of app catalog I can do bundled the packages. I can do all of the different operations uh to any of the spfx solutions as well. So it's not just about Viva, but it is primarily designed for increasing the Viva adoption or making the Viva adoption easier.

A

Now from a tiny perspective, like I, said, I'm not going to go too detailed on the scenarios I'm going to add this to be more kind of an intro on what we have and what's available and how to get started. But then the question might be what about alignment with teams toolkit? Yes. So what we're doing here is that we're basically doing a piloting and a proof of concept with Weaver toolkit.

A

In a longer term, we are already aligned with the team's toolkit people that some of these learnings and some of the techniques, what we're doing here are getting hopefully integrated in teams toolkit and then the teams called it toolkit is extending for the Microsoft Viva as well, so making it kind of the one unified development story for Microsoft 365.

A

So Our intention is not to provide a competitor rather as a incubation tool, a testing tool and to see is there a demand for this kind of tooling for spfx, more efficient spfx, all up for all of the spfx scenarios and for Viva, and then we'll adapt all of those learnings directly in the teams toolkit based on feedback. Now, how would you get started on this one? A really simple, URL akms forward, slash Diva, forward Plus Code. That is location where you can actually find the extension. It is in preview.

A

You can use it in production because it uses puffless displayfx version behind the scenes. Again, it does not do anything uh crazy or hidden things. We would love to have feedback and issues reported at github.com, PMP, slash vs code Viva, that is the actual location and a project where this is done now. This is an open source, Community Driven project, so we would love to have your contributions and ideas and feedback shared and then we're looking into establishing a maintenance team together with our community members as well.

A

We'll talk about more on that, most likely after the holiday season. As we get more videos out about this one, and then we establish the maintenance team in space. If you're interested on doing this kind of a vs code extensions, we would love to get you involved in this project as well.