Contextual tabs are the special ribbon tabs that are displayed only for specific item types. A good example is a Media tab which is displayed for all media items. Contextual tabs help reduce complexity and provide context-sensitive actions to the user.
I'll use our website as an example and will add a contextual tab to all partner items.
Designing the Ribbon
I'll design the ribbon first, which will be rather simple containing a single 'Open Website' button.
Note: It is essential to do this in the core database.
- Switch to the core database
- Open Content Editor and navigate to /sitecore/system/ribbons folder. I suggest that you create a subfolder and keep all your additions there for ease of future upgrades. I name the folder Website Contextual.
- Select New -> From Template and choose /templates/System/Ribbon/Toolbar template.
- Select the newly created item, then again New -> From Template and choose /templates/System/Ribbon/Strip template. Fill in header field (Partner)
- Repeat with /templates/System/Ribbon/Chunk template, also fill in header.
- Now create the item on /templates/System/Ribbon/Large Button template, fill in header, icon and click fields. The later defines the action to be performed on button click, by tying the button to a command. The template defines the look and behaviour of the ribbon element - in this case it will be a large button. After following these steps you should have the following setup:
Adding the Ribbon to Content Items
When the ribbon is designed, it's time to setup content items to display it. In this example we're adding the ribbon to all partner items. Luckily for me, partners have own Partner template:
- Copy the ID of the Partner Toolbar item to the clipboard. Developer tab is super useful for this.
- Switch to the master database, navigate to the Partner template.
- Click "Standard Values" to edit standard values for Partner template. This will apply the changes we're making to all items on the partner template, including the ones that have already been created.
- In the View tab, make sure both Standard Fields and Raw Values are checked. Find the Ribbon field in the Appearance section and paste the ID you've copied in step 1:
Check if everything is set up correctly - refresh, select any item on the template (or the __StandardValues item) and you should see the contextual tab:
The button doesn't do much, we'll fix that next.
Wiring up the Button
Last thing we're going to do is assigning action to a button - the example will open the partner website in a new window.
First, I create the following Command class:
namespace Sitecore.Website.Commands
{
public class OpenWebsite : Command
{
public override void Execute(CommandContext context)
{
PartnerItem partner = context.Items[0];
SheerResponse.Eval(string.Format("window.open('{0}', '_blank')", partner.Website.Url));
}
}
}
The Execute method gets the current item and then opens a partner website in a new window. What remains is to bind this class to "website:openwebsite" command which we assigned to the button.
Open /App_Config/commands.config file and add the following line:
<command name="website:openwebsite" type="Sitecore.Website.Commands.OpenWebsite,Sitecore.Website" />
Now it's all in place - restart and click the button to see it perform the action.
Design Considerations
When the new item is selected, the contextual tab will always be active instead of default one (Home). Be careful and do not overuse these - I'm not actually adding a tab to all partners only for the sake of 'Open Website' button, but it served well as an example.
If you do add the context tab, consider duplicating some most often commands from the Home tab. For example the Media tab repeats the Save button by using the 'Sticky Chunk' option on toolbar item:
Another option providing more control is using items of /templates/system/references template which provide "include" functionality for the ribbon.
Hope you find it helpful. Have any questions or requests to dig into these topics in greater detail - leave a comment or contact me: ar at sitecore net.