Add #Custom #Button in #ProjectOnline Ribbon

There are multiple ways to set the custom button actions. One of the option is using the console application to register the custom button. and JS to catch the action.

 

Console Application Code:


var actionName = "Ribbon.ContextualTabs.ProjectCenter.Home.GoTo.CustomButton";

var passWord = new SecureString();
foreach (char c in "password") passWord.AppendChar(c);

var creds = new SharePointOnlineCredentials("username", passWord);

var clientContext = new ClientContext("https://cmp123.sharepoint.com/sites/PPMPwaLearning/");
clientContext.Credentials = creds;

clientContext.Load(clientContext.Web, web => web.UserCustomActions);
clientContext.ExecuteQuery();

var customAction = clientContext.Web.UserCustomActions.FirstOrDefault(uca => uca.Name == actionName);

//if exists just delete and replace with new version
if (customAction != null)
{
customAction.DeleteObject();
clientContext.ExecuteQuery();
}

customAction = clientContext.Web.UserCustomActions.Add();
customAction.Name = actionName;
customAction.Location = "CommandUI.Ribbon";
customAction.CommandUIExtension = System.IO.File.ReadAllText("custom_ribbon_button.xml"); ; // CommandUIExtension xml
customAction.RegistrationType = UserCustomActionRegistrationType.None;
customAction.Sequence = 1000;

customAction.Update();
clientContext.Load(customAction);
clientContext.ExecuteQuery();

Console.WriteLine("Done");
Console.ReadKey();

 

Javascript Code to be placed in script editor(using page edit)

 


<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
console.log("Hey");
var findCustomButton=setInterval(function(){
if($('#Ribbon\\.ContextualTabs\\.ProjectCenter\\.Home\\.CustomActionGroup\\.CustomButton-Large').length){
$('#Ribbon\\.ContextualTabs\\.ProjectCenter\\.Home\\.CustomActionGroup\\.CustomButton-Large').removeClass("ms-cui-disabled");
$('#Ribbon\\.ContextualTabs\\.ProjectCenter\\.Home\\.CustomActionGroup\\.CustomButton-Large').prop('disabled','false');
$('#Ribbon\\.ContextualTabs\\.ProjectCenter\\.Home\\.CustomActionGroup\\.CustomButton-Large').click(function(){CustomApp.InvokeCustomFunction();});

clearInterval(findCustomButton);
}
},1000);

var CustomApp= CustomApp || {};
CustomApp.InvokeCustomFunction = function(){
alert('Hey Hey Hello!');
}
</script>