PNP Responsive UI Package for On-Premise SharePoint 2013 and 2016

Last month the SharePoint Patterns and Practices (PnP) group released the Responsive UI Package for SharePoint, a solution that makes SharePoint 2013 and SharePoint 2016 sites more responsive in tablets and mobile phones.  The solution uses JavaScript embed pattern to embed the styles and scripts to the site without making changes to master pages.

Installing the Responsive UI Package

1.      Before installing the Responsive UI Package, the below prerequisites have to be setup

a.      SharePoint 2016 or SharePoint 2013 with SP1 and April 2015 CU

b.      Download and install Office 365 Dev PNP commands from GitHub

2.      Download the Responsive UI Package zip file from GitHub and unzip them in a folder on SharePoint server

3.      Open PowerShell and navigate to the folder where the Responsive UI package files are unzipped.

4.      Then execute the Enable-SPResponsiveUI cmdlet against the site collection which you want to be responsive. The command takes 3 parameters

a.       TargetSiteUrl -  The URL of the Site Collection, where the Responsive UI will be enabled. for example: http://mysharepointintranet.com/sites/Site1

b.      InfrastructureSiteUrl - Is an optional parameter, which specifies the URL of Site Collection, where the JavaScript and CSS files used by Responsive UI solution will be uploaded.

c.       Credentials – Is the user credentials that will be used to authenticate against both the target Site Collection and infrastructure Site Collection and should be the credentials of a user with Site Collection Administrator rights. If the parameter isn’t provided PowerShell will prompt for credentials.

Example syntax: Enable-SPResponsiveUI.ps1 -TargetSiteUrl "https://mysharepointintranet.com/sites/site1"

5.      Executing  Enable-SPResponsiveUI cmdlet  will install the Responsive Package to the target site and if successful will display Responsive UI application succeeded in green font.

6.      The responsive UI Supports 3 rendering modes, desktop, tablet and smart phone. Below screenshots shows how the default SharePoint 2016 UI renders in these modes after Responsive UI Package is installed for a site collection.

Desktop Rendering

Tablet Rendering

Mobile Rendering

7.      To deactivate the Responsive UI, execute the Disable-SPResponsiveUI cmdlet by passing TargetSiteURL and Credentials parameters.