Based on the latest recommendations from Microsoft, User Interface SharePoint 2013 & SharePoint Online should be customized using Client Side Frameworks and not using Traditional Master Page Customization based on Branding Solutions.
This sounds similar to the implementation of the Delegate Controls in an on premise SharePoint Installation but in this case we push the scripts from outside of the SharePoint Environment.
Using Client Side Frameworks such as JQuery along with this technique we can perform DOM Manipulation (adding, removing, modifying HTML Elements) as and when needed in whichever ways.
Lets’ start with a SharePoint App Project by selecting App for SharePoint Project Template
Specify the Site URL
Choose Provider-Hosted as hosting model in order to develop High Trust Apps
Choose ASP.Net Web Forms Application to create Web Application Project for the Provider Hosted App
Provide Certificate details for the High Trust Apps
Now once the project is ready we can start with the coding part of Solution as follows-
Steps 1 – In the default.aspx add HTML code to provide UI for the solution
In the App.js file add the following code-
Steps 2 – Refer the JQuery File from the CDN
Steps 6 – Inside ModifyHostWeb function
- We are manipulating the Site Title of the Host Web by using JQuery Element Identifier
- We are replacing the Site Icon of the Host Web by using JQuery Element Identifier
Steps 7 – Inside LoadJQuery function we are loading JQuery File from the CDN
Steps 8 – Here we are hooking up the button click event for InjectJs & RemoveJS HTML buttons
Preparing path of the Script file that we are going to inject into the Host Web and embedding it by creating the dynamic script block with src attribute set to the script file path.
Then we are retrieving the UserCustomActions collection in context of the Host Web and adding the new User Custom Action with Location as Script Link and Script Block as dynamic script block created earlier
With this we are done with the code.
Now lets’ run the App and see it in action by pressing F5 in Visual Studio
Once the App launched we can see the UI with a Result Panel & two HTML Buttons
If we look the Host Web before embedding the script to it, it would look like as follows. Notice we have default Site Icon and Title which was provided at the time of site creation
And since this change takes place at the Master Page Level, we can see the effect of the change all across the site on every screen as shown below:
Once the Remove operation has been completed successfully we can see the result panel confirming the success of the operation.
And we can go back to Host Web to ensure that the Site Icon and Original Title are restored back as usual.
Point of Caution
It is the responsibility of the App Developer to handler the smooth removal of the injected code as soon as the App gets uninstalled. There are a couple of issues that I would like to point out around this fact as follows:
If code is injected using Provider Hosted App, then it is possible to get it removed automatically by handling App Uninstalling Event using Remote Event Receivers. You can refer to following of my earlier blogs on Remote Event Receivers to get better understanding on usage
That’s all for this demo.
Hope you find it helpful.