Sunday, February 10, 2019

Simplify Teams app package creation with Gulp

Since SharePoint Framework v1.7 it's possible to implement Microsoft Teams tabs using SharePoint Framework. Software houses can now support both SharePoint and Teams with the same SPFx web part.

In order to simplify the Teams tab development, SPFx v1.7 creates a Teams folder in the solution structure. You find there all the necessary files for the Teams app package. Here is how it looks:

 manifest.json - Manifest file for Teams application
 tab20x20.png - Default small picture for a tab
 tab96x96.png - Default large picture for a tab

During development or at the latest while preparing your solution for production, you must create the Teams app package. In detail, you must generate a zip file which contains the files from the Teams folder. This zip file represents the Microsoft Teams application and will be used to deploy the web part to Teams.

Since the process of app package creation isn't automated, I created a gulp task which does it for us 😎 It's a nice way of making the development faster and avoiding errors while creating the app package. If you think "I don't need a task for that!", then keep in mind that manifest.json and images are in the root of the zip file or deployment will not work. The code below should be added to the gulpfile.js file. It also requires the npm gulp-zip module and the Node.js file system module to work:

The zipteam task reads the web part name from the manifest file and uses it as the zip's filename. The last step creates the zip file within the Teams folder. Note that all the existing zip files within the Teams folder will be ignored while generating a new app package file.

I extended the code with another gulp task which runs all the necessary tasks to create the solution package using just one command. Thanks Stephen Bauer for your comprehensive blog post regarding this topic. If you want more detail on that, I recommend you check out his post. The code below additionally requires the npm module gulp-sequence to work:

The zipteam task is executed after the SPFx solution package is created. Once the dist task is complete you are really ready to deploy your app packages to SharePoint and to Teams.

I hope these gulp tasks will make your life as a developer easier!

Sunday, February 3, 2019

Hide Site Designs menu entry from all SharePoint sites

Office 365 has been growing with strong dynamics. Features have been constantly released in the last years. On the one hand, customers have the opportunity to optimize their way to work. On the other hand, it has become very challenging to keep up to date on the Office 365 improvements and sometimes one just wants to wait until released features are "mature" to work with.

Site Design is a powerful SharePoint functionality which helps administrators provision site structure based on a schema definition. Since December 2018 certain users have been able to access the Site Design information panel through the settings menu of a site collection, enabling them to view applied Site Designs and to apply new Site Designs (Depends on the Site Designs configuration).

At the time of this writing, there is no way to disable the Site Designs functionality from SharePoint or even remove the Site Designs menu entry from the site settings menu via configuration. So, if the company's strategy is just to apply structural changes to a site using a custom provision software or if you don't want to use Site Designs through the settings menu, you need a custom solution to remove that. For that reason I've created a SharePoint Framework Extension which hides the Site Designs menu entry of all SharePoint site collections. In this blogpost, I'll explain which users are able to see this menu entry and how to work with the SPFx Extension.


  1. Who can access the Site Designs information panel?
  2. How to work with the SPFx Extension

1. Who can access the Site Designs information panel?

The table below lists the SharePoint users who are able to access the Site Designs information panel using the menu entry from the settings menu.

 Has permission?
 Site Collection Administrators
 Site Owners
 Site Members
 Site Visitors

As you can see above, the information panel's visibility is limited to site collection administrators only.

2. How to work with the SPFx Extension

I developed a SPFx Extension which can apply across all site collections and uses CSS to hide the Site Designs menu entry from the settings menu. At first sight the extension removes the entry but site collection administrators could still change the CSS configuration done by the extension and have access to the information panel. The extension only hides the entry from the settings menu!

The SPFx Extension must be uploaded to the SharePoint app catalog. Check the box "Make this solution available to all sites in the organization" if the extension should automatically be enabled across all sites. After trusting the extension, the Site Designs menu entry will be hidden from all sites. The picture below shows the trust dialog:

If the company's strategy has changed and you no longer need these extension, you can either disable it in the Tenant Wide Extensions list in the app catalog or remove it from the app catalog. The picture below shows how to disable the extension:

UPDATE 23.02.2019: It happend! Microsoft has released a new design for the settings menu. It means that my old hack for removing the Site Designs entry no longer works with this new design. What can we learn from it? Consider using SPFx Extensions with the supported and reliable placeholders (e.g. Bottom and Top) instead of hacking the SharePoint site. In any event, I changed my extension so it supports both the new and the old settings menu. If you haven't seen the new design yet, here is what it looks like:

UPDATE 19.04.2019: Microsoft did it again. Well there isn't any new design for the settings menu, but they changed the Site designs' CSS id selector. Therefore, my old hack isn't working anymore. This blog post has become a good documentation about things that can go wrong if you use SPFx Extensions to hack SharePoint. I fixed it again :) Let's see how long it works now! 

Download the SPFx Extension which can hide the Site Designs menu entry from all SharePoint sites!

Important: Consider trying the SPFx solution in a test environment before using it in a production system. Since I don't support problems with the extension, I've published the main code on GitHub. This extension can stop working at anytime because I've worked here with the Site Designs element ID which might look different tomorrow.


Site Designs is cool :) Give it a try if you haven't tried it yet. Use SPFx Extensions to customize the SharePoint user experience depending on your needs.