Microsoft 365 Community Community Demos, 11 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to new Viva Connections Toolkit VS Code extension to streamline your development

Description

In this 17-minute developer-focused demo, Elio Struyf unveils after months of work, the preview Viva Connections toolkit, available now. Streamline your development process. See how to access and install the pre-release version of this new toolkit. Create a Viva project from a clean slate, from a scenario with CodeTour guidance or from an example (sample). Check for and install dependencies (Node.js., npm, and npm dependencies). Please try out the toolkit and give us your feedback please. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 11, 2022.

Demo Presenter
• Elio Struyf (Struyf Consulting) | @eliostruyf

Supporting materials
• Tools - Viva Connections Toolkit for Visual Studio Code | https://github.com/pnp/m365-hosted-apps-vscode
• VisualStudio Marketplace - Viva Connections Toolkit (Preview) | https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit

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

Hello, all I'm going to do an introduction on the fifa connections toolkit which I've been building for a while now and finally, we can show it it's still in beta or preview, and we want to have some feedback from you using it from what we can extend and so on. So let's get started.

A

Okay, so who am I I'm elio, I'm currently working for rapid api, which does everything around apis? I do a lot of extension development in ps code these days, so I'm also the lead developer of devtools what they call it in a rapid api. If you want to find me all the details are here, but let's just dive into what is the vivia connections? Toolkit there's quite a lot of toolkits, but the viva connections toolkit is created for viva connections. It's an extension that is created for visual studio.

A

I already mentioned that it's currently in beta and you can start using it with the guidelines that I'm going to give you. So why is it created? It's first created for streamlining your development process. We saw that there's quite a lot of people that don't know how to start doing developments with fifa, but also making it easier for them to start using viva or to start from a sample or by scenarios to learn from others.

A

That's where the project is going to help you a lot and over time there will become more and more features available. So right now you can start using it to create and manage your projects and learn by couple of scenarios that are already there for you straight from the start or start by a sample that somebody else created from the community.

A

So installation process is pretty simple. You can actually go to the marketplace from vs code and there you can look for the viva connections, toolkits extension or you can open visual studio codes and then from the extensions panel. You can push the button and search for viva connections toolkit and then you can install it. There's one quirk which I'm going to show you in this demo, because it's a preview, you actually need to install it from a preview.

A

So that's one thing that I'm going to quickly highlight over here, so here I am in my visual studio, codes, clients or editor, and if I look for viva I I already find the visa connections toolkit over here right now. You see that it's version 0.0 and then a build number that we added. If you install or click on install, it will say: hey, there's, no main version, that's because it's a pre-release and we haven't released a final version yet so the first time.

A

What you need to do is click on this arrow and then install pre-release version.

A

That's it it's already installed. So that's a good thing. So from the moments you did that over here you see a pmp vs code logo and then you end up on our welcome experience. This welcome experience will be shown when you're not opening an spfx project, so the moment you're in an spfx project. You don't see this kind of welcome experience anymore. This is only created for you to get started with a new project creation.

A

So what can we find here is a couple of things so on uh above uh you will find how you can start creating a viva project by just from a clean slate or from a scenario or from an example or sample. You can also open the folder if you already have a project or you can actually check your dependencies because for viva connections you need to have a couple of dependencies like you need to have the omen generator, because this extension still use says the yeoman generator.

A

uh You also need to have uh gulp and swan in order to start running these processes, and we made it pretty easy for you. So if you just click on check dependencies, hopefully for me it's it works out fine, so everything is there. If not, it will tell you what is failing or it will tell you hey note is not correct or maybe there's a missing dependency, and then it will give you a message like do you want to install these dependencies? You can also click on install dependencies over here.

A

If something ever goes wrong with the extension, you could click on control tactic to open. Actually this pane at the bottom and then go to output and find viva connections toolkits in the output and there you can actually see what it does so for every kind of action. There's a couple of things that it will do so for the check dependencies. It checked the note version it checked.

A

If npm was there and then also it checked for all the npm dependencies that you need to have so apparently we have all of them, so we can actually start so, let's start with a new project. So as it's aviva connection project is going to ask me: where do I want to create it? I already created a main folder.

A

If you want, you can just select another folder where you want to create it, so I'm going to create it in the pnp viva folder and then I'm going to say, viva demo community called it's going to ask me: do I want to create basic image or primary, and so I can just say primary and then give this a name or hello. World is just fine, it already exists, so let's say one two three and what it now does.

A

It creates a project and once the project is created, it will also say hey it's cool, but I saw that you haven't uh installed npm or the dependencies yet so it's going to do the mpm installation, I'm just going to skip this, because this is going to take a little bit more time.

A

So what I'm going to do is I'm just going to open a new folder where I haven't done anything yet apart from installing it so once this is done and you go back to the pmp vs code panel now the welcome experience is gone and you have a couple of other experiences or actions that are now available. Let's focus on the above one, so the above one is the account, so what you can do is sign into m365.

A

So if I click on that button- and I say I allow this what's going to happen now- is it's going to use the microsoft 365 cli in order to authenticate so behind the scenes we just use the same cli that gary was showing before we, I just updated it to the latest version. So all the things that are possible could be possible within this extension.

A

