Microsoft 365 Community SharePoint, 10 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Starter Kit v2 Overview

Description

In this 12-minute Developer - focused demo, Kislay Sinha orients viewers to the latest SharePoint Starter Kit - a comprehensive soup-to-nuts solution designed for SharePoint Online and SharePoint 2019, that provides numerous SharePoint Framework (SPFx) web parts (16), extensions (4), site collections (3), and guidance. Provisioning is accomplished easily with PnP PowerShell - 3 commands resulting in fully functional sites (hub and team) with capabilities and graphics you can just use or customize as desired. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 10, 2020.

Demo Presenter: Kislay Sinha (CGI) | @sinhakislay

Supporting materials:
• SharePoint Starter Kit v2 | https://github.com/pnp/sp-starter-kit
• Blog - Announcing SharePoint Starter Kit v2 | https://developer.microsoft.com/en-us/office/blogs/announcing-sharepoint-starter-kit-v2/
• Video - PnP Virtual Conference Session on Starter Kit | https://youtu.be/FyCHEfjurvo
• Article - SharePoint Starter Kit v2 – an overview | https://synkventures.com/2020/07/23/sharepoint-starter-kit-v2-an-overview/

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

Yeah, hello, everyone, uh so the today my damn is regarding the sharepoint starter kit version two uh first a bit about me. My name is chris lesina and work in cgi in ottawa. Sweden and you can connect with me on twitter linkedin and on my blog posts as well.

A

First of all, what is sharepoint starter kit version 2 and you might have already seen it and when I saw it, I was quite impressed with this. It's a comprehensive solution, showcasing you know, packaging solution, deployment, provisioning and you know different types of spfx web parts uses of graph api and it's a lot to learn actually in this, and that's why I really liked it and why I mean this has been created by best people.

A

I think I believe in and I have seen in the list of the contributors they're the best people in the field, and you can learn a lot how to package the solution, the provisioning mechanism. You know you can build your own modern portals based on this and in this version some of the web parts actually work in sharepoint 19 as well, so yeah, and so how to do it and well. You need some prerequisites. You need to be a tenant admin um and you need to set your tenant as a target.

A

At least uh app catalogs should exist and you should have pnp powershell installed. You must download the source code or get it from the github through sync and and then just three commands. You connect to pnp online, go to the provisioning folder of the source code and run apply pnp template, and this will do everything. If you face any issues, you can log issues or read the issues in here there.

A

I actually faced the issue in which I was not able to install it properly, and then I had to switch to a particular version of powershell and the latest one was not working, and I have to also uh pitch in a couple of more commands to make it work and that information you can find it on my blog actually um and then there are three you get. What you get is basically three side collections, a hub site and couple of team sites.

A

There are a bunch of custom web parts and extensions which you can also look and learn, and so I will now show you if you run the apply, pnp template command. What happens? It's the video but yeah? I can just show you quickly, so we don't.

A

So this is how you start it, and then it will try to you know upload all the packages. In this case it is showing skipping, because I had already had the packages when I recorded this video. But after that it will actually start the sequence that you apply, the templates. You know list instances, it will create files, it will upload all the files which are needed, like images and everything and also it will start creating all the client-side pages.

A

You know, and it will also apply and keep on applying the client-side pages, and then it will create the list, instances which are needed to to run for footer and everything and at the end you get a message like that three sites are created. So let's go to the sites to have a look in detail.

A

um So this is the hub site which is created, and you can look at that. It has all the teaming everything done. Also all the navigations are created here. I can start from the top. You can see that there is a message saying don't miss the demo on.

A

This is an alert mechanism which has been created also in this, and basically you have to add something in the alert list and there's an extension which you know pushes this on the top actually, and then you can see the different web parts where you can see your latest emails, your upcoming meetings, whether time at all offices- and these are configurable like in the my tasks you can have the source from the planner or from the to do you can set how long the meeting should have like how many days in future the meeting should be displayed here.

A

um So all those are actually in build, and it's a very good thing to showcase to your customer. Also learn from this. You know if you're building uh custom web parts, how to build them. How to what should we thought think about how what settings you you should have in your web parts? That is something you should and of course, there are footer here.

A

