Saturday, July 05, 2014

Add Custom JS Object Oriented code in SharePoint Site (MDS included) and associate Actions

Hi all, 

Some time ago had a question on how we can create a Custom JS Object code and be available in all SharePoint Site.
The problem of the developer was the fact for every customization was included in pages like webPart or references to JS file or embedded code, with one or 2 pages are ok, but the monster grown up and show their teeths and became unmanageable, now he needs to structure all code in custom JS Object oriented and associate to the correct pages.

Then came SP2013 and MDS after everything became harder again. :)

This example create a possible scenarion where you can add your custom JS Object model, capture the correct page and inject the Business Code for that specific page and also include methods that can be used in Actions like Custom Ribbon Buttons. 

Here the expected output:



Example:
This Solution will try to create a example where i make a simple Custom Javascript Object oriented code in JS file that is call "Company.Core.js". 
The Code validates the URL (with or without MDS) from SharePoint Site and if needed load the correct Script for specifics pages.
For this example was created 2 Ribbon Buttons Actions that make calls to function from the Custom JS Object  "Company.App.SP.Core" included by ScriptLink.
This code will be loaded in all SharePoint Pages even if is MDS activated or not.

Why this approach?
This example helps developers to define Custom JavaScript Object with Business /Customization code for better response the Clients requests.
Provides the center of Management of your code, avoid management of WebParts with Scripts, change MasterPages and avoid possible issues with Migration and Upgrades in Page with custom code also give access to some Backgrounds Pages like "/_layouts/15/viewlsts.aspx" where you can load specific JS Code and  better management of Permissions to Developers "they just need to update the version of Javascript and support Files (css, imgs, js)".
The example also includes a method to call JS code without breaking the Minimal Download Strategy service when the page is loaded.

Architecture of the solution


Support Files to example:
  • Jquery.*.js
  • Company.Core.js (Custom JS Code with Business rules and Code Management) 

Company Core Javascript File

The Core file is key to manage all scripts and associated to specific pages.

Create js file "Company.LoadScript.js" and include the following code.

//Load Method LoadScript() after page is loaded
$(document).ready(function() {LoadScript();});
//If MDS Activated this method capture the haschchange and loads Method LoadMDSScript();
$('body').append('<script>window.onhashchange = locationHashChanged;function locationHashChanged(){LoadMDSScript();}</script>');

function LoadMDSScript(){
//Load Method LoadScript() after DOM OBjects are loaded
$(window).load(function () {
        LoadScript();
});
}
//Call JS Custom Object and get correct URL for possible code validation
function LoadScript(){
var status2 = SP.UI.Status.addStatus("Info:", "<b>Page Url:</b>"+_spPageContextInfo.serverRequestPath+"<br/><b>MDS Url:</b>"+document.location.pathname +document.location.hash);
        SP.UI.Status.setStatusPriColor(status2, 'blue');
Company = {
Version: "1.0.0",
App: {
SP: {
Core: {
GetContentFromObject: function(Title,data) {
alert(Title + " \n"+ data);
}
}
}
}
};
}

Support Code in Page: 
How to Create Global Custom Ribbon using ScriptLink without MDS issues

Include File in Library Site Assets

With the file created drag and drop or Upload file "Company.LoadScript.js" in Site Assets Library in the Hosted SharePoint Site.


This Method Loads JS Object Company.App.SP.Core, from there i can create Methods to support you code, for this example i pick the Url of MDS and without MDS using the Method "_spPageContextInfo.serverRequestPath"  






Add ScripLink to support Files

I use the  RibbonManager App, to include the Scriplinks in the Host Web Site.
If you like to use Visual Studio and Declarative code you can use the following XML.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Global Jquery" Title="Global Jquery" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/jquery-1.10.2.min.js" Sequence="1" > </CustomAction>
</Elements>

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Company.Core" Title="Company.Core" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/Company.LoadScript.js" Sequence="2" > </CustomAction>
</Elements>


Associate Actions to Company.App.SP.Core functions

For this example was create 2 Ribbons with custom Actions to retreive selected items and the List Id.

For the creation of the Ribbon and Actions i used the RibbonManager App, 
Create a Custom Action "Custom.Ribbon" and associate location "CommandUI.Ribbon", then associate all Document Libraries using ID "101" and include 2 custom Ribbon Controls "Get List Id" and "Get Selected Item ID".



For each Ribbon was selected the Type Button and include the Action associated with Custom JS Method "Company.App.SP.Core.GetContentFromObject(‘Title',‘Value')".


After the Ribbon is created in the RibbonManager SharePoint App, you can return to Host SharePoint Site and access a Document Library, there 2 new options in the Ribbon Tab "Library", when selected return the ID of the List and the ID of the selected Item as shown in the images below.





To put everything together and to show how simple this can be made, this video show all the steps and expected behavior of example.


Hope you like this new article, 
Kind regards, 
André Lage
Post a Comment