Announcing Responsive UI Package for SharePoint on-premises (2013 and 2016)

SharePoint Patterns and Practices

We are excited to announce availability of open source Responsive UI Package for SharePoint on-premises. This package is designed to transform your SharePoint on-premises deployment responsive where needed and it supports both SharePoint 2013 and SharePoint 2016 version.

Package is available from GitHub and it changes the native behavior of your SharePoint deployment by adding support for three different rendering options depending on the device screen size. You can deploy the package to any on-premises SharePoint site by simply using the provided PowerShell scripts. User interface changes are automatically applied based on the device screen size accessing the SharePoint site. 

Actual implementation is NOT using custom master pages, we rather embed the needed styling definitions and JavaScript files to the site using so called JavaScript embed pattern, which is explained in MSDN. This means that the responsiveness can be applied even if the sites are still using out-of-the-box master pages, which is the recommended options around UI customizations, where possible.

Here’s a screenshot of the normal desktop view.

normal desktop view


Here’s how the same page will look like in table view or in general when the screen size is smaller than suitable for the desktop view. Notice that the navigation is automatically hidden based on the screen size and shown when clicked again.

tablet view


Here’s same page in phone view or smaller device view. In similar ways as with table view, the navigation elements are automatically hidden, but shown when needed.

phone view or smaller device view


In the following video Paolo Pialorsi (Piasys.com) from the PnP Core team shows how to use the package and how it changes the user interface behavior based on the display resolution.

Video at Channel 9.

Resources

Can I use this in my deployments and how is it supported?

All assets released under the PnP initiative are open source and available for you to reuse anyway you want in your own deployments. Technical approach and implementation is fully supported by Microsoft, but since this is released under the open source approach, we do not have specific support available for this from the Premier support.

If there’s any technical challenges around the implementation or you’d like to get support around using it, we would suggest to use the Office Dev PnP Yammer group at http://aka.ms/OfficeDevPnPYammer for contacting Microsoft and community members who can provide you assistance or input around the possible questions you have.

If you find any issues on the provided package, please use the GitHub tooling to report issues or to submit directly pull requests to further enhance the provided capability. This package is provided as open source solution, so all contributions from the community are more than welcome.

What is SharePoint Patterns and Practices (PnP) initiative

This is a sibling initiative for the Office 365 Developer Patterns and Practices (PnP) initiative. We will be releasing more on-premises related solutions and scripts under the SharePoint PnP umbrella. We are also looking into providing these solutions for the community using more easily approachable channels, but the actual source code for the scripts and solutions will be located in the GitHub under OfficeDev organization.

What about SharePoint Online?

We have already previously released a similar package for SharePoint Online in the PnP Partner Pack. You do not need to deploy the full PnP Partner Pack to your environment to take advantage of these capabilities, you can rather just benefit from the provided provisioning template around the responsive user interface. Please see following resources around the PnP Partner Pack and responsive package support for SharePoint Online.


Thanks for your interest on the PnP initiate. If you have any questions, feedback or comments around the PnP, please use the PnP Yammer group at http://aka.ms/OfficeDevPnPYammer.

Sharing is caring!


Vesa Juvonen, Senior Program Manager, Office 365, Microsoft - 3rd of March 2016

Comments powered by Disqus