Also, you can see which is also coming from the footer links actually here which can be editable, and then there is a personal page which can you can also visit, and this is the organization page, and if you go to the personal page, you will see some similar web parts and you will see the contact list. Your recent contacts followed sites, recent documents and people directory also. So, if you click on on on the alphabet, you will get it and these inside.

A

So all these wonderful custom web parts are here and which you can actually learn from a lot also, and as I said, it also create two team sites which are pretty basic in nature. Human, human sources and marketing also similar to that. uh But it's a it's you. What you need to understand is that it's a sample site which can connect. You know the hub hub sites into different team sites. Also, I also created a demo page to showcase couple of other, like the recent contact.

A

This is also web part and also site information which displays the site name, the department and the email address of the contact of this site. You know so that is the team's team sites which are there in this one. So now we'll go back to the slides again.

A

And yeah, so demo was done and uh provisioning um if you like, if you'd like to make this your own, like you want to make a customization provisioning, you can do it and there was a very good demo done by eric overfield in the pnp virtual conference, and you should have a look at that. If you want to learn that it's very detailed, but what I'm going to show is a bit short version of that today and you can see that there are two commands which you need to really know.

A

Is that read pnp template which will read the xml file uh which will generate the pnp? uh You know through save pnp template and that can be pushed uh to to the tenant. You know. So let's have a look on the source code.

A

So this is the starter kit xml, and this is under the source, uh and you can here, you can see all the source code of all the web parts is also available for you to to have a look uh which you can go through and the starter kit xml file is the one which you know holds all the information which we need to have for provisioning um and it will create a pnp file. As I mentioned, it will include all the files, all the image and everything.

A

So I have you know, drilled down this a bit, so you can see that we have some preferences done here. First then web api permissions and then you they push all the catalog uh all the web parts in the catalog. You know so that is done uh and then, of course it needs some web api permissions also, and then it will also post the site. Scripts site designs, you know, and also the sequence and with the site has to be created. So this is also mentioned here with all the template details you can see.

A

So what I want to show here is that you can learn a lot from this, how to provision all kind of different things. You know, and you can also see that we have your term stores uh terms, how to push uh terms to term story. If you want to use that in your provisioning, so you can actually learn from here and then we have the templates. You know which we can also see how it does and the navigation uh you.

A

You saw that we have global navigation, structural navigation and how those are pushed side, field, content types and the most uh client-side pages, and you know we often have to create a lot of client side pages and put web parts to it. And if you want to learn how to provision them, you can look at, have have a look here. It has create quite complex pages also you know, and with all the details of how to put a canvas control and how to put the news. What's the json control data you need to use.

A

So all this is here, and so that is how you can actually learn from this and make your own. Basically, you can edit this and remove all the other things which you don't need and just create one site and some client-side pages to learn out of it. So that is how you can do also. So that's one other benefit of having a look into this, and I really recommend if you have not looked into this, you should actually and sharepoint19.

A

As I mentioned some things work in 2019 also and the apply pnp template command is not available as of now, but you can actually deploy individual apps in 2019 farm, and these are the apps which will work, not all the apps work, only some of them and to deploy. You can just copy the package file from the solution folder, which I have given here, and that is how you do so. I also have a short small single farm 2019.

A

Actually, you can see this is the farm put in as your virtual machine actually which is running. So these are the app couple of apps I have installed, and you can see that I have a site also here, in which I have actually added this links. Webpart that is coming from the starter kit, which also you know, can be used, as I said, so. This is a 2019 actually site and not sharepoint online. So that is what I wanted to show you that it can work in 2019 also and there's a lot to learn.

A

If you want to build spfx that parts for 2019, you know which you generally don't find on on internet pretty easily um so yeah references, that's the github link. As I said you can look, you should look into the eric's pnp virtual conference, video, where he has explained how to make your uh pnp customizations for provisioning, which is a really great thing to learn actually out of this, and I have written a blog about this also, which you can actually have a look uh also.

A

So I really want to thank all the contributors who did this actually because it's a great learning for anybody to have it and thanks for joining me into this presentation- and I was a bit nervous and excited also because this was the first time, but I really thankful to the host to give me the opportunity to do this. Thank you.

B

Awesome, thank you great job. uh You didn't sound nervous at all. That was really wonderful. I appreciate you taking the time to present.