Mr. Task Pane, meet Mrs. Ribbon

  • Article

In my previous posts, I showed you how to create a custom ribbon and how to create a custom Task Pane using VSTO, but how do you tie these two together? I've created a solution to show you how to do that. It's based on the scenario of a travel agency that books cruises. A custom ribbon called Contoso Travel Agency shows the Top Cruises and from each picture of the cruise in the gallery drop down, the travel agent can bring up a custom task pane populated with all the information about the cruise. The custom task pane is grabbing information from an Access database using scalar queries. Check out the source code here.

TIP: I found that it's difficult to make two projects talk together when you use VSTO. Instead, it's easier when you use one project and instead just add the ribbon files to say, the custom task pane project. Here, I'm doing just that because your custom task pane is usually more involved with perhaps external data connections, scalar queries, web service calls to the Office SharePoint Server Business Data Catalog, and therefore much more involved. It tends to be much easier to add the ribbon component to the custom task pane project than vice versa.

My ribbon.xml file contains a tag for a group called "Top Cruise Ships" which contains a callback called CTPContext. This tag defines that I have a gallery here with a bunch of images and when you click on them, the CTPContext callback is called.

<group
id="groupTravelAgency"
label="Top Cruise Ships">

<gallery
id="Top_Cruises"
showItemLabel="true"
label="Top Cruises"

image="CruiseShip"
columns="3"
rows="2"
size="large"

itemHeight="100"
itemWidth="100"
onAction="CTPContext">

<item
id="Northwind"
image ="Northwind"
label ="Northwind"/>

<item
id="Great_Waves"
image ="Great_Waves"
label ="Great Waves"/>

<item
id="Seashell"
image ="Seashell"
label ="Seashell"/>

<item
id="Clear_Waters"
image ="Clear_Waters"
label ="Clear Waters"/>

<item
id="Open_Oceans"
image ="Open_Oceans"
label ="Open Oceans"/>

<item
id="Angel_Fish"
image ="Angel_Fish"
label ="Angel Fish"/>

</gallery>

</group>

 

Here's the code for the callback:

public
void CTPContext(Office.IRibbonControl control, string id, int index)

{

Microsoft.Office.Tools.CustomTaskPane ctrlTaskPane =

Test1.Globals.ThisAddIn.CustomTaskPanes[0];

ctrl_CruiseInfo ctrl = (ctrl_CruiseInfo)ctrlTaskPane.Control;

 
 

if (id == "Northwind") ctrl.cruise_ship = "Northwind";

else
if (id == "Great_Waves") ctrl.cruise_ship = "Great Waves";

else
if (id == "Seashell") ctrl.cruise_ship = "Seashell";

else
if (id == "Open_Oceans") ctrl.cruise_ship = "Open Oceans";

else
if (id == "Angel_Fish") ctrl.cruise_ship = "Angel Fish";

else
if (id == "Clear_Waters") ctrl.cruise_ship = "Clear Waters";

else ctrl.cruise_ship = "Northwind";

 
 

ctrl.LoadCTP(ctrl.cruise_ship.ToString());

ctrlTaskPane.Visible = true;

}

 
 

What I'm doing here is I'm setting the taskpane variable in the ribbon class file to the custom task pane instantiated in ThisAddin.cs. This is the critical part of tying together the ribbon and the custom task pane. The rest is just doing hook ups and passing the gallery item ID into the task pane code so that the we can then go back and query the Access database.

I did a webcast on this which involved an Outlook Form Region as well so if you want to see it in action, take a look here.