Display Ribbon always or Expand the Ribbon automatically when the page is loaded in Project Server/Project Online using Javascript

Posted on by

Hello Readers!

Today, we’ll see a common scenario. Usually when we open Project Center/Schedule page/Project details pages etc.. we have to make a click on the page in order to expand the ribbon. But have you ever think to open the ribbon automatically without even making any mouse clicks? Customers/End users will be happy if we do such smaller things and more over some of the end users who are new to the tool may confuse how to display the ribbon.

In this article, I’m providing a javascript code that displays the ribbon automatically when the page loads. Add this code to webpart inside the pdps.

<script type = 'text/javascript' >
var ribbonIDs = ["Ribbon.ContextualTabs.ResourceCenter.Home-title", "Ribbon.ContextualTabs.ProjectDrilldown.Tasks-title", "Ribbon.Tabs.PDP.Home-title", "Ribbon.ContextualTabs.ProjectCenter.Home-title", "Ribbon.Read-title"];

window.onload = function() {
ConfigRibbon();
};

function ConfigRibbon() {
if (typeof Ribbon !== 'undefined') {
Ribbon.onloadeddata = function() {
for (var i = 0; i < ribbonIDs.length; i++) {
if (ExpandRibbon(ribbonIDs[i])) {
break;
}
}
}
for (var i = 0; i < ribbonIDs.length; i++) {
if (ExpandRibbon(ribbonIDs[i])) {
break;
}
}
} else setTimeout("ConfigRibbon()", 100);
}

function ExpandRibbon(id) {
var el = document.getElementById(id);
if (el) {
var event = document.createEvent("MouseEvents");

event.initEvent("click", true, true);
event.synthetic = true;

el.childNodes[0].dispatchEvent(event, true);
return true;
}
return false;
} 
</script>

Alternatively we can also use the below built in method to display/expand the Ribbon.

	_ribbonStartInit('Ribbon.Tabs.PDP.Home',false, event);

Thanks for reading. Happy coding 🙂

Related Posts: