PnP starter kit: my experiences
Blogs
1-6-2018
Announcement
This week the PnP team announced a new starter kit at the SharePoint Conference North America 2018. I was very excited about this and started right away with trying it out. The PnP starter kit can be found here. Despite the lack of good documentation at the moment, it was pretty easy to setup. This wasn’t the case either on my tenant I do most of my proof of concepts on. On a fresh new demo tenant everything was working great. @Beau__Cameron already wrote a nice blog about the installation and some of the things he bumped into during the installation and how to solve this. On my tenant, which is a few years old, Targeted release, I got some pretty weird errors. The first one is a bug in the API Management admin page. I could not approve access to the ‘Microsoft Graph’ API. I found an Issue in the sp-dev-docs GitHub about this problem and how to solve it. I needed to change the ‘Microsoft Graph’ references in the package-solution.json file into ‘Microsoft.Azure.AgregatorService’, package the solution again and deploy it. This way I was able to approve the permission requests to the Microsoft Graph API. In the issue Vesa Juvonen states this will be fixed in the GA release of the MSGraphClient and AadHttpClient.What is it?
Before jumping into the functionalities, lets start with the definition of the PnP starter kit.This is a solution designed for SharePoint Online which provides numerous web parts, extensions, and other components which you can use as an example and inspiration for your own customisations.This is really great! The PnP team offers us numerous example customisations as a jump start and for inspiration. It contains different patterns in how to handle configuration of web parts (inline, through tenant properties and through lists), how to use extensions (alerts, footers, etc.) and last but not least, insights in how to deploy all of this. There are other samples in the PnP Github already, but this will give your projects a good jump start on top of this. It is not meant to use this directly in your production environment, but use it as a starter kit and reference/inspiration on how to do certain customisations.
Functionalities
The PnP starter kit contains different kind of functionalities. It contains web parts and extensions. I will highlight some of these in order to give you some more insights on the content.Banner web part
Communication sites come with a great new Hero web part in order to highlight certain content on your page. In some cases this web part could be a little to much and a much requested functionality I get from clients is a banner web part. Just as you get when creating modern pages. Well here you are!
The banner web part has the following configuration options:
This will give you a good option to show of something on your page, show an overlay title and have the option to link to another location. Next to this you could adjust the height of the banner and switch on or of the parallex effect on the banner.
The banner web part could be added to a full with section, but also on any other place within a ‘regular’ section. In this case it could also function to create smaller banners on you page to highlight something:
Tiles web part
The Tiles web part gives you the option to create a list of Tiles with links to for instance other pages, apps or forms:
It’s another way to highlight some information on your page. This way you get much better options with only a Hero web part. The following configuration options are available:
The web part uses a tenant property in order to store the location to the central Tiles list. This will show you another way of how to configure web parts. A link to the list is available right away, so your users can access it quickly.
Links web part
Communication sites offer already a Quick links web part. It offers you a good way to list some links to other locations. The Links web part within the PnP starter kit, takes it a step further. It offers you to create Groups of links. The groups and links are all configured and stored within the web part itself. This way you don’t have to navigate to a separate list first in order to create new links.
Personal web parts
The PnP starter kit contains several ‘Personal’ web parts. These web parts use the Microsoft Graph API in order to get your personal data like email, tasks, etc. The following personal web parts are available at the moment:- Personal mail
- Personal tasks
- Personal contacts
- Recent contacts
- Personal calendar
- Recently used documents
- Recently visited sites
- Followed sites
The configuration options for above web parts are all about the same and give you options on how many items to display and in some cases some extra options.
Alert header extension
The PnP starter kit also contains a few extensions. A really nice one in my opinion is the Alert extension. This will show an alert on top of every page when applicable. There is a separate Alerts list available where you can maintain the alerts for your portal. It gives you the option to show short alert notifications with start date and time, end date and time, title and description, a link to extra information and the type of alert (information or urgent). When an alert is needs to be shown based on the start and end date a user sees it on top of every page:Footer extension
The PnP starter kit also contains a footer, which will be displayed at the bottom of every page. The footer can be collapsed and be folded out, to show the footer information. The footer itself can contain several information and links:
In my case the edit button shows a dialog in order to maintain the links in the footer, but I wasn’t able to add anything. I think this is still in progress.