Extending the SharePoint Core JavaScript

Posted 6 February 2018 12:00 AM by Ian Jackson, Front End Solutions Architect @ ClearPeople

Every now and then I come across a problem with the SharePoint core script.

In this case I have an issue with the workspace dimensions when viewing on narrow screen.

The page initially loads with the ribbon buttons at their regular size but wrapping onto two lines.

A moment later the ribbon is automatically adjusted to fit.

But now there is a space at the bottom of the screen below the SharePoint workspace canvas.

The naive developer in me is urged to fix this using CSS. We could make the SharePoint workspace 100% high. Or use some jQuery to change the height of the workspace to match the window height.

In my experience I have learned not to play too much with the workspace in SharePoint using custom code as it will most definately lead to other problems.

To resolve the issue it is much less invasive to extend the SharePoint script which is initially causing the problem and fix it at the source.

When I inspect the ribbon buttons I notice that a particular class is added depending on the screen size. This class name determines the size of the buttons.

This class name is applied to the buttons from the init.js file. This was evident after searching the SharePoint scripts for the classname.

The array g_ribbonHeaderScaleClass is used from inside this function.

_ribbonHeaderScaleIndex - This is the source of our problem!

Now we just need to extend this function while adding some extra code.

What this function is missing is a call to the FixRibbonAndWorkspaceDimensions() function which is used each time the window is resized so that the workspace is the correct width and height.

To extend the _ribbonHeaderScaleIndex function, we do the following.


	var old_ribbonHeaderScaleIndex = _ribbonHeaderScaleIndex; //Create reference to original function
		Override original function
	_ribbonHeaderScaleIndex = function () {
			Call original function
		old_ribbonHeaderScaleIndex.apply(this, arguments);

		console.log('Fix workspace dimensions');

}, "sp.js");

By adding this code to the page we solve our issue! This will allow the intended code to run as usual but with an additional piece that we need.


Add your comment





intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath