In the last weeks I’ve extended the sample project that I’ve created for “Ribbon Customization”. You find the project source code on Codeplex:
The related articles on my blog are:
- Part 1: How To Activate SharePoint Ribbon Tab by JavaScript Code
- Part 2: Sample Visual Studio 2010 project for creating a custom SharePoint 2010 Ribbon tab on runtime (!)
- Part 3: Additional Ribbon Sample: Custom Ribbon Tab generated by a delegate control that lists all associated list workflows and allow to start a workflow on a selected list item.
There are lots of excellent articles out there about SharePoint 2010 Ribbon customization.
Some articles that helped me:
- Chris O’Brien’s Blog – Customize the ribbon programmatically from web parts and field controls
- Microsoft SharePoint Team Blog
- Elumenotion Blog – Code to Hide the Ribbon and Site Actions Menu for Anonymous Users
- Makarand Kulkarni’s Blog – SharePoint 2010 Ribbon Customization Part I: Architecture of Ribbon
Especially the first blog post in the above list leaves a question open: "Using client-side code to show ribbon items".
I had the same problem: How to activate a custom SharePoint Ribbon tab by JavaScript code?
After some reading in SharePoint standard JavaScript files I found the solution. I used some jQuery too:
1: $(document).ready(function () {
2: ExecuteOrDelayUntilScriptLoaded(salesappActiveRibbonTab, "sp.ribbon.js" );
3:
4: function salesappActiveRibbonTab() {
5: try {
6: _ribbonStartInit("MyApp.SharePoint.Ribbon.CustomTab" , false , null );
7: } catch (e) {
8: };
9: };
10: });
This allows me to activate my custom Ribbon tab with ID "MyApp.SharePoint.Ribbon.CustomTab" by JavaScript code. It works pretty fine!
Update 1
Meanwhile I created an test project for adding a custom ribbon tab while runtime. There I have had the problem, that the ribbon was created correctly BUT was not activated thru the code above. After some debugging of MS Ribbon JavaScript I created the following code:
var ribbontestintervall = null;
function RibbonTestActiveRibbonTab2() { try { window.clearInterval(ribbontestintervall);
if (typeof (_ribbonStartInit) == "function") _ribbonStartInit('RibbonTest.SharePoint.Ribbon.CustomTab', false, null);
if (true && typeof (_ribbonReadyForInit) == 'function' && !_ribbonReadyForInit()) { ribbontestintervall = window.setInterval("RibbonTestActiveRibbonTab2()", 1000); } } catch (e2) { };
};
So the Browser retries the activation of the tab as long as it works.
Update 2 (2011/01/14)
See my new post and sample project on CodePlex :
Sample Visual Studio 2010 project for creating a custom SharePoint 2010 Ribbon tab on runtime (!)
Update 3 (2011/03/03)
Next part posted today. See the part list at the top of this blog post.
I combined your code examples into the following:
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(RibbonTestActiveRibbonTab2, “sp.ribbon.js” );
var ribbontestintervall = null;
function RibbonTestActiveRibbonTab2()
{
try
{
window.clearInterval(ribbontestintervall);
if (typeof (_ribbonStartInit) == “function”)
{
alert(‘test3’);
_ribbonStartInit(‘Ribbon.LiveAtEduTab’, false, null);
}
if (true && typeof (_ribbonReadyForInit) == ‘function’ && !_ribbonReadyForInit())
{
alert(‘test2’);
ribbontestintervall = window.setInterval(“RibbonTestActiveRibbonTab2()”, 1000);
}
} catch (e2)
{
}
}
});
but although it does not give off any errors it also does not produce a ribbon tab. Could you do an suggestion?
Hi Bart,
please try an “alert” in the “catch”-Section to see if there are any exceptions. – Another point is that jQuery has to be available on the site! – Have you done that?
Kind regards
Ingo
Hi there,
Is it possible to use this to set a page back to Browse mode when the page loads? At the moment one of my pages opens in edit mode because of a form web part and I want to know how to get it to open in browse mode.
Any help would be enormously appreciated.
M
Hi M,
you could try to use the tab ID “Ribbon.Read” instead of “MyApp.SharePoint.Ribbon.CustomTab” in the sample code above. This is the tab ID of the “Browse” tab. – You can find a the standard Ribbon definition in the 14 hive: Common FilesMicrosoft SharedWeb Server Extensions14TEMPLATEGLOBALXMLCMDUI.XML.
Kind regards
Ingo
I would recommend rather to use SelectRibbonTab(tabId, force) using CUI.js or INIT.js
I want to create four tab ribbon for a content/publishing page in Sandbox solution.I created the structure of ribbon but i don’t get any solution to show my ribbon on a particular page.Can you suggest me that how can i show my ribbon on a page in sandbox environment because sandbox have own limitation you know so i can’t use web part,user control etc.
Hi!
AFAIK you can use “Web Part” project items in Sandboxed solutions – but not “Visual Web Part”. (There is an extension out there to use also “Visual Web Part” in Sandboxed Solutions: http://visualstudiogallery.msdn.microsoft.com/8e602a8c-6714-4549-9e95-f3700344b0d9/)
Please try this and post your results or request for further help 🙂
Kind regards
Ingo
Hi, i tried your code to set Ribbon.Read as default tab. I am able tohe see Ribbon.Read set to the default tab. But i am getting a javascript error after Ribbon.Read tab is selected default. The error is like “Attempting to attach to Id: Ribbon.Read but this id is not present in the DOM..” please help