It's a code flow, so I get a code and the cool thing is the extension will will just open that window, but also the code will already be copied in your clipboard. So the only thing that you need to do is paste it. Now that I have a new project, I logged in.

A

There are a couple of validation, steps that are going to happen and one of these validation steps is, it will receive my sharepoint or the main sharepoint site, but also the main sharepoint app catalog site. So, if I'm going over here, so that's my sharepoint site and that was my main app catalog site. So as my sharepoint site is different than the placeholder that is being set in any of the configuration files. So if we go to the config file and let's say surf, I apparently already clicked in this one before so.

A

I actually definitely did that. Is there like.

A

Did I already click it? Okay, apparently I already clicked, but what it's going to do if there are like insert the initial page if this is set to the placeholder url, which is, I think, uh put your sharepoint sites url here. That is the actual placeholder. Then you can just say. Yes, I want to update this and then automatically it will update this particular placeholder and then it matches the one that you currently are logged into, because that's pretty easy to start running the next tasks and the next tasks are, for instance, serving it.

A

So if I click on serve, it will automatically spin up the gulp serve command.

A

And then it actually knows where it needs to go and if everything works out here is my hello world adaptive card that is being added within my project. So this is what it can do and there are a couple of other things like. I can cancel this and then I can start bundling it locally.

A

And locally means that you're just going to use the local host version and production means that you're going to use the production version of your package, so now that I packaged it, bundled it and packaged it locally. There is now a viva connection, spf sppg file available.

A

If I close this task and I go to actions inside actions, there are a couple of other things like deploy the solution so deploying the solution.

A

If we go over here- and I go to my app catalog just to see that I'm not cheating so there's no file there yet so, if I click on deploy the solution, it says say: this solution has been deployed. If I'm going to refresh this over here, there's now a new file that is being added. Fifa demo there's one thing that is not yet available here is the sync to teams. So, as there is no api that we can actually use from within the extension, this is something yeah. Sorry, that's not!

A

Yes, I use the old experience. I don't. I don't even know how to enable the new experience, because I've not been there for quite a long time. Apparently, so I didn't even know that there was a new experience, so play me. So that said, all the experience still works and it shows my file.

A

But what I was saying is in the here the sync to teams. Normally, you have to click it. This is still something you need to do. Hopefully we get an api for this that we can actually start using from within the extension or from within the cli, so that we can also automate this as well.

A

So what can we do? More? Gary was already mentioning like validating the current project, like with the cli doctor or the cli spf x, doctor command same thing. We do here behind the scenes or we use the same commands. So if we click on validate current projects, it's actually going to run that command and then going to say, hey cli didn't find any issues with your project, because I just created the project. We can go to outputs and we can also see the same thing over here.

A

You can also see which commands that are running from the cli, so in that case you can still use the same commands if something fails and so on.

A

There's also some help and feedback available for you, so quick access to the documentation, and if you want to report an issue or if you want to start using the graph explorer, everything is there if there's something missing, yeah just report it in our issue list. Now there are a couple of other things that are pretty cool, and one of these things that we have been thinking about was scenarios.

A

So scenarios is a way for you to get to know and get to understand how you can do things with fifa connections in this case or here what you can see is well, they created two scenarios that you can leverage, so they are available on github. If you click here on the github link, it will bring you to this scenario, but what you can also do is click on this computer icon and it will allow you to download it locally and start using it.

A

So if I go back over to pmp viva to my correct folder viva, then one and I give it a new name- it will download the sample. It will updates all the references- and here you see over here in the workbench in the configuration serve here- it's contozo.sharepoint.com.

A

If I click on yes, it will start updating all these references. So right now everything is updated, but the cool thing is: there's a full co tour integrated. So with this experience, you have a nice way to get started and to get used to how to work with these a's experience, and you can then just walk through the full co tour experience in order to know and to get to learn how to start working here you are going to do some http calls and so on.

A

So well that did a really good job on explaining where and what to do and how you can start using it. The same thing can be done from samples, although a sample is not going to provide you some guidance if the developer didn't put it into that system, um but let's go to over here, but you will see a similar experience like before so an ex a scenario or a sample. It's just the same. It's just a project that lives in github and we do a roll up over here as well.

A

You can go through all the samples that have quite a lot of them, so you can just click on next, just to see all these things and then, if you say okay, this is a scenario that I want to start using, or this is sample that I want to start using. You just do the same thing. You click on the use sample button. You click on browse, because I want to be able to put it in the correct folder. This was the my recent files.

A

It will download the sample and do the updates accordingly.

A

So yet again what you can see over here. It's started a new project, so it knew that it was a new project. So it's just the npm installation straight away just going to cancel it. It's not a requirement, but what we have more here is is another thing is a way for you to add new components. So if you're working in a particular spf x project, you can click on new components, and then you have a way to add more things in here as well. So if you want, you can add a web part.

A

If you click react over here, you can see it will automatically start installing the other dependencies, and if we are going to web parts, we see that the hello world web part is now being created.

A

So this was actually a quick demo or a quick introduction of what the viva connections toolkit actually is for you to use within visual studio code, there's a way for you to also contribute and the actual code code lists on github.com on the pmp. There is now a microsoft 365 hosted apps vs code repository, so that's where you can put all the issues, feedback and whatsoever. So if you want to be part of it, your will be happy to accept your pull. Requests and feedback there.