Tag Archives: gallery

TechNet Wiki Summit – This is for You!

Banner2_jpg-550x0

First things first. This Summit is for you and is Free to attend! Go to this page and register. Have a look here at what this Summit has to offer you. Date: ย March 17-18-19, 2015. Well with that done let me explain a little about TechNet and TechNet Wiki.

Community work
One of the things I like to do when I have some spare time is write blog posts about the technology is use in my work related activities. Before you can answers questions or help people with their technology related issues you have to gain the knowledge yourself. Well let me tell you the TechNet environment is just the place to start. Whether you just want to absorb or really want to participate this is the place to be.

TechNet Home
Sure every site has a starting point. TechNet is no exception. Here we go… http://www.technet.com
TechNet_IINow have a look. The Home page does offer some interesting options. But have a look at the menu bar. That’s where the real magic is. The Third option “Wiki” has a ton of information at your disposal. Credo here? Can’t find it – Write it! How cool is that.
TechNet_IIITake your time
Let me tell you, this is not the place you explore in a couple of minutes. There is so much going on that might take you a while so here’s the tip: bookmark this place and come back regularly. All activity you see here is done by enthusiasts, evangelists and people who want to be involved. You can be a part of that as well. Tip: half way down this page you will find aย link to the Wiki Ninja’s blog. Have a look there and see how much activity is going on!

Gallery
So what could this option be? Some sort of show off directory what everyone is doing? No way this is the place where enthusiasts share their knowledge. Thousands of free downloads contributed by volunteers. Looking for a script to print all AD users to an Excel file? It’s here. Looking for free Powershell scripts? It’s here. Go on have a look and see what’s available for you. I’ll bet you find what you have been looking for all this time. Same credo here… can’t find it, write it and contribute it here.

Forums
For years I have been active in Forums and this one is no exception. Users from all around the world post their questions here and it is up to the community to answer them. Let me tell you if you post a question here it will be answered!
TechNet_IForums are the place where you go to if you have a question and would like some help from other people who just might know the answer. Just about every IT related subject can be a topic. I have to say that by just reading answers from all those volunteers you will gain a lot of knowledge as well. Best thing would be to participate. And don’t be fooled you will be taken seriously here no matter how simple the question might be.

Summit Tracks
I hope this post will give you some insights in the TechNet community. As I stated earlier the upcoming Summit is organized entirely on a voluntary base. You can choose from various tracks:

TechNet_Dev_Track

TechNet_Wiki_Track

TechNet_Infra_Track

Well all I have to say now is I’ll be there… will you?

p.s. you don’t even have to leave your house for it ๐Ÿ™‚

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.