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!

Screen Shot 2018-05-25 at 10.06.38
Banner web part in full with section

The banner web part has the following configuration options:

Screen Shot 2018-05-24 at 22.35.39

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:

Screen Shot 2018-05-25 at 10.14.49
Banner web part in smaller section columns

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:

Screen Shot 2018-05-25 at 10.17.59
Tiles web part in action

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:

Screen Shot 2018-05-25 at 10.18.34
Configuration through tenant property

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.

Screen Shot 2018-05-24 at 22.32.25
Links web part with grouped links
Screen Shot 2018-05-24 at 22.33.08
Links web part configuration for groups and links
Screen Shot 2018-05-24 at 22.33.23
Add, edit and delete groups
Screen Shot 2018-05-24 at 22.33.55
Add, edit and delete 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
Screen Shot 2018-05-25 at 15.57.41
Personal web parts in action

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:

Screen Shot 2018-05-25 at 16.09.20
An alert on top of the page with a link to more information

When more then one alert is available in the list to be shown, the alerts are all listed on top of each other:

Screen Shot 2018-05-25 at 16.16.48
Multiple alert support

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:

Screen Shot 2018-05-25 at 16.20.50
Footer extension in collapsed state
Screen Shot 2018-05-25 at 16.21.08
Footer extension in folded out state with several links and an edit option

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.

Summary

The PnP starter kit announced at the SharePoint conference in North America has some really nice functionalities available. It can give you a real good jump start for your portal projects and give you inspiration on how to develop certain functionalities using the SharePoint Framework. It also provide methods and insights how to deploy everything to your tenant and configure it on pages. Very nice work PnP team!

Advertisements