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.

1. Switch to the core database
2. 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.
3. Select New -> From Template and choose /templates/System/Ribbon/Toolbar template.
4. Select the newly created item, then again New -> From Template and choose /templates/System/Ribbon/Strip template. Fill in header field (Partner)
5. Repeat with /templates/System/Ribbon/Chunk template, also fill in header.
6. 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:

1. Copy the ID of the Partner Toolbar item to the clipboard. Developer tab is super useful for this.
2. Switch to the master database, navigate to the Partner template.
3. 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.
4. 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.

From the Sitecore Developer Network Forum: you can use the 'Filter' property of DataContext to filter the items being displayed in DataTreeview or DataListview controls.

<DataContext Filter="'FieldName='value'" /> will only show items with certain value in FieldName field, for example.

Read more (SDN Forum).

Sheer UI doesn't work during initial load stage. To be able to send sheer commands (anything in ClientResponse.*) you need to wait for or trigger an event (ClientPage.IsEvent == true). Below is the javascript one liner that does just that: sends a 'sheer:load' message once the window load occurs in browser.

<script language="javascript">
  scForm.browser.attachEvent(window, 'onload', function() { scForm.invoke('sheer:load'); });
</script>

[HandleMessage("sheer:load")]
protected void SheerLoad(Message message)
{
  // Send load Sheer UI commands from here
}

And since we're talking sheer UI: ever felt tired typing [Sitecore.]Context.ClientPage.ClientResponse all the time? If so, check out Sitecore.Web.UI.Sheer.SheerResponse static class.

I'm not sure whether it's a great example of Sitecore extensibilty or of things you shouldn't do, but I though I'd share it anyway :)

This little snippet adds shortcut to all content sections (and a little unsupported yet indispensable dbbrowser) to the Sitecore task bar. What is good about is, is that its very easy to install: download and unpack to your /sitecore/shell/override, its just two xml layouts with embedded code. The dark side is that you have to put them in override folder to replace the standard Sitecore start bar. So if the start bar changes in future builds - yours won't.

Fortunatelly, uninstalling is just as easy: remove the Startbar.xml and StartbarSections.xml files and thats it. Standard disclaimers apply: if your PC turns into evil alien monster and starts dissecting humans - you have been warned. Although it might be a good idea to keep your production server clean, I (humbly) find this control to be very useful in development environment.

Once again - download link (3kb).

I've mentioned earlier in Sitecore yahoo group the possibility of creating a replacement of multi list field by replacing left select box with a tree view. The control now is available at SDN5 in shared source form and I encourage everyone to take a look at it, as I believe the field to be very useful in situations when you have large number of items to choose from (Multi list with 100 items doesn't look pretty).

Shared source library got reinforced with Sitecore RSS portlets. There are basically two kinds of portlets - "Feed subscription manager" is used to subscribe/modify/unsubscribe, and feed reader portlets retrieve and render feeds. When you add a new feed, subscription manager adds a new portlet in portal and then users can add it to portal using the 'Add Content' button.


Portlets are installed in Sitecore Today portal by default, but you can move them to any portal of your choice.
Please note that its more of a demo, so there's no caching or uniform feed model. You can subscribe to atom feeds, but you will need to create and use different transformation for them.

We've put on hold the two big articles I've told about in the last post. Reason? We expect similar articles right from the heart of the Sitecore development, and we expect them soon!

So, we've decided to keep converting our support knowledge base into the smaller articles. Here are the new ones:

Item-Specific Context Menu. How to dynamically create the context menu depending on the list item that was clicked.
Toggling Control Visibility. Shows how to show or hide any control in the application based on user preference (using the Registry).
Customizing Upload Process. How to tweak the media upload process (customizing the uiUpload pipeline)

All articles I've put here previously as the word documents are now available at the SDN5:

Understanding Workflows. Basic information on the Sitecore V5 workflows.
My First XAML Application. XAML application basics.
Publish Queue Viewer. Creating the real-world application and using the advanced controls.

Next week I'll go through the last ones and update them basing on the feedback I've received.

Right clicking doesn't select a Listview item, so you cannot use .Selected property to determine which item was clicked. But you often will need to know that, because context menu items can depend on the actual item. Content Editor, for example, dynamically populates list of masters available for the item when you right click it in the content tree. This is where ClientRequest.Source comes in handy.

Notice: an updated version of the article is available at Sitecore Developer Network.

Sometimes you'll want user to be able to show/hide controls in the application. Here's a small example.

A sample application:

<Action ID="HideAction" Checked="true" />
<Listview ID="Listview" View="Icons" Background="White>
   ...
</Listview>
<Button Header="Toggle Listview" Click="ToggleListview" />

protected Listview Listview;
protected Action HideAction;

// Show / hide the Listview control
protected void ToggleListview()
{
    // Hide if previously shown, and otherwise
    if (HideAction.Checked)
    {
        Context.ClientPage.ClientResponse.SetStyle("Listview", "display", "none");
    }
    else
    {
        Context.ClientPage.ClientResponse.SetStyle("Listview", "display", "");
    }
    // Remember the current visibility status
    // If you want to persist the user setting, you'll also have to throw in a Registry.GetBool / Registry.SetBool
    HideAction.Checked = !HideAction.Checked;
}

Note: This is only needed when changing visibility during postbacks. You can simply use control's .Visible property in OnLoad() method

Notice: The up-to-date version of the article is available at Sitecore Developer Network.

This article is a sequel to last one.

This installment starts right where the last article, “My First XAML Application” has left. If you haven’t read it and are not familiar with XAML programming concepts, it is advised that you read it first.

We will build a publish queue viewer application. It will allow us to see the list of items that were changed since the previous publishing and thus wait to be published. Of course the main purpose of the article is educational: showing how to create a real-world application and work with advanced controls. However the application itself is fully functional and can be used in the day-to-day work.

Building Publish Queue Viewer.doc (663.5 KB)
SDN5 Source Code

Notice: An updated version of the article is available at Sitecore Developer Network.

From the introduction to the article:

XAML (eXtensible Application Markup Language, pronounced as ‘zaml’) is the new declarative markup language used to create user interfaces. XAML combined with the Avalon graphics engine is one of the main pillars of ‘Longhorn’ new generation OS from Microsoft. However, you don’t have to wait that long in order to use it. Sitecore V5 introduces new feature called XML layouts. Now you can create rich and powerful user interfaces faster than ever before, using the XAML markup and Sheer UI as a rendering engine.

The article guides you through the process of creating your first XAML application for the Sitecore client. We will create a playground for you to toy with the new technology and explore its possibilities.

Once you’ve comfortable with this material, you will be able to advance to the next article – building a real-world valuable application. We will build a Publish Queue Viewer application that will show a list of items waiting for the publishing, showing how to work with most advanced and ready-to-use controls.

[Please use the Sitecore Developer Network downloads]