Augment SharePoint site provisioning with messaging in real-time with Socket.io

Modern provisioning in SharePoint has taken on a new framework called Site designs. Site designs are like templates in that they can be used each time a new site is created in your Office 365 tenancy. A site design is essentially a list of actions (site scripts) that you want SharePoint to execute when creating new sites. These actions may include:

  • Creating a new list or library (or modifying the default one created with the site)
  • Creating site columns, content types, and configuring other list settings
  • Applying a theme
  • Setting a site logo
  • Adding navigation
  • Triggering a Microsoft Flow
  • Installing a deployed solution from the app catalog
  • Setting regional settings for the site
  • Setting external sharing capability for the site

Extending site designs

While site designs are continually being improved and expanded on by Microsoft, there are some gaps. From the beginning, Microsoft was aware they wouldn’t be able to fill all  gaps from the start so they allowed us to extend the out of the box provisioning using Microsoft Flow and Azure Functions using the “triggerFlow” action. To learn more about this functionality follow this PnP documentation.

Picture1.png

This model is extremely extensible and allows you to move some of the workload over to an Azure Function or Azure Automation Services to run PowerShell & C# to apply more custom provisioning artifacts such as pre-configured pages and web parts.

No Messaging?

Currently there is a limitation using this model. Given that the provisioning process has moved off into Azure, we are unable to notify the user what the current stage the Azure Function is currently running at.

Here is what the current messaging system looks like

Picture2.png

I’ve been told that that ability to provide our own messaging into this dialog is “coming”, but currently I wanted to overcome this limitation.

Clippy is back!

Months ago when SPFx application customizers were released I jokingly built a Clippy extension to run on modern SharePoint pages. The goal was to show how to call Microsoft Graph from an application customizer.

Clippy.png

I thought I would supercharge the functionality of Clippy by connecting him to the site design provisioning process.

Socket.io + Express

In order to do this, I had to come up with a mechanism for providing Clippy real-time updates during the provisioning process. I had recently started playing around with Socket.io and I believed this would be the best route forward.

I implemented Socket.io inside an Express api which is currently living up in the Azure. The plan is use this Socket.io as a messaging relay between the Azure Functions and my Clippy extension.

This is what the new flow looks like

NewFlow

We start with a site design that sends the new site URL to Microsoft Flow. Microsoft Flow will pick up that trigger and send an HTTP request to a Durable Azure Function orchestrator in Azure.

The Durable Azure Function orchestrator allows me to split out provisioning tasks (create lists, create pages, provision navigation, apply branding) while at the same time, maintaining state across my Azure Function tasks. As the provisioning is happening, I will send updates to Socket.io.

The Socket.io will receive the message from the Azure Function and update Clippy in real-time in SharePoint.

Socket.IO Configuration

Connection

In order to configure Socket.io to be the messaging system, I had to make sure I was working with individual clients and not broadcasting messages across all Clippy extensions in my tenancy. To do this, I am emitting from Clippy a “room” name. This room is the siteURL of the current site Clippy is running.

ioconnect

By doing this, whenever  I send a message from Socket.io to Clippy, I know exactly where to send it to.

Messaging

Messaging to Clippy is done through a POST request to Socket.Io The POST request contains a message, the provisioning status (complete/running) and the URL (unique identifier for the room). I take these parameters and emit the message to the Clippy extensions where room name is equal to the Site URL.

POstMessage

Clippy Configuration

Configuring Clippy is quite simple, it’s as easy as connecting to Socket.io in Azure and subscribing to the “emit” events.

Inside the _renderPlaceHolders() function of my application customizer, I am going to create a new Clippy and register to Socket.io

ClippyRegister

Inside the _registerSocketIO, I instantiate a new socket request to Socket.io. Once connected, I am going to send a message with my “room” name. This room name is going to be uniquely identified by the siteUrl of the current site being provisioned.

regiserIO

I have two basic actions I am subscribing to — “provisioningUpdate” and “provisioningComplete”. When Socket.io receives a message and broadcasts that, Clippy will pick it up and “speak” to the user the current update from provisioning.

The Azure Function

As previously mentioned, I am using a Durable Function to do the provisioning process. To learn about Durable Functions follow this link.  Here is what the Orchestrator tasks looks like.

Asure Function Design.png

Notice that I am passing in the siteUrl coming from my Microsoft Flow HTTP trigger. Inside, I have a couple tasks that are running.

  • Establish site as a hub site
  • Provisioning Lists
  • Provision Pages
  • Provision Terms

Also notice that I have an _emitUpdate() function which is running before and after my asynchronous tasks. During the provisioning process, this _emitUpdate is going to POST a message to Socket.io.

What a task looks like

Let’s take a look at what an individual task looks like.

ProvisionLists

