Add-in Express 2010 for Office: new GUI designers and the new guy

Firstly, let me introduce myself, I'm Pieter van der Westhuizen, a recent addition to the Add-in Express team and I will be your host on a series of blog posts covering various aspects of the Add-in Express product range. As a keen user of the Add-in Express tools, this is an ideal opportunity to share my knowledge and experience with like-minded users.

I am looking forward to a long and fruitful relationship with all the Add-in Express fans! Well, enough dilly dallying, let's get down to business.

As you know the Microsoft Office 2010 release is around the corner, bringing a whole new experience to the MS Office user interface. With it comes a host of new opportunities for us as Office Add-in developers to develop awesome products for our customers; and of course Add-in Express 2010 will ensure you can deliver on all the promises.

I prefer using scenarios to highlight and explain things, so we’ll try and take a similar approach as much as possible with this blog series. Let’s imagine Northwind Traders (I am sure you are all familiar with our friends from Northwind?) hired us to develop an integrated Customer, inventory and order management system. They have invested in upgrading to Office 2010 and would like their new system to be built on their existing infrastructure.

For a start we’ll have a look at using the new GUI designers in Add-in Express 2010 to build the initial UI for the primary application they’ll be using in Outlook 2010.

Firstly, create a new ADX COM Add-in project and open up the add-in module designer (see my Add-in Express 2010 and Office add-ins: Getting started post on how to do it).

Add-in module designer

In the previous version of Add-in Express you would’ve added a new component by right clicking on the designer and selecting the desired component from the context menu. Although the context menu still exists, you’ll notice a much easier and quicker way to add your component on the top part of the add-in designer … via a toolbar!

All the usual components as well as a few additional components are available directly from the toolbar. Let us go ahead and add a RibbonTab: Click on the Add ADXRibbonTab button on the toolbar. You can still use the context-menu, by right clicking on the Add-in Module designer and selecting Add Ribbon Tab. A new component will be added to the Add-in module designer window.

In-place GUI component designer

Select the newly created component, it should be called AdxRibbonTab1. Notice something interesting happening at the bottom of the designer? Indeed, a new in-place designer has been introduced in the latest version of Add-in Express.

If you don't see the in-place designer, it is probably minimized, so click on the arrow on the bottom right to expand the designer screen.

Adding RibbonTab controls from here is pretty quick. You can start by adding a RibbonGroup by clicking on the ADXRibbonGroup toolbar button. One of Northwinds' requirements is when an e-mail from a customer is opened; the users must have an option to view all previous orders and items for that particular customer. Go ahead and add a button to the RibbonGroup by selecting it and clicking on the ADXRibbonButton toolbar button. Change the button text to Order History and change the size to Large, add an image for effect (you'll need an image list for this) and as easy as that and you are done!

In our Northwinds' scenario, another requirement of the client, is that the user be shown a list of recommended products for the customer and then have an option to include product information automatically in the reply to the customer. For this we'll add another ADXRibbonGroup and then add a DropDown control by selecting the new RibbonGroup by clicking on the ADXRibbonDropDown toolbar button. Select the dropdown and change its title to “Suggested Products”. The result should look something similar to this:

And as easy as that you are on your way of creating an awesome solution for Northwind.

In the next instalment, we'll take a look at the Office Backstage view, what exactly it is and how to use it to your advantage.

Thanks for reading!