Partager via

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

  • Article

[Cross posting from dev.office.com]

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.

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.

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.

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 https://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 https://aka.ms/OfficeDevPnPYammer.

Sharing is caring!

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

Comments

  • Anonymous
    March 03, 2016
    Hi Vesa, This is great news that PnP is providing the responsive design . Is there any specific reason why is  it not applicable for the SharePoint Online . I am trying to achieve the responsiveness with JS Injection and the bootstrap classes . I would like to use the PnP one if possible .

  • Anonymous
    March 03, 2016
    HI Ajesh, this is available for the SharePoint Online as well, like mentioned in the above post under the "What about SharePoint Online?" chapter. This has been released already back in November 2015 and you can simply use the responsive assets from the PnP Partner Pack. There are some style differences between SPO and on-premises, which is why these need to be separate. If there's any other questions or comments, would suggest to use the PnP Yammer group at aka.ms/OfficeDevPnPYammer.

  • Anonymous
    July 07, 2016
    According to the info on the GitHub repository page, this package is designed to work with Team Sites. This page, however, does not mention any such limitation. Will it work with SP Publishing sites, or not?