I’m building a custom ribbon control within a “Classes” list in a site I’m building. There’s another list in this site called “Registrations.” The idea here is that when a user selects a class in the Classes list, he/she has the option to click a “Register” button in the “Actions” section of the ribbon.
Building the custom action in Visual Studio 2010 was a breeze, and I finally got it working the way that I wanted, but it was using the genericfeature.gif that’s built into SharePoint and that particular image doesn’t really match the purpose of this button. For the record, I only used genericfeature.gif as a placeholder because I somehow memorized the URL to that particular image. Needless to say, I wanted the image of the button to represent something that makes a little bit more sense for its purpose.
I started looking into the other images on the ribbon, and a lot of them are coming from a built-in image named formatmap32x32.png located at C:\…14\TEMPLATE\LAYOUTS\1033\IMAGES. Below is what that particular image looks like and the individual image that I want to use for my Registration button is highlighted with a thick red border.
That’s quite an image! How does this actually work and how can I pull out just that one piece that I want? It’s actually not that bad. First of all, consider the name of this image: “formatmap32x32.png.” This should indicate to you that each of these images is individually 32x32 pixels in size. Now that we know that, we have to determine how to calculate the number of pixels over to the upper-left corner of the image that we want.
Finding the top of the image I wanted to use
- Counting from top to bottom, you can see that the image I want is in the 6th row.
- If each image is 32x32, then you would calculate that 32 x 6 = 192, which is of course correct. However, this represents the bottom of the image and we need to find the number of pixels to the top of the image. So we’d really just need to calculate 32 x 5 = 160, and we’ll use this 160.
Finding the left of the image I wanted to use
- Counting from left to right, you can see that the image I want is in the 10th column.
- If each image is 32x32, then you would calculate that 32 x 10 = 320, which is of course correct. However, this represents the right of the image and we need to find the number of pixels to the left of the image. So we’d really just need to calculate 32 x 9 = 288, and we’ll use this 288.
Here’s the final XML markup of my Elements.xml file for my custom ribbon control.
1: <?xml version="1.0" encoding="utf-8"?>
2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
3: <CustomAction Id="NewRegistrationRibbonControl"
4: Location="CommandUI.Ribbon"
5: RegistrationType="List"
6: RegistrationId="10001">
7: <CommandUIExtension>
8: <CommandUIDefinitions>
9: <CommandUIDefinition Location="Ribbon.ListItem.Actions.Controls._children">
10: <Button Id="bRegister" Alt="Register" Command="Register" Description="Register for the Selected Class"
11: Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png"
12: Image32by32Top="-160" Image32by32Left="-288" LabelText="Register" Sequence="10000"
13: TemplateAlias="o2" />
14: </CommandUIDefinition>
15: </CommandUIDefinitions>
16: <CommandUIHandlers>
17: <CommandUIHandler Command="Register"
18: EnabledScript="javascript:
19: function isEnabled()
20: {
21: var selectedClasses = SP.ListOperation.Selection.getSelectedItems();
22: return (selectedClasses.length > 0);
23: }
24: isEnabled();"
25: CommandAction="javascript:window.location('/sites/training/Lists/Registrations/newform.aspx?classid={SelectedItemId}')" />
26: </CommandUIHandlers>
27: </CommandUIExtension>
28: </CustomAction>
29: </Elements>
You can see that I’m referencing the formatmap32x32.png image here on line 11 and on line 12 I’m setting the “Image32by32Top” and “Image32by32Left” attributes to the pixel values we determined earlier. The before and after of my Ribbon control is show below.
Before
After
Now my custom ribbon control says “Register” and the visual aid here seems to make sense. When a student registers for a class, he/she is adding himself/herself as a person to the class, which is exactly what this image indicates to me when I look at it.
Why not design my own image, you ask? Excellent question! The reason is simple: I’m no graphic designer. In fact, I’m just not that creative in general. I can sit here and write code all day and make things work the way that they’re supposed to, but creativity is definitely not my strong suit.
I hope you found this post to be somewhat helpful and as I continue building my application, you can expect to see more posts similar to this one popping up between now and October 1st.