SharePoint Patterns and Practices (PnP) has launched its open source Responsive UI package for the SharePoint on-premises a few months back. This is an open-source solution available for the client-side code that is responsible for making the SharePoint 2013 and 2016 version responsive for the mobile devices. Even you don’t need to worry about the master pages as the complete solution will not hamper the Master pages as everything is going to happen only with the client-side JS and CSS.
Since most of you spend time in SharePoint software development process to design a responsive website, learning a little bit about it would help in going through a smooth process.
What did this Responsive Design Package mean to you?
You might have got this thought, what would happen after applying this package? There will be two scenarios. Firstly, the “View Feature” of the mobile browser will get deactivated. Secondly, a Custom Action will be applied which will add a call to PnP-Responsive-UI.js from the page <head>. Afterwards, the script will perform the actions, including changing DOM, adding the reference to jQuery, loading responsive styles (pnp_responsive_ui.css) and showing hiding hamburger menus.
Steps to install Responsive UI Package
Before starting working on the Responsive UI package, first, make sure to perform the steps below:
There are three steps to set up the Responsive UI :
1. Download the files: Download the file one by one from this link. All the files are available in this path - /Solutions/SharePoint.UI.Responsive folder within the ZIP file.
2. Software requirements: In the next step, install the OfficeDevPnP.PowerShell commands.
3. Execute the Enable-SPResponsiveUI cmdlet: Open PowerShell console, locate the folder where you have stored the files and execute the Enable-SPResponsiveUI cmdlet.
The three parameters to be used are :
TargetSiteUrl : Always use the full URL and declare the URL of the Site Collection where the Responsive UI will be enabled.
InfrastructureSiteUrl : This is an optional step to declare the URL of an infrastructural Site Collection. This will extend its support to the Responsive UI solution by uploading or updating the JavaScript and CSS files. If not provided, then the cmdlet will consider the Site Collection to host these files.
Credentials : This is an optional parameter. This is used to define the credentials which will validate the Site Collection and Infrastructure Site Collection. The user credentials will be of the administrator’s Site Collections. If this parameter is not provided then the script will prompt for the credentials.
Steps to disable Responsive UI
To disable the Responsive UI, execute the Disable-SPResponsiveUI cmdlet which is available in Disable-SPResponsiveUI.ps1 script file. It uses two parameters TargetSiteUrl and Credentials.
Know more about the Responsive UI from here.
Since most of you spend time in SharePoint software development process to design a responsive website, learning a little bit about it would help in going through a smooth process.
What did this Responsive Design Package mean to you?
You might have got this thought, what would happen after applying this package? There will be two scenarios. Firstly, the “View Feature” of the mobile browser will get deactivated. Secondly, a Custom Action will be applied which will add a call to PnP-Responsive-UI.js from the page <head>. Afterwards, the script will perform the actions, including changing DOM, adding the reference to jQuery, loading responsive styles (pnp_responsive_ui.css) and showing hiding hamburger menus.
Steps to install Responsive UI Package
Before starting working on the Responsive UI package, first, make sure to perform the steps below:
There are three steps to set up the Responsive UI :
1. Download the files: Download the file one by one from this link. All the files are available in this path - /Solutions/SharePoint.UI.Responsive folder within the ZIP file.
2. Software requirements: In the next step, install the OfficeDevPnP.PowerShell commands.
3. Execute the Enable-SPResponsiveUI cmdlet: Open PowerShell console, locate the folder where you have stored the files and execute the Enable-SPResponsiveUI cmdlet.
The three parameters to be used are :
TargetSiteUrl : Always use the full URL and declare the URL of the Site Collection where the Responsive UI will be enabled.
InfrastructureSiteUrl : This is an optional step to declare the URL of an infrastructural Site Collection. This will extend its support to the Responsive UI solution by uploading or updating the JavaScript and CSS files. If not provided, then the cmdlet will consider the Site Collection to host these files.
Credentials : This is an optional parameter. This is used to define the credentials which will validate the Site Collection and Infrastructure Site Collection. The user credentials will be of the administrator’s Site Collections. If this parameter is not provided then the script will prompt for the credentials.
Steps to disable Responsive UI
To disable the Responsive UI, execute the Disable-SPResponsiveUI cmdlet which is available in Disable-SPResponsiveUI.ps1 script file. It uses two parameters TargetSiteUrl and Credentials.
Know more about the Responsive UI from here.