Microsoft 365 Community Community Demos, 15 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building SharePoint Framework solutions with Microsoft Teams Toolkit v2

Description

In this 12-minute developer-focused demo, Vesa Juvonen introduces an alternative to using the SPFx Yeoman Generator for building Teams apps. The Toolkit – a VS Code extension targeted to web stack developers, supports the rapid creation of apps using SPFx. Step through Teams Toolkit installation, project creation, manifest file validation, etc. As the toolkit is in preview, the co-creators - Teams, SharePoint and Visual Studio engineering groups are very interested in your feedback. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 15, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Tools - Teams Toolkit (v2.2 Preview) | https://aka.ms/teams-toolkit
• Tools - Microsoft Teams Framework (TeamsFx) | https://github.com/officedev/teamsfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

I'm going to take roughly 10 minutes and to quickly do a kind of a quick introduction on the team's toolkit v2 and concentrating on the sharepoint framework side of the house. So let's talk about this one teams, toolkit version two is in previous status and it actually supports creation of the ux layer, especially tabs, using sharepoint framework. Now we are working together with teams engineering and we saw studio developer division and for the with the tools people and to make this experience more optimal.

A

So right now what you're seeing today is quite limited, but I also want to get the feedback in the chat on what you would like to see and and how things are looking. And hopefully we will get people um interested on testing this as well. So you can actually report ideas and input and feedback for the the visual studio or conversation uh as well. Now as uh before, we go to the the actual uh demo and how it actually works.

A

I just re briefly briefly: gonna take two minutes to talk about the opportunity and why we are doing this. So, of course, um we have 145 million daily active users in the microsoft teams. We have more than 200 million monthly active users in sharepoint, and we have more than tens of millions of monthly active users in sharepoint using sharepoint framework.

A

So there's tens of millions of people who are using already spfx sharepoint framework components in sharepoint so and people are writing tens of thousands of components um in every single month, so we're seeing a massive massive usage on sharepoint framework, and so people want to write components using sharepoint framework. So why wouldn't we then extend the sharepoint framework to be the extensibility model for microsoft themes, as you saw within the previous demos and during the community demos.

A

There are a lot of capabilities which you can build already with spfx and now we're improving that with the team's toolkit v2 and looking into further improvements in the future as well. Now just a quick recap on the sharepoint framework. Of course, a lot of the people in this call are familiar with this one, um but it is really the easiest way to build your enterprise solutions in microsoft, 365 and it has automatic single sign-on automatic hosting.

A

You don't have to worry about anything the hosting is done by sharepoint, even though you would be actually using it in the in microsoft teams or in microsoft. Viva. It has a consistent dev experience and it's an industry standard tooling, it's not about sharepoint. Isn't you don't need to understand future framework or xmls or jsons or whatever? It's just web stack development, typescript and node?

A

That's why it has been so popular and what we're doing right now is that we are further extending sharepoint framework to have additional shapes so you've seen today at the card shape, which has got up startup, record, dynamic adaptive card shape and there's additional shapes available as well for microsoft teams and then for the for the sharepoint.

A

Now the teams toolkit v2 will have a native sharepoint framework integration support and the team is looking a lot, a lot of feedback from the ship on developers on what would be actually needed, and even though, maybe they can't address that feedback within the version two.

A

They might address that feedback in version 2.1, 2.2 to version 3 and so on, but basically what what that means is that you can install the team, microsoft teams toolkit and you can choose to use sharepoint framework as the ux layer to implement your your user interface uh within for microsoft themes.

A

Now this is slightly different experience and I'm going to show that in a second then using just the the sharepoint framework field and generator and we're working with the visual studio team to get it more integrated, and all of that you are using exactly the same tooling you're, still using gallup you're still using nodejs, nodejs and all of them. But the experience is a bit different because we are creating the project for much different. uh Let's say location, let's actually move in to have a quick look on how this actually works in practice.

A

First of all, where can you actually get it, so you can find it from the visual studio marketplace? Typically, you wouldn't actually come to this page through a browser. You would come to this page using the extension view in the visual studio code, but I'm just going to call this out just in case in here and if you would have time- and that would be highly highly highly requested, we would love to get more, uh let's say, ideas and issues and reports in this github repo.

A

So this is the location where we would like to get suggestions, ideas and feature requests related on sharepoint framework in the microsoft teams, toolkit version 2.0, and maybe maybe you think that they should know already, so I'm not going to actually suggest x and y and z. Please do it might be that the person who is actually focusing on addressing the issue list is not aware of something what we discussed it within the community goal.

A

So please please, please let people know what is needed so because everything what we do in microsoft is for your benefit, so we want our tooling to be the best tooling in the world for you. So rather we don't want to dictate you to use bad tooling. We want to create the best possible tooling, so you choose to use that tool because it helps you okay.

A

Now, how do we actually get? This installed is? Quite simply, let me go to visual studio code in my extensions. I already installed that so, if I go to the teams or find the teams in the extensions in the visa studio, this first studio code ps code and you can actually find it, and this is basically the same, pretty much the same information which is so in the marketplace listing and you can just enable that to be available in the in this in the computer.

A

When that's has been done, uh the latest version by the way at the time is 2.2 still in preview, uh you'll actually get the steam's toolkit available in the left and menu. You can actually configure that to be optionally available. All of that like like normally in visual studio code and then from here, we provide additional guidance additional point additional starting points. So, first of all, I've already signed into the usher and also already signed into my dev tenant or test tenant.

A

So I'm not going to sign in, but it's basically asking you to sign into those environments, so it can be perform automatic operations, registrations deployments to make your life as easy as possible, so really really cool stuff as well, and then you can easily access uh documentation guidance. All of that from here as well. So it's kind of amazing. It's really easy for you to get started and creating the project, let's create a new project and see how it actually works in practice, so creating a new project.

A

It's gonna ask me in here in the top section, uh let's actually zoom in a bit here we go one more there. We go, create a new microsoft teams, application or start from a sample right now. We do not have sharepoint framework samples available as a starting point. Should we open question, let us know- and we could actually absolutely include the sample to be available from we do have a lot of samples like you know, we have hundreds and hundreds of samples available for sharepoint framework.

A

Now what I'm going to do is then I'm going to select to create a new themes app and I'm going to choose the tab because that's the most diff. Well, that's the supported, spfx uh implementation. Right now in the themes toolkit, um you can combine spfx with other options as well, which is kind of cool, so you can have a bot as a simple, separate solution under the same solution structure. So you can easily move between the bot and the back end code like azure function and the tab within the solution structure.

A

So I'm going to choose the tab, I'm going to choose that the hosting type is sharepoint framework. Technically hosting is microsoft, 365 not really sharepoint framework, but anyway so terminology thing and and because I'm a web stack developer. This is the more most natural way for me to implement things because hey it's typescript or I can native vanilla type script or it might be a react, so I can choose whatever the framework in the same way as with sharepoint framework human generator, I can choose.

A

Is it a uh vanilla javascript as vanilla typescript or is it the react, typescript implementation? So, let's see I will select react. It's going to ask me the hello, the name of the things. Let's call this react call demo, so we can identify that. It's going to ask me the description which the element generators would be asking as well. It's going to ask me what is the implementation type? Of course it's typescript, because why not and then it's going to ask me where I'm going to actually store the code.

A

Let's select that folder and it's going to ask me the application name. Let's call this spfx call demo, so I can actually show one more cool thing I will press enter and that basically is provisioning the solution. So now I have the solution structure here. I can basically say that my spfx solution is included in my solution structure. This is basically a. uh How would I put it themes, toolkit v2, specific structures, then there's the vs code information and then in my solution.

A

Currently, I only have a spfx solution, which only has currently one web part inside of it, and it has some set of default settings available. For example, the supported host has been already by default, said to be any steam stabs and dean's personal application.

A

Now, as part of the the guidance will also include a pr the readme file, where we then provide the minimal path to awesome. So it will make sure that you have the right solutions, right versions and everything else available, and then you are able to start using the automation which is available in the teams toolkit. So let me zoom a bit away, so I will see the team's toolkit on the left menu and I can basically modify the manifest in here. Of course, I can see the manifest I can get to the manifest.

A

I can modify that. I can modify the images I can adjust the settings when that's actually done. I can validate app manifest file and it's basically going to do a live validation, and it's going to tell me if something is wrong with the validation and all of that I can build to teams packets, which basically going to create the manifest file, and I can provision that to the cloud and what that means is that it's basically taking that solution package and it's installing that directly to the team's tenant.

A

So now, if I go back in my developer portal in teams, I can see if we refresh, we should be able to see our react called demo, which was just actually installed to this tenant, so we're using the dev teams microsoft.com, which is the developer portal for microsoft teams, to know all of the solutions which are available, and now I can then, on top of this right now.

A

If I would install or want to install the solution to the tenant, I would click deploy to the cloud which, unfortunately, right now it's not doing anything automatically so and of course that's would be good feedback. Can we automate this so the team's toolkit automatic deployment is not currently supported for sharepoint framework solution. It will basically now install a run the npm, install and then package the sharepoint package and ask you to put it in the tenant app catalog.

A

But after that you can basically then test the solution directly in teams and and do the things. So it's a slightly different experience in the yeoman generator, but we would love to get more feedback uh on what's needed. How is it working try to hands-on labs and tutorials tutorials, which are available provide feedback? As for the office, dev teams, fx repo, and so we know, and the visual studio organization knows how to adjust this experience to better match, on your expectation, really cool stuff for sure.

A

But that's it from my side.