// Found on:
// http://sharepoint.stackexchange.com/questions/74674/how-can-i-add-a-custom-tab-to-a-ribbon-at-runtime-using-javascript-ecmascript
//This example requires JQuery to run because of $.extend()
Type.registerNamespace('Nova.TMRE.Ribbon');
//This class is used to help enable controls we create after the ribbon has been built.
Nova.TMRE.Ribbon.CustomChild = function () {
this.customChildren = [];
};
//Note: this method will need modifying to support controls like menus
//this will enable the control all all custom child controls it contains
Nova.TMRE.Ribbon.EnableControl = function (control) {
if (control) {
control.set_enabled(true);
if (control.set_enabledInternal) {
control.set_enabledInternal(true);
}
if (control.customChildren) {
var length = control.customChildren.length;
if (length < 1) {
control.set_enabled(false);
} else {
var element = null;
var tempChildren = [];
for (var i = 0; i < length; i++) {
element = control.customChildren[i];
Nova.TMRE.Ribbon.EnableControl(element);
}
}
}
}
};
var buttonAdded = false;
function AddButtonToRibbon() {
if(!buttonAdded){
buttonAdded = true;
} else {
return;
}
//First we need to make sure the ribbon is initialized
_ribbonStartInit(_ribbon.initialTabId, false, null);
//Get the instance of the ribbon
var ribbon = (SP.Ribbon.PageManager.get_instance()).get_ribbon();
//Get the initial tab the ribbon loaded, this is the tab we will use.
// var tab = ribbon.getChild("Ribbon.DocLibListForm.Edit");
var tab = ribbon.getChildByTitle("View");
//Get the page manage
var pageManager = SP.Ribbon.PageManager.get_instance();
//Create a new group for our controls to go into
var group = new CUI.Group(ribbon, 'Nova.TMRE.Group', 'Priority Payments', 'Priority Payments Controls', 'Nova.TMRE.Group.Command', null);
//Create a new layout and add it to the group.
var layout = new CUI.Layout(ribbon, 'Nova.TMRE.Layout', 'Nova.TMRE.Layout');
group.addChild(layout);
group.selectLayout(layout.get_title(), layout);
//Create a section
var section = new CUI.Section(ribbon, 'Nova.TMRE.Section.Large', 4, 'Top');
$.extend(section, new Nova.TMRE.Ribbon.CustomChild());
//Add a section to the layout
layout.addChild(section);
//Get the row we want to add a button to
var row1 = section.getRow(1);
//Define control properties for the button we are about to create
var controlProperties = new CUI.ControlProperties();
//Include desired properties.
//This property is the ID for the command we are giving the button
controlProperties.Command = 'Nova.TMRE.Button.Command';
controlProperties.TemplateAlias = 'o1';
controlProperties.Image32by32 = "/_layouts/images/SharePointDesigner32.png";
controlProperties.ToolTipTitle = "Test 02";
controlProperties.LabelText = "Reject Payment";
//Create a new Button
var fooButton = new CUI.Controls.Button(ribbon, 'Nova.TMRE.Button', controlProperties);
//Create a control component for the button
var controlComponent = new CUI.ControlComponent(ribbon, 'Nova.TMRE.MenuItem.Button', 'Large', fooButton);
//Link the control component back to the button, this looks weird but is necessary.
//The use of the variable $2J_1 is very bad this changes between SharePoint versions
fooButton.$2J_1 = fooButton.get_id();
fooButton.get_components().push(controlComponent);
//Make sure the button is part of our custom class, this is important for making sure the button stays enabled
section.customChildren.push(fooButton);
//Add the control component(and button) to the row
row1.addChild(controlComponent);
//Add the group to our tab once we have created and attached all the controls
tab.addChild(group);
//This is sort of hacky, but a custom command needs to be created to enable all the custom controls When RefreshCommandUI() is called
var cmd = new Object();
cmd.handleCommand = function (commandId, properties, sequenceNumber) {
var length = section.customChildren.length;
if (length > 0) {
var element = null;
for (var i = 0; i < length; i++) {
element = section.customChildren[i];
if (element) {
Nova.TMRE.Ribbon.EnableControl(element);
}
}
}
};
//Get the dispatcher
var dispatcher = pageManager.get_commandDispatcher();
//Register our refresh command with the dispatched
dispatcher.registerCommandHandler(Commands.CommandIds.ApplicationStateChanged, cmd);
//Create a click command for our button
var buttonCmd = new Object();
//This specifies that the button has a command and can be clicked
buttonCmd.canHandleCommand = function (commandId) {
return true;
};
//The command that is executed when the button is clicked
buttonCmd.handleCommand = function (commandId, properties, sequenceNumber) {
alert("Button Clicked");
};
//'Nova.TMRE.Button.Command' is the CommandID and must match the controlProperties.Command
dispatcher.registerCommandHandler('Nova.TMRE.Button.Command', buttonCmd);
//Refresh the UI so our control(s) are enabled
RefreshCommandUI();
}
function parseHierarchyTT(current, level){
//debugger;
var iid = current.get_id();
if(typeof current.get_title === "function") {
var title = current.get_title();
}
if(typeof current.get_componentElement === "function") {
var componentElement = current.get_componentElement();
}
if(current !== null && typeof current.$4_0 !== "undefined" && current.$4_0 !== null && typeof current.$4_0.getEnumerator === "function"){
var enm=current.$4_0.getEnumerator();
while(enm.moveNext()){
var chld = enm.get_current();
var chldLevel = level + 1;
parseHierarchyTT(chld, chldLevel);
}
}
}
// Note: 'SOD' is an abbreviation for "Script on Demand"
SP.SOD.executeOrDelayUntilScriptLoaded(function() {
var pm = SP.Ribbon.PageManager.get_instance();
pm.add_ribbonInited(function() {
AddButtonToRibbon();
});
var ribbon = null;
try
{
ribbon = pm.get_ribbon();
}
catch (e) { }
if (!ribbon) {
if (typeof(_ribbonStartInit) == "function")
_ribbonStartInit(_ribbon.initialTabId, false, null);
}
else {
AddButtonToRibbon();
}
}, "sp.ribbon.js");
Comments