CustomUI Editor – add a gallery to your ribbon tab


Gallery_IX


In earlier posts i showed you how you can use the CustomUI editor to create your own tabs in the ribbon of the Office Applications. The second post told you how you could add your own images to your buttons in the ribbon. In this post i will show you how to create a gallery. As usual i will use Microsoft Word as the sample application. First let me show you what we mean by ‘a gallery’.

A gallery consists of a button with an additional arrow. This little arrow activates an expendable menu with various options to choose from. In the picture you see the gallery of the column options in Word. Now this is what we are after. We want to create our own gallery with pictures of Office applications which we can choose from. So the scenario is to create a tab with a button with an additional arrow which will show the various images to choose from which we can insert in our document. Gallery_I


First the prepping

  • Make sure you have a couple of images which you can add to your gallery. For this example i use the office apps icons i have.
  • Make sure you have the custom ui editor installed. If you don’t have it yet you can grab it here
  • Open Microsoft Word and save the document as a template (.dotm). You don’t have to type anything. For now we are just using the document as the container for our ribbon tab


Creating your XML in the customUI editor
So we are ready to create our xml in the customui editor. Open the customUI editor and choose open. Browse to the Word file you have just saved and open it. You will see an empty ui editor screen. From here it is up to you. In the first post i wrote about the ui editor i explained that a tab in the ribbon has a few default aspects that should be present in order for the tab to show up. First we need the namespace section. This is distuingished by the <customUI tag. Next thing is the <ribbon tag that should be present. The third tag we are looking for is the <tabs tag. After the tabs tag we need a <tab tag. The last essential tag that needs to be present is the <group tag. Now the easy thing is that every open tag needs a closing tag. For readability we indent every new tag. To sum up: for every tab you create you at least need this bit of starting xml.

In the image you see that you can start this bit of default xml by choosing custom tab from the menu. This will create the xml for you to start with. It will even add a button with a happy face on it 🙂 Gallery_II


Tuning the xml to create our gallery
With the default xml in front of us we are going to tweak this to our wishes. We don’t need a button so we get rid of that line of xml. After the group tag we add a new line of xml starting with a new indent below groups. We will choose the appropriate tag for the gallery option which is <gallery id. Somehow that did not come as a suprise right? I think that you know by now that you should have a closing tag as well. I have the habit of already placing the closing tags before i start adding info to the tag. So place the closing tag as well and you xml should look something like this:

Gallery_III


A quick word about naming conventions and ID’s
Every tag in the xml shoud get an ID. Wait… let me rephrase that. It should get a unique ID. In the xml you are writing this should be a unique name. Take a close look at the image above. You see that the follwing tags have been identified:

  • tab id=”MyGallery”
  • group id=”grpApps”
  • gallery id=”glyApps”


The tag ID’s are always preceeded by the object. So tab, group and gallery all have the word id after them separated by a space. This is mandatory. After that you see a description between double quotes. It is this name – which you provide – that has to be unique! So why is this so important? Well many people copy and paste xml code. So imagine if you copy and paste the lines of code of ten buttons. You would have 10 matching names for the buttons and that is not allowed. Every button should have a unique name. Just be aware of that if you start copy – pasting stuff!


Add the pictures to you xml
So we have the base xml ready and now would be a good time to add the pictures to your xml. In this example we are going to add the app. pictures. In the menubar click on “Insert” – “Icon…”. Browse to your directory where your images are. Select the ones you would like to add and click open. When done you might think that nothing has happened. You pictures are actually added to the xml but you just don’t see them yet. Click on the + sign to see your pictures added to your xml.

Gallery_V
Gallery_VI


Finish the xml
Ok we have the images added to the xml. Now let’s finish the remaining xml lines. First we are going to set the general options for the gallery. After we have done that we add the lines for adding the pictures to our gallery. Take a look at the image to see the lines of xml i have added:

Gallery_VII

Check the syntax
As a final check we have to see if the names used to reference the images are correct. In the image tag of you xml there is a reference to the images in the treeview of the custom ui editor. Make sure the name you use in your xml is identical to the name in the treeview. So with that in place click the save button.
Gallery_VIII


The gallery options
In your xml you have added some properties to the gallery. We set the label, imageMso, size, columns, rows, itemHeight, itemWidth and screentip settings. Important for the gallery in the ribbon are the columns, rows, itemheigh and itemwidth properties. You might have to do some tweaking here to get the view you think is most appropriate for you wishes. The columns settings will show the pictures in the cumber of columns you define here. It is possible to set this property to one. In that case you will see one column. The itemHeight and itemWidth properties are more important. Play around with these values to get the proper height and with properties without getting a distorted picture. Just adjust the numbers, click save and view the tab again. Not good? close the document, adjust the numbers in the xml again, save the document and view again.


View the result
Yep we are excited to see the end result… Open your word document and see if the additional tab is there. Click on the tab, see if the gallery button is there and click the arrow to expand it. You should see the images you have added to your xml. See the very first image of this post to see my result 🙂


In the next blogpost is will show you how you can add the chosen images to your document. For now this is the start. Experiment a bit, try different images, more or less images.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s