The Office Developer Resources Ribbon UI Add-in
The Microsoft Office Developer Center (ODC) (https://msdn.microsoft.com/office) contains a tremendous number of how-to articles, videos, code samples, and so forth to help you create Office solutions. The menus and links on the ODC are pretty handy for navigating the labyrinth of helpful information. However, I thought it might be helpful to create a tab on the Ribbon UI that enables you to get to this information from inside of Word 2007.
I created a Visual Basic .NET shared add-in in Visual Studio that creates a tab on the Word 2007 Ribbon. The tab is divided into groups that somewhat mirror the tabs found on the ODC. The groups contain buttons and gallery controls that contain links to different pages in the ODC. As with any custom Ribbon customization, the add-in contains an XML file that defines the structure and components that make up the tab. The add-in also contains callbacks that give the controls their functionality.
Note The add-in is available at: https://code.msdn.microsoft.com/OfficeDevResourceTab/
Figure 01. The Office Developer Resources tab in Word 2007
Figure 02. The Office Developer Resources tab in Word 2007 - continued
In this posting, I won’t go into the steps to create the add-in. You can find detailed procedures for creating a shared add-in to customize the Ribbon UI in the three-part series of articles titled Customizing the 2007 Office Fluent Ribbon for Developers (https://msdn.microsoft.com/en-us/library/aa338202.aspx). I will provide the XML and the VB .NET code for the callbacks which you can substitute for those found in the articles.
The XML is relatively simple in that it consists of a number of repetitive groups containing buttons and a couple of gallery controls. The buttons provide links to the different page on the ODC. The galleries provide a selection of related links to the developer centers for the Office 2007 products and the technologies that use or are used by the Office system such as Office Business Applications (OBA) and the Open XML file format.
<customUI xmlns="https://schemas.microsoft.com/office/2006/01/customui" loadImage="getVSTOImage" >
<ribbon>
<tabs>
<tab id="odcTab" label="Office Developer Resources" >
<group id="getStartedGrp" label="Getting Started" >
<button id="devCenterBtn" label="Office" size="normal" getImage="getImages" tag="https://msdn.microsoft.com/en-us/office/default.aspx" onAction="openPage" screentip="Learn about the possibilities offered by the Microsoft Office system to develop solutions." />
<button id="spBtn" label="SharePoint" size="normal" getImage="getImages" tag="https://msdn.microsoft.com/en-us/sharepoint/default.aspx" onAction="openPage" screentip="Helps teams stay connected and productive by providing easy access to the people, documents, and information that they need." />
<button id="devMapBtn" label="Developer Map" size="normal" imageMso="ShowTimeZones" tag="https://msdn.microsoft.com/en-us/office/bb497969.aspx" onAction="openPage" screentip="Helps you visualize the different programs, servers, services, and tools that will help build Office solutions." />
</group>
<group id="productsGrp" label="Products and Technologies" >
<button id="officeSysBtn" label="Office System " size="normal" getImage="getImages" tag="https://msdn.microsoft.com/en-us/office/aa905369.aspx" onAction="openPage" screentip="A powerful collection of integrated programs, servers, services, tools, and technologies." />
<gallery id="productsGal" label="Products" size="normal" imageMso="SmartArtChangeColorsGallery" onAction="galOpenPage" screentip="Get the help and information you need on each Office product." >
<item id="Access" label="Access" imageMso="MicrosoftAccess" />
<item id="Excel" label="Excel" imageMso="MicrosoftExcel" />
<item id="InfoPath" label="InfoPath" imageMso="OpenInfopathForm" />
<item id="Outlook" label="Outlook" imageMso="MicrosoftOutlook" />
<item id="PowerPoint" label="PowerPoint" imageMso="MicrosoftPowerPoint" />
<item id="Project" label="Project" imageMso="MicrosoftProject" />
<item id="SPDesigner" label="SharePoint Designer" imageMso="AccessOnlineLists"/>
<item id="SharePoint" label="SharePoint Server" imageMso="FileCreateDocumentWorkspace" />
<item id="Visio" label="Visio" imageMso="TableExportTableToVisioPivotDiagram" />
<item id="Word" label="Word" imageMso="ExportWord" />
</gallery>
<gallery id="technologiesGal" label="Technologies" imageMso="PageMenu" onAction="galOpenPage" screentip="Learn about the technologies supported by the Microsoft Office system." >
<item id="OBA" label="OBA" imageMso="CreateClassModule" />
<item id="FluentUI" label="Office Fluent UI" imageMso="FormRegionMenu" />
<item id="OpenXML" label="Open XML" imageMso="FileSaveAsCurrentFileFormat" />
<item id="VBA" label="VBA" imageMso="CreateModule" />
<item id="VSTO" label="VSTO" image="VSTO" />
</gallery>
</group>
<group id="libraryGrp" label="Library" >
<button id="offSysBtn" label="Office Development" size="normal" imageMso="AppointmentColorDialog" tag="https://msdn.microsoft.com/en-us/library/bb726436.aspx" onAction="openPage" screentip="A set of helpful links to get you up to speed on Office development." />
<button id="spDevBtn" label="SharePoint Development" size="normal" imageMso="AccessOnlineLists" tag="https://msdn.microsoft.com/en-us/library/bb931739.aspx" onAction="openPage" screentip="A set of helpful links to get you up to speed on SharePoint products and technologies." />
<button id="officeTalkBtn" label="Office Talk" size="normal" imageMso="MailSelectNames" tag="https://msdn.microsoft.com/en-us/library/bb660514(office.11).aspx" onAction="openPage" screentip="Columns by long-time Office developers and members of the Office Developer Documentation team." />
</group>
<group id="learnGrp" label="Learn" >
<button id="offDevelopmentBtn" label="Learn Office" size="normal" imageMso="AppointmentColorDialog" tag="https://msdn.microsoft.com/en-us/office/aa905375.aspx" onAction="openPage" screentip="Explore this set of helpful links to get you up-to-speed creating Office system solutions." />
<button id="sdkAndRefDocsBtn" label="SDKs and References" size="normal" imageMso="FunctionsLookupReferenceInsertGallery" tag="https://msdn.microsoft.com/en-us/office/aa905496.aspx" onAction="openPage" screentip="Use these SDKs and developer references to leverage your skills in creating rich Office and SharePoint solutions." />
<button id="booksdBtn" label="Books" size="normal" imageMso="VisualBasicReferences" tag="https://msdn.microsoft.com/en-us/office/dd537534.aspx" onAction="openPage" screentip="Want to buy a book? Read a sample chapter online? Visit this bookstore first." />
<button id="howDoIBtn" label="How To Center" size="normal" imageMso="TentativeAcceptInvitation" tag="https://msdn.microsoft.com/en-us/office/bb266408.aspx" onAction="openPage" screentip="Find over 200 how-to video demos, sample code, and conceptual overviews." />
<button id="videosBtn" label="Videos and Webcasts" size="normal" imageMso="SlideMasterMediaPlaceholderInsert" tag="https://msdn.microsoft.com/en-us/office/aa905350.aspx" onAction="openPage" screentip="Need information quickly? No time to read about it? Watch these videos." />
<button id="channel9Btn" label="Channel 9" size="normal" getImage="getImages" tag="https://channel9.msdn.com/tags/MS%20Office" onAction="openPage" screentip="Channel 9 is a place for learning and sharing information, created by developers for developers." />
</group>
<group id="communityGrp" label="Community" >
<button id="communityBtn" label="Office Developers" size="normal" imageMso="OutlookGears" tag="https://msdn.microsoft.com/en-us/office/aa905341.aspx" onAction="openPage" screentip="Check out the latest from the Office developer community." />
<button id="mvpBtn" label="MVP Content" size="normal" imageMso="MeetingsWorkspace" tag="https://msdn.microsoft.com/en-us/office/cc441428.aspx" onAction="openPage" screentip="Take a look at the latest content submitted by Office and SharePoint MVPs, third-parties, and experts in the Office developer community." />
<button id="codePlexBtn" label="CodePlex" size="normal" getImage="getImages" tag="https://www.codeplex.com/site/search?projectSearchText=office" onAction="openPage" screentip="Provides you with access to a variety of resources, including download areas, communication forums and product information." />
<button id="codeGalleryBtn" label="Code Gallery" size="normal" getImage="getImages" tag="https://code.msdn.microsoft.com/Project/ProjectDirectory.aspx?ProjectSearchText=office" onAction="openPage" screentip="Download and share sample applications, code snippets, and other resources with the developer community." />
<button id="facebookBtn" label="facebook" size="normal" getImage="getImages" tag="https://www.facebook.com/group.php?gid=51196093535" onAction="openPage" screentip="A place for comments, questions, and answers about development with Office products." />
<button id="twitterBtn" label="Twitter" size="normal" getImage="getImages" tag="https://twitter.com/MSDN_Office" onAction="openPage" screentip="Follow what is currently happening with Microsoft Office development." />
</group>
<group id="supportGrp" label="Forums and Support" >
<button id="forumsBtn" label="Forums" size="normal" imageMso="WorkgroupAdmin" tag="https://social.msdn.microsoft.com/Forums/en-US/category/officedev,oldevelopment,sharepoint,uc/" onAction="openPage" screentip="Get your questions answered by experts in their respective Office products." />
<button id="newsgroupBtn" label="Newsgroups" size="normal" imageMso="FileCreateDocumentWorkspace" tag="https://msdn.microsoft.com/en-us/office/aa905346.aspx" onAction="openPage" screentip="Ask questions, share information, or exchange ideas with others, including experts from around the globe." />
<button id="supportBtn" label="Support" size="normal" imageMso="ControlsGallery" tag="https://msdn.microsoft.com/en-us/office/aa905515.aspx" onAction="openPage" screentip="Search to find a resource, ask a question in the forums, or contact Microsoft support for help." />
</group>
</tab>
</tabs>
</ribbon>
</customUI>
In looking at the XML, I handled the links to the Web pages in two ways, depending on whether I was using a button or a gallery item. For buttons, I added the link to the tag attribute inside the button definition XML. Then, I specified a callback in the onAction attribute where all I did was run Internet Explorer and pass the button’s control.tag value, as shown here.
Private Const ie As String = "c:\program files\internet explorer\iexplore "
Sub openPage(ByVal control As IRibbonControl)
Dim RetVal As Object
RetVal = Shell(ie & control.Tag, vbMaximizedFocus)
End Sub
In the gallery control, there is no tag attribute so I had to use a different technique. When you click an item in the gallery, a callback, specified in the onAction attribute of the gallery control, is called passing in an IRibbonControl object, which represents the control that made the call. The IRibbonControl object includes the Id property. In the callback, I test the control’s Id property in a Select Case statement and assign the Web page address value for that control to a String variable. Following the Select Case statement, just as in the previous code sample, I run Internet Explorer, passing the constant for the Web address and page value of the specific Web page.
Private Const address As String = "https://msdn.microsoft.com/office/"
Sub galOpenPage(ByVal control As IRibbonControl, ByVal id As String, ByVal index As Integer)
Dim RetVal As Object = Nothing
Dim page As String = ""
Select Case id
Case "Access"
page = "aa905400.aspx"
Case "Excel"
page = "aa905411.aspx"
Case "InfoPath"
page = "aa905434.aspx"
Case "Outlook"
page = "aa905455.aspx"
Case "PowerPoint"
page = "aa905465.aspx"
Case "Project"
page = "aa905469.aspx"
Case "SharePoint"
page = "aa905503.aspx"
Case "SPDesigner"
page = "bb421303.aspx"
Case "Visio"
page = "aa905478.aspx"
Case "Word"
page = "aa905482.aspx"
Case "WSS"
RetVal = Shell(ie & "https://msdn.microsoft.com/en-us/sharepoint/default.aspx", vbMaximizedFocus)
Case "OBA"
page = "aa905528.aspx"
Case "FluentUI"
page = "aa905530.aspx"
Case "OpenXML"
page = "aa905545.aspx"
Case "VBA"
RetVal = Shell(ie & "https://msdn.microsoft.com/en-us/isv/aa905357.aspx", vbMaximizedFocus)
Case "VSTO"
RetVal = Shell(ie & "https://msdn.microsoft.com/en-us/vsto/default.aspx", vbMaximizedFocus)
End Select
' You have already run the shell on these cases.
If (id <> "VBA" And id <> "WSS" And id <> "VSTO") Then
RetVal = Shell(ie & address & page, vbMaximizedFocus)
End If
End Sub
You will notice that I handled the Case statements for three of the controls slightly differently. The addresses for those sites were different than those for the other controls, so I couldn’t use the same address constant.
The next task concerns the images shown for each button and gallery item. As you can see in the XML, the majority of the buttons and gallery items use images built into Office as denoted by the imageMso attribute. However, for the remaining Bitmap images, I first added them to the add-in as project resources. How to do this is also described in Part One of the three-part series of articles I mentioned previously.
There are a couple of ways to add custom images to the Ribbon and I use both here. The most common way is to use the loadImage attribute of the <customUI> element and point to a callback that loads the images. By using this method, all of the images are loaded once when the Ribbon is displayed. Then, all you need to do to use a particular image for a control is use the image attribute and assign the name of one of the images to it. The following callback is used to load the image for the VSTO item in the Technologies gallery.
Function getVSTOImage(ByVal imageId As String) As IPictureDisp
Return PictureConverter.IconToPictureDisp(My.Resources.VSTO)
End Function
I used this callback for just the VSTO item because the gallery item attribute does not include a getImage attribute (I will use that attribute in the next section). So to summarize, the image is loaded when the Ribbon is displayed and the image attribute specifies which image to display for the control. Note that the image has to be returned to Office as an IPictureDisp object. I’ll show how the image is converted shortly.
The other way to load custom images is by using the getImage attribute of the button to point to a callback that individually loads the images. Similar to the way I assign Web page links to the various buttons, in the getImages callback pointed to in the getImage attribute, I use a Select Case structure to test the Id property of the IRibbonControl object and return the image appropriate to the control.
Function getImages(ByVal control As IRibbonControl) As IPictureDisp
Select Case control.Id
Case "devCenterBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.MSDN)
Case "spBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.MSDN)
Case "officeSysBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.officesystem)
Case "codePlexBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.CodePlex)
Case "codeGalleryBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.CodeGallery)
Case "channel9Btn"
Return PictureConverter.IconToPictureDisp(My.Resources.Channel9)
Case "twitterBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.twitter)
Case "facebookBtn"
Return PictureConverter.IconToPictureDisp(My.Resources.facebook)
Case Else
Return PictureConverter.IconToPictureDisp(My.Resources.officesystem)
End Select
End Function
To convert the image to the IPictureDisp object required by the Ribbon, I added the following class to the add-in project. More information about this class is also included in Part One of the article series.
Friend Class PictureConverter
Inherits AxHost
Private Sub New()
MyBase.New(String.Empty)
End Sub
Public Shared Function IconToPictureDisp(ByVal icon As Bitmap) As stdole.IPictureDisp
Return CType(GetIPictureDispFromPicture(icon), stdole.IPictureDisp)
End Function
End Class
And so that is all there is to it. Hopefully you will find this add-in helpful.