My Azure Function task is going to create a new AppOnly context to SharePoint, load a provisioning template that contains a set of lists to be created and uses ApplyProvisioningTemplate(template) to apply the template to my site.

Inside _emitUpdate

My _emitUpdate is fairly simple. It’s going to take a message from the Orchestrator, create a new HttpClient and execute a POST message to my Socket.io with the current status of the provisioning process.

emitUpdate

Putting it together

Without going to deep into this (because it really is more high level education than anything)… let’s see what these messages look like in real time.

If Gif is missing… wait for it to load. Full size view can be found here.

ClippyProvision-min (1)

Want to learn more?

If you are looking to learn more about how I put this together, join me at SharePoint Saturday Denver on October 6th and I’ll be also be demoing this solution at SharePoint Saturday New England! Sign up!

Customizing the SharePoint Starter-Kit for Office 365 Part 3 – Collab Footer

The SharePoint Starter Kit is an open source initiative that provides an end to end solution for provisioning pre-built sites, web parts, extensions, site designs and more in an Office 365 environment. If you’ve explored it’s functionality and are looking to see how you can configure and customize it yourself, today we’ll be talking about the Collab footer.

The Collab footer is the menu bar (highlighted in red) at the bottom this image.

CollabFooter

The Collab footer is a SharePoint Framework customizer that allows for showing a set of standardized links and supports personalized links for the current logged in user.  You may be thinking this is very similar to the Portal footer. In fact, it is very similar in that it shares the same personal links. That means when a user configures a personal link on the Collab footer, it will automatically show up on the Portal footer in the hub site as well!

The personal links are stored in a property on the User Profile that needs to be created by an admin. Instructions to do so can be found on the GitHub repository at this page.

Here is what the Collab footer looks like when hovering over nested links.

CollabFooterExpanded

Where are the links stored?

Unlike the Portal footer, where the links are stored in a SharePoint list… the links in the Collab Footer are stored in the Term store which gets automatically provisioned during the deployment of the Starter Kit.

CollabFooterTerms

How to modify the links in the Collab Footer

In order to modify the links in the footer, you’ll need to edit the properties on each term within the PnP-CollabFooter-SharedLinks term set. Let’s make a modification to the Legal Policies link. By default, it links to https://intranet.contoso.com/LegalPolicies and looks like this.

CollabFooter-LegalPolicies

If you’d like to change the label for the link, just rename the term in the term set. Select the term and change the default label.

CollabFooterDefaultLabel.png

The link value is stored on the navigation property of the term in the term set. Click on the term and select Navigation from the tabbed menu.

CollabFooterNavigation.png

Let’s modify the default value to now link to a new library in our HR site that holds policy documents and click save.

CollabFooterChangeLink

 

Modify the link icon

If you are adding your own links or wish to change the icon of an existing link, it’s very simple. The icon’s used for the links are stored on custom properties on the term and references UI Fabric Icons.

Navigate to the UI Fabric Icons site and select an icon that suits your needs. Let’s modify the lock icon to be the “Documentation” icon instead of a padlock. Hover over the icon with your mouse, and copy the value underneath it.

CollabFooterDocumentation

To change the icon, navigate to the Term Store and select the term you wish to change. Select Custom Properties from the tabbed menu and you’ll find a custom property called PnP-CollabFooter-Icon. The default value for Legal Policies is “Lock”. This value is the icon class from UI Fabric.

Replace this value in the custom property of the term with the Fabric Icon we copied.

CollabFooterDocumentationSaved

If we reload the Collab footer we will see the new icon!

CollabFooterNewIcon

My new icon isn’t working!

You may find when you update the Icon with a different one, that it doesn’t render and instead you see a square box instead.

NoIcon

The reason for this is the SharePoint Framework isn’t using the latest version of Office UI Fabric. Because of this, you’ll have to choose a new icon.

Customize a menu for each Team site

After deploying the Starter Kit, you will notice the Collab footer is identical on both the HR and the Marketing site (this is by design). In the real world, it might make sense for department sites to have their own footer. In my environment, I had deployed an IT site along side the HR and Marketing team sites.

Let’s create a new footer for the Information Technology team site. In order to do so, here are the list of things we’ll need to do.

  1. Create a new term set for the IT site
  2. Remove the current Collab footer
  3. Add Collab footer back with new clientsidecomponentproperties

Create new Term Set

ItLinks

Start by creating a new Term Set under the PnPTermSets group. We’ll call it “PnP-CollabFooter-ITLinks”Create a couple terms, update their links in the Navigation menu and add the custom property for the icon from the Custom Properties menu.

Remove the current Collab footer.

In order to remove the existing Collab footer that was deployed from the Starter Kit, we’ll need to use PowerShell.

Connect-PnPOnline https://yoursite.sharepoint.com/sites/itsite
Remove-PnPCustomAction -Identity "CollabFooter"

Add updated Collab Footer

Now that we have removed the existing footer, we need up add the footer back and update the clientsidecomponentproperties before we do.

Clientsidecomponentproperties is a JSON object that defines a set of properties to be used by a SharePoint Framework component. Notice the property “sourceTermSet”.

Connect-PnPOnline https://yoursite.sharepoint.com/sites/itsite
Add-PnPCustomAction -Name "CollabFooter" -Title "CollabFooter" -ClientSideComponentId c0ab3b94-8609-40cf-861e-2a1759170b43 -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentProperties "{""sourceTermSet"":""PnP-CollabFooter-ITLinks"",""personalItemsStorageProperty"":""PnP-CollabFooter-MyLinks""}"

In the sourceTermSet value, I have set the value to the name of the new PnP-CollabFooter-ITLinks term set set we created earlier. Run this command and then navigate to your Information Technology site and see the new footer!

ITNewFooter.png

Final Thoughts

I hope you find this post helpful. The SharePoint Starter Kit is a great example of how to provision solutions into Office 365. It includes 17 different web parts and 7 application customizers which are free for you use to use and modify! If you have any questions or would like more information on this post, please comment and let me know!

Sharing is caring.

How To: PnP Starter-Kit for Office 365 Part 2 – Tiles

Welcome back to another post in my blog series on the PnP Starter-kit. If you’ve found this post, it’s likely you already know what the PnP Starter Kit is. However, if you do not, I’ve written a quick starter post about it here. The PnP Starter Kit is an open source initiative that provides an end to end solution for provisioning pre-built sites, web parts, extensions, site designs and more in an Office 365 environment.

Today we’ll be talking about the Tiles web part (highlighted in red)!

Tiles.png

The Tiles web part is a grid of links that can be customized using the out of the box page editing experience. This web part allows you to customize which icon to load, the size of the tiles and where the tiles link to. To start customizing, set the page in edit mode and edit the web part.

TilesProperties

Icons

If you open up the properties, you will notice in the header a description that specifies how to change/add the icons to your tile. There is a link that brings you to the Office UI Fabric Icon page. This is important, but current limitation (feature?) of the Tiles web part is that you can only source icons from the Office Fabric Icon library.

One caveat you should be aware of as you navigate and start choosing icons, is that the Office UI Fabric site may be more up to date than the icons available in the SPFx solution.  This is because the version of Office UI Fabric used in the SharePoint Framework is a little behind the current release of Office UI Fabric. If you select an icon and it doesn’t load, this would be why.

Configure the Tiles

Unlike other implementations of tile links (promoted links for example), the Tiles web part isn’t list driven. What I mean by that, is in order to change the tiles and their links, you’ll have to actually open up and edit the web part every time. While it is a different editing experience, it actually has some real sweet under the covers. When you click “Configure the Tiles”, you’ll notice a new editing modal pop up.

TilesPrropertyExpanded

This editing pane is a table that you can modify properties such as the Title, Description, URL, UI Fabric Icon and specify whether the link should load in the same window or a new tab.

What gets me excited most about this property pane, is that it is not built specifically for this web part. In fact, if you are building SPFx solutions and have a need for inserting complex data types of lists/collections, you can use this! The best part is that this control is included in the re-usable property pane controls repository here.

Create a new Link

Let’s say we are going to build a new Tile link which links to the Microsoft Forms web site. Let’s start by clicking “Configure the tiles” and adding a new record for our new link. We’ll put the title as “Forms” and specify the URL to https://forms.office.com

NewLink

 

Next, we need to find an Icon to load into our tile. Let’s navigate to the UI Fabric website and find the icon for Microsoft Forms.

FormsIcon.png

You’ll notice when you hover of the icon, it shows the name of the icon “OfficeFormsLogo”. This is actually the class name that UI Fabric uses to render icon. Let’s copy that value and we’ll paste it into our property pane for a new tile in the “UI Fabric icon name” field.

FabricIconAdded

Now if you click “Add and Save”, you should see your new tile link!

FormsLoaded.png

 

 

Customizing the PnP Starter-Kit for Office 365 Part 1 – Portal Footer

If you’ve found this post, it’s likely you already know what the PnP Starter Kit is. However, if you do not, I’ve written a quick starter post about it here. The PnP Starter Kit is an open source initiative that provides an end to end solution for provisioning pre-built sites, web parts, extensions, site designs and more in an Office 365 environment.

While it really is an exhaustive example of how this can be done, many people are hoping to augment the solution to suit their own business needs. Because of this, I am going to start a series about how to configure and change certain aspects of the starter kit. In this post, we’ll talk about how to modify the footer in the hub site, aka “Portal Footer”.

The Portal Footer is the orange bar (highlighted in red) at the bottom this image.

PnpFooter

The portal footer is an expanding footer that allows for showing standard company links and supports personalized links for the current logged in user. The personal links are stored in a property on the User Profile that needs to be created by an admin. Instructions to do so can be found on the GitHub repository at this page.

Here what the footer looks like expanded.

PnpFooterExpanded.png

You’ll notice there are columns with a list of links inside. They are grouped by “Applications”, “Internal Modules”, “News” and “My Links” (the links that are held on the user profile).  The “Applications”, “Internal Modules” and “News” group of links are stored within a SharePoint list on the portal site in a list called “PnP-PortalFooter-Links”, which are deployed automatically with the Starter Kit. If you navigate to the list https://yoursite.sharepoint.com/sites/YourSitePrefix/Lists/PnPPortalFooterLinks/AllItems.aspx you will be able to see and modify the existing links and link groups that show in the footer.

Modify a company wide link in the footer

To modify an existing link in the footer, all you need to do is edit one of the links in the PnPPortalFooterLinks list. Let’s do that now. I am going to open up the CRM link item under “Applications” and change the title from “CRM” to “NEW CRM TITLE”.
PnpFooterLinkChange

Once I save the item, and reload the page and expand my footer, I’ll see my new title.

NewTitleForCRM

Permission the portal link items

While I rarely recommend item level permissions, there are times where this may make sense. Generally speaking, item level permissions can make it hard for IT staff members to manage what content users have access to in SharePoint. Also, in a list with many items, item level permissions become a performance concern. However, in the case of this links list, it’s unlikely we’ll have that many items so it should be fairly easy to manage.

The footer link can only access items in a list that the current logged in user has access to, thus allowing us to show or hide links to specific users. Let’s say that the ERP application in the “Applications” group should only be visible to a specific ERP team. Using out of the box permission, we can remove access and grant permissions to the item for that team only.

Add my own personal links

As previously mentioned, the portal footer allows for users to create and link to their favorite locations that they access the most. To do this, expand the footer using the arrows on the right. You’ll see the ability to add and edit the links on your profile.

AddNewLInk.png

If you are a SharePoint admin, you can navigate to the User Profiles in the SharePoint Admin center and see the values for links that users are storing on their profiles.

UserProfile

 

Update company name

If you look at the footer, you’ll notice it has a copyright for Contoso 2018 and also has a help desk link to support@contoso.com. Changing these values is the most common request I have seen from users who have tested out the starter kit and want to use these extensions. In order to do this, we actually need to modify the PnP Provisioning template provided with the solution because these values aren’t stored anywhere in SharePoint.

If you have downloaded/cloned the repository, navigate to the provisioning folder and open up the hubsite.xml file. This is the template that defines the structure of the portal site. It includes all of the pages, the navigation, the web parts and identifies which application customizers will load for this site. Towards the bottom of the file you will see an XML node called <pnp:CustomActions>, inside it defines the Portal Footer properties.
PortalFooterXML

Let’s say I want to change the values highlighted in red that correspond to the Copyright and Help link in the footer. My fictional company is Cameronsoft and we manufacture fake widgets, so I definitely want to have my company’s name in the footer at all times. I will change these values in the template.xml before deploying the PnP starter kit.

portalxmlcameronsoft.png

Now, if i deploy the starter kit, my company’s information will be listed at the bottom instead of Contoso!

Cameronsfotfooter.png

Updating an already deployed footer

Let’s say you’ve deployed the footer but you didn’t realize that it would be labeled with Contoso. I wouldn’t try to re-deploy the starter-kit, because you may find complications with that. So here is a set of PowerShell scripts to help you do so. Using PnP, you’ll need to connect to the hub site and remove the existing portal footer, and re-add a new one with new properties.

Connect-PnPOnline https://yoursite.sharepoint.com/sites/demositeportal
Remove-PnPCustomAction -Identity "PortalFooter"

Add-PnPCustomAction -Name "PortalFooter" -Title "PortalFooter" -ClientSideComponentId b8eb4ec9-934a-4248-a15f-863d27f94f60 -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentProperties "{""linksListTitle"":""PnP-PortalFooter-Links"",""copyright"":""@Copyright CameronSoft, 2018"",""support"":""support@cameronsoft.com"",""personalItemsStorageProperty"":""PnP-CollabFooter-MyLinks""}"

We start by connecting to the hub site using Connect-PnPOnline.

Then we remove the application customizer with the name “PortalFooter”. Followed up by Add-PnPCustomAction. Notice, the clientsidecomponentproperties is a JSON object that defines the values on the footer. Just update these to include your company instead of Constoso!

Modify Footer code

You may find the footer isn’t displayed exactly how you like, or you want to add your own custom functionality. Well, no problem there! This is an open source project and you are free to change anything you like. To find the footer code, open your sp-starter-kit folder in VS Code and navigate to /solution/src/extensions/portalfooter This is where you can modify the code to suite your needs. Once complete, just rebuild and package the solution then upload it to your app catalog! Instructions on SPFx and how to build and deploy apps can be found here.

Final Comments

I hope you find this post helpful. As I mentioned, I am going to be doing a short series on this for those of you who wish to customize or change the PnP Starter kit. If you have any questions, I suggest going to the GitHub repository first. Eric Overfield has done a fantastic job producing documentation for this solution. If you can’t find what you are looking for, you can ask a question in the issues list or you can just comment on this post and I’d be happy to help!

Edit HTML files in SharePoint Library

In Modern Office 365, one of the neat new features is the ability to edit HTML files by opening up a file from a Modern library. The HTML contents would load in the browser and were able to edit the HTML without having to download the file or edit the file using SharePoint Designer — this was a very powerful capability for many people.

Well, recently Microsoft has removed this capability (not sure why) as noted by Mark Rackley. Please vote in the UserVoice!

 What to do?

This wasn’t the first occurrence of this issue. I have found others posted about this topic on other social forums such as Reddit and Facebook. Because of this, I have decided to just build a simple little CommandSet button that will run on SharePoint libraries, which bypasses the new Microsoft changes and allows you to edit an HTML file in the browser. In order to do this, all we need to do is append &p=5 into the browser URL.

The Solution

The solution was quite simple. Build a SPFx CommandSet button, which allows the user to select an HTML file and then navigate to the view page with &p=5 appended to it.

 

COmmandSet

The code is quite simple. When a user selects a file with a file type of “html”, show the command button. When the button is clicked, grab the FileName, file path and folder path. Construct a new URL, and append &p=5.

What it looks like

Select an HTML file, the CommandSet button shows up

Library

 

Click “Edit HTML”, the page will redirect to the modern list view display form, with &p=5 to load the default edit view of the file.

TestFile

Try it out

If you’d like to try it out, please do. I have uploaded the source and the sppkg file to my GitHub Repository.  The sppkg file will be in the sppkg folder. Upload this to your app catalog. Subsequently, you can deploy the app via Site Contents or using PowerShell.  Below is a sample PowerShell command for you. (This is old code, there are other ways to provision this)

 Connect-PnPOnline -Url https://test.sharepoint.com/sites/MySite
 
 $context = Get-PnPContext
 $web = Get-PnPWeb
 $context.Load($web)
 Execute-PnPQuery
 
 $ca = $web.UserCustomActions.Add()
 $ca.RegistrationType = "List"
 $ca.RegistrationId = "101"
 $ca.ClientSideComponentId = "6599b3cc-7631-4a55-962e-43d1757977ec"
 $ca.ClientSideComponentProperties = "{""sampleTextOne"":""Edit HTML""}" 
 $ca.Location = "ClientSideExtension.ListViewCommandSet.CommandBar"
 
 $ca.Name = "EditHTML CommandButton"
 $ca.Title = "EditHTML CommandButton"
 $ca.Description = "EditHTML CommandButton"
 
 $ca.Update()
 
 $context.Load($web.UserCustomActions)
 Execute-PnPQuery

 

PnP-Starter-Kit for Standard Release Tenants

I am going to preface this blog post with — if you have an issue with the solution setup I have below, please do not add issues to the PnP-Starter-Kit issues list. This solution below, is a replication of the pnp-starter-kit and not managed by the PnP Team.

I’d also like to say, that you don’t need this post. The PnP-Starter-Kit should be deployed into First-Release tenants. I’ve had reservations on whether or not to post this.

What is it?

The PnP-Starter-Kit is an open sourced initiative that was released by the PnP-Team to show all of the capabilities that currently exist around provisioning in Office 365 using the SharePoint Framework and PnP Provisioning. For more information on the project, the GitHub repository can be found here.

One of the requirements of the PnP-Starter-Kit, is that it requires your tenant to be configured for “First Release for everyone”. This is because some of the web parts utilize the new AadHttpClient and MsGraphClient. These are currently in preview, but require permissions to be requested and approved under “API Management” in the admin center.

What’s in this my solution?

This solution is essentially an exact replica of the PnP repository, except that I have removed all of the web parts that require First Release and I have modified the deploy scripts and PnP Provisioning XML files to also support standard release tenants. What this means is that you will not have the LOB application or any of the web parts that generally show up on the personal page (except the people directory).

Why do this?

You may be wondering why I would do this. Since all of this is brand new and uses experimental features, it should only be deployed into a test/demo tenant, where turning on First Release shouldn’t be a problem. However, through some of the issues lists and comments I’ve seen on social media, it appears many people want to deploy the web parts into standard release tenants to test out the web parts, so I figured “why not?”.

You can get a demo tenant for free and set that tenant to first-release. However, if you really feel you want to deploy this into Standard Release… here you go.

How to deploy

The deployment of this is exactly the same as the full PnP Starter Kit, except you don’t have to configure any of the API management stuff.

GitHub Repository Here

  1. Make sure you’ve updated your PowerShell module to the latest version.
  2. Make sure your development environment is configured correctly here.
  3. Make sure your tenant is configured following this page for the User Profile property for the Portal Footer.
  4. Make sure your tenant has an app catalog
    1. Wait 24 hours after creating one
  5. Make sure your account is a Term Store Administrator

To deploy the starter kit, you’ll need to upload the sharepoint-portal-showcase.sppkg from the /package folder to your app catalog.  This will provision the web parts to all of your site collections for use. If you’d like to also include the 3 demo sites, and pre-built pages included in the full starter kit, then open up Powershell and navigate to the provisioning folder. Once inside the folder, execute the following command to start the provisioning process.

.\deploy.ps1 -TenantUrl https://YourTenant.sharepoint.com -SitePrefix Demo

 

Questions?

If you have any questions, just ask me. Please note, that I will not really be maintaining this repository, so it will not be receiving any of the new bug fixes and updates from the PnP Team.

Please do not add issues about this package to the PnP-Starter-Kit GitHub repository issues list.

PnP-SP-Starter-Kit Hints and Tips

If you are like me, you followed all of the updates at SharePoint Conference North America 2018 and you heard about an awesome new starter pack created by the PnP Team, and you couldn’t wait to install it and deploy it into your environment.  You can find the Starter Kit here.

Please note, this blog post isn’t official documentation,  nor am I a part of the PnP team… but these are just some issues I have seen as I’ve started exploring.

Before going any further

Before you follow the rest of this blog, please note that the PnP team has updated some of the deployment documentation. I highly recommend running through this documentation to make sure your environment is prepared for the PnP Starter Kit.

Documentation found here and tenant settings here.

Foreword

What is important to know is that this solution is an all encompassing solution. It provides you with web parts, customizers, site designs, MSGraphClient configuration, a hub site, lists, content types, a sample LOB application and more. This might be the most exhaustive example of modern SharePoint provisioning I have seen. There really is an impressive amount of work that was put into this! Kudos to the team and community for putting this together.

A few Hints

Downloading the Project

Downloading the project is quite simple, assuming you’ve developed SPFx before. If you haven’t, you may want to spend some time setting up your development environment.

To download the project, navigate to the starter kit from the link above. You can clone this repository to your local machine using the Github UI.

PnpStarterKit

Or, you can use the following git commands

git clone https://github.com/SharePoint/sp-starter-kit/

 

If you’d like to know how the starter kit gets provisioned, you’d want to look into the provisioning folder. You’ll find a collection of PowerShell scripts which will help you deploy the starter-kit. Before you go any further, please read the documentation on GitHub and make sure you have configured your environment and followed the deployment procedures.

Update your PnPPowerShell module

You’ll want to update your PnPPowerShell module to the latest version. In order to do this, open up Powershell and execute the following command.

Update-Module SharePointPnPPowerShell*

Deploy the starter kit

  1. Make sure you’ve updated your PowerShell module above.
  2. Make sure your development environment is configured correctly here.
  3. Make sure your tenant is configured following this page.
  4. Make sure your tenant is “targeted release for everyone”.
    1. Wait 24 hours after enabling this
  5. Make sure your tenant has an app catalog
    1. Wait 24 hours after creating one
  6. Make sure you are a term store administrator.

To deploy the starter kit, you’ll need to upload the sharepoint-portal-showcase.sppkg from the /package folder to your app catalog. To learn how to upload files to your app catalog, follow this link.

Then open up Powershell and navigate to your provisioning folder. Once inside the folder, execute the following command to start the provisioning process.

.\deploy.ps1 -TenantUrl https://YourTenant.sharepoint.com -SitePrefix Demo

The SitePrefix parameter is for the prefix of the newly created site collections.

When you execute this command, you’ll notice a ton of actions happen. The solution is going to create a couple demo sites for you. “Demo_Portal”, “Demo_hr”, “Demo_Marketing”. The script is going to create the Demo_Portal site as a hub site, and connect the other two sites to it.

The script will install the app package you previously uploaded in the app catalog into the sites that are being created. It will then create two site designs for Team sites and for a Communication site, and then create new navigation elements for your hub sites.

The deployment script will also create a handful of pages for your Portal site and automatically provision the web parts to the page. This is just the start… the deployment script actually provisions and exhaustive set of functionality, however this post isn’t about all of the functionality. 🙂 Have a look yourself and see what it provisions!

Deployment Failed

When upload the .sppkg file to the AppCatalog, you may receive an error stating “Deployment failed”. Just delete the .sppkg file and re-upload the package to the app catalog!

Error in application

When uploading the .sppkg file into the App Catalog, you may receive this error. If you had just recently created your App Catalog, you may need to wait up to 24 hours for the change to fully propagate successfully. So wait 24 hours and try to upload the .sppkg file again!

Apply-PnPProvisioningTemplate Error #1

Apply-PnPProvisioningTemplate : Object reference not set to an instance of an object. At C:\Users\beaucameron\spfx\sp-starter-kit\provisioning\deploy.ps1:96 char:5

This will likely be the first error you see when trying to deploy the solution. Make sure the .sppkg file is already in the app catalog. If you haven’t manually deployed it, please do so now by following in the instructions at the top of this blog. If you haven’t created an App Catalog in your tenant, you will also need to do this.

If you just recently created the App Catalog, you may have to wait up to 24 hours for it to be completely functional.

App Package Not Valid

Apparently some people have been unable to deploy the solution to the app catalog and receive an error that the app package is not valid. Garry Trinder mentioned this issue, and so far others have confirmed that it is because API Management configuration is missing from your admin center. If this error happens for you and you are also missing API Management from the new Admin Center could you let me know (confirmation)?

In order to add API Management to your admin center, you must enable “Targeted Release” for your tenant, instead of specific users. It may not be immediate and may take a few hours for the changes to propagate to your tenant. When doing this, you should do it on a non-production tenant.

New-PnPSite Error

If you are receiving  the following error:

New-PnPSite : {"d":{"Create":{"__metadata":{"type":"SP.Publishing.CommunicationSiteCreationResponse"},"SiteStatus":3,"SiteUrl":""}}}

Could you confirm if you have had previously deployed the starter-kit and then subsequently deleted the site collections and re-deployed? If so, could you let me know. It appears that there may be an issue with the New-PnPSite command when executing against a deleted communication site.

I have repro’d this error by running the deploy.ps1 using no -SitePrefix parameter. I then deleted the sites that were created, and re-ran the deploy.ps1. Even the though the sites do not exist, the New-PnPSite command cannot create a new site.

Try re-executing the command but modifying it by adding a new SitePrefix.
 .\deploy.ps1 -TenantUrl https://YourTenant.sharepoint.com -SitePrefix NewSitePrefix

If you’d like to re-use an existing SitePrefix, you can a couple PowerShell commands to clean up the deleted sites. Per @Andreas (thanks!)

//permanently delete all deleted sites
Connect-SPOService -Url “SharePoint Admin Tenant Url”
Get-SPODeletedSite | foreach { Remove-SPODeletedSite -Identity $_.Url }

//Remove hubsite associations
Get-SPOHubSite | ? {$_.Title -eq “PnP SP Starter Kit”} | Unregister-SPOHubSite

A service principal with the name SPFx-LOB-Function could not be found / a service principal with the name SPFx-LOB-WebAPI could not be found.

Inside API management in the admin center, you may find that when you are trying to approve the API permissions you receive this error on the LOB-Service application. I believe the reason is because the LOB service API doesn’t get provisioned with the deploy.ps1 script. So these service principals aren’t a part of your tenant’s AAD.

If you look inside your repo/folder structure, you’ll see a folder named sample-lob-service, which holds a Visual Studio solution for a sample WebAPI project. This solution needs to be deployed to your Azure environment, and two service principals have to be created with two permissions scopes:

  • a default “user_impersonation” scope
  • a custom “Customers.Read” scope

The service principals needs to be created and given permission to your sample-lob-service API.

Long story short – You need to register a resource in Azure for this WebAPI, subsequently deploy it and configure the service principals. There isn’t any documentation yet about setting this up. As this is a new starter-kit… documentation is still being created by the PnP Team. I suspect more information on how to setup/configure/deploy this will be coming in the future.

My navigation isn’t showing up

One of things you may notice after deploying the starter kit, is that the hub navigation doesn’t work. In general, hub navigation is a bit finicky but a simple way to make the navigation show up is by editing the navigation and cancelling out… or just wait for it to fix itself (caching).

navigation.png

Personal Web Parts aren’t loading

If you navigate to the personal page in the navigation, it brings you to a really awesome page with a bunch of SPFx web parts on it that utilize Microsoft Graph. These web parts include:

  • Upcoming Meetings,
  • My Tasks
  • Personal Contacts
  • Personal Email
  • Recent Documents
  • Recent Sites

You may find the personal web parts aren’t loading correctly, here are some possible reasons.

 

Access is denied. Check credentials and try again.

accessdenied.png

You may find that your personal web parts, aren’t loading at all and showing you that your credentials are invalid. This is because (at least in my environment), you need to explicitly give permission to the SPFx web parts to have access to the Microsoft Graph. If you navigate to the new admin center, https://yoursite-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx on the left hand side, select API Management under Advanced. You’ll see a list of pending approvals for the new applications. Approve this request and your web parts will start working!

APIManagement.png

 

User login is required

If you’ve configured the permissions in API management, you may find that the web parts still aren’t loading.

User login is required

It appears there is a bug (race condition?) that has effected acquiring a token for the AadHttpClient/MSGraphClient. Creating a new page and/or workbench, may allow you to see the web part temporarily. However, the bug/issue still exists and is linked below.

Emails.png

I found there is a support ticket on this issue which can be found on GitHub, issue 1810.

I have no Alerts

One of the cool application customizers deployed with this starter pack is a top header that shows configurable alerts. This is one of the only lists that doesn’t pre-populate with data through the deployment process. If you’d like to test it out, navigate to site contents and add some alerts to the Alerts list!

Alerts

Once you have, you should be able to refresh your page see the alerts show up on your modern pages!

AlertDialog

 

More…

If you’d like to know more of the features that are included in the starter kit, Robert Shouten has made a great post outlining the web parts and functionality here.

Disclaimer

Once again, I’d like to re-iterate that this isn’t any official documentation and that more documentation is linked at the top of this post.

Thanks to the PnP team and Vesa for all their continued effort. Sharing is caring.

Security Trimmed Hub Site Navigation Updates!

I had recently posted a blog  about a SharePoint Framework (SPFx) application customizer I built for use with hub sites in Office 365. The problem I currently have with Hub navigation is that all of the links are static links. This means, that whoever creates the common navigation must be cognizant of what links end users have access to. With that in mind, I built a new navigation the replaces the out-of-the-box hub site navigation elements with a security trimmed listing of sites within a Hub.

For brevity, this isn’t an all inclusive tutorial. It’s just discussing the high level changes to the original implementation of the application customizer.

How it works

The new navigation uses a combination of the SharePoint Search API and the new Hub sites API. When a user lands on a site collection that belongs with in a hub, I grab the hub site information to find all of the sites that exist within the hub using the Search API. The benefit of this, is that I can security trim a listing of sites with in the navigation. That means I can have sites in a hub that a user may not have access to, yet include them as elements in the global hub site navigation.

HubNavSite

What’s wrong with V1?

While this approach is great and I have had quite a bit of success building out security trimmed navigation, the default implementation lacks the ability to use the existing hub site navigation elements. This is why I have released v2 which is available on GitHub for download.

The new application customizer still implements the “Sites” listing node in the navigation.
NewNav

Adding existing Hub navigation

Version 2 is almost identical to version 1 with the exception that I am now pulling in the static elements from the default hub navigation. To do this, I’ve made some modifications to the base ReactHubsiteNavbarApplicationCustomizer.ts file, to set the Navigation property equal to the navigation array that returns from the _api/web/hubsitedata endpoint.

this._currentHubSiteData = await  searchService.getHubSiteData().then((hubData: IAssociatedSite) => {
if(hubData){
return searchService.getHubID(hubData).then((hub: IHubSiteData) => {
//add existing hub navigation
hub.Navigation = hubData.navigation;
return hub;
});
}
else{
return null;
}
});

Now that I have the elements as part of the _currentHubSiteData object, I just have to modify my HubNavBar.tsx component to accommodate loading the existing navigation nodes. One thing that isn’t working currently with the commandbar, is the ability to have a navigation element with children, in which the parent link is clickable.

SiteTrimmedMenuCode

You may notice the methods are almost identical. Rather than refactoring… I’ve separated them out because I have some future changes I’d like to make specifically to the rendering of the trimmed sites listing.

Ability to edit navigation

Now that we are showing the existing navigation elements and hiding the existing Hub navigation html…I needed a way to allow users to add and edit the original Hub navigation. There is an endpoint at _api/Navigation/SaveMenuState for saving changes to the menu, however it is undocumented by Microsoft so I will avoid using it for now. Instead, I am going to re-use the out-of-the-box Hub site navigation control to manage adding/editing elements.

To do this, I am checking if the user has ManageWeb permission, and then I will show an edit button which will show/hide the original Hub navigation.
//if user has manage web permissions, show edit button
const hasPermission:boolean = this.props.context.pageContext.web.permissions.hasPermission(SPPermission.manageWeb);


if(hasPermission){
commandBarItems.push({
key:"editButton",
name:"Edit",
itemType:ContextualMenuItemType.Header,
onClick:this._editOnClick,
className:"editButton",
href:"#"
});
}

Caveat: The out of the box permission for managing Hub navigation is the new “Edit” permission. Which means that users in the Member group have access to change the navigation. I think this is a bit too much permission, so I am restricting the permissions to “ManageWeb”.

The Result

hubnavnew

The end result is a combination of security trimmed sites listing within the hub and the existing hub site navigation. User’s with ManageWeb permissions on the Hub site will be able to see the edit button to modify the existing navigation elements.

Notes

Because of the caching in the customizer, it may take 15 minutes for changes to appear!

GitHub – https://github.com/bcameron1231/SharePoint-Framework/releases/tag/v2.0

Code is in pre-release and subject to change (refactoring).