Project 2013 UI customization

When it comes to developing add-ins for Microsoft Project you cannot be blamed for feeling that MS Project is a bit of a second-rate citizen in the MS Office suite of products. Its object model does not feel quite as polished as the Microsoft Word, Outlook, PowerPoint and Excel object models. I guess you could say this comes down to the fact that not as many people have MS Project installed and in turn there are not that many developers writing add-ins for it.

• Creating a COM Add-in for MS Project
• Customizing MS Project Ribbon
• Creating custom context menus
• Customizing Project Backstage view

Nevertheless, if you find yourself developing an add-in for MS Project, Add-in Express has you covered. In this article we’ll take a look at how to customize the MS Project UI, using the tried and trusted Add-in Express for Office and .NET toolset.

Creating a COM Add-in for MS Project

To create an add-in for MS Project, create a new ADX COM Add-in in Visual Studio.

On the first page of the “New Microsoft Office COM Add-in” wizard, select your programming language of choice (C#, VB.NET or C++.NET) and the minimum version of MS Project you would like your add-in to support. In this case we’ll only target MS Project 2013 and use Visual C# to develop our add-in.

Next, select which MS Office applications your add-in will support. Add-in enables you to support multiple MS Office applications with one codebase, but in this scenario we’ll only select Microsoft Project.

Finish the wizard and if the designer surface of the AddinModule class is not visible in Visual Studio, double-click the file in the Solution Explorer to open it.

Customizing the MS Project Ribbon

MS Project supports the Ribbon UI, which means you can add to and customize its Ribbon as you would the rest of the applications in the Office suite. To do this, you first need to add a new ADXRibbonTab component to the AddinModule designer surface.

Add-in Express provides a rich designer for visually designing your MS Office ribbon tab. For this example, we’ll add two drop-down boxes and a ribbon button, to our custom MS Project Ribbon tab, that populates the drop-down boxes with the project tasks and resources.

To generate an event handler for the button’s OnClick event, select it in the visual designer and double-click next to the OnClick event name in the Visual Studio properties window:

To populate the drop-down boxes, add the following code to the buttons’ OnClick event handler:

private void loadAllRibbonButton_OnClick(object sender, 
    IRibbonControl control, bool pressed)
{
    MSProject.Project currProject = null;
    MSProject.Tasks tasks = null;
    MSProject.Task task = null;
    MSProject.Resources resources = null;
    MSProject.Resource resource = null;
 
    try
    {
        currProject = MSProjectApp.ActiveProject;
        tasks = currProject.Tasks;
        resources = currProject.Resources;
 
        for (int t = 1; t <= tasks.Count; t++)
        {
            task = tasks[t];
            if (task != null)
            {
                ADXRibbonItem taskItem = new ADXRibbonItem()
                    { Caption = task.Name, Tag = task.ID };
                tasksRibbonDropDown.Items.Add(taskItem);
                Marshal.ReleaseComObject(task);
            }
        }
 
        for (int r = 1; r <= resources.Count; r++)
        {
            resource = resources[r];
            if (resource != null)
            {
                ADXRibbonItem resourceItem = new ADXRibbonItem()
                    { Caption = resource.Name, Tag = resource.ID };
                resourcesRibbonDropDown.Items.Add(resourceItem);
                Marshal.ReleaseComObject(resource);
            }
        }
 
    }
    finally
    {
        if (resources != null) Marshal.ReleaseComObject(resources);
        if (tasks != null) Marshal.ReleaseComObject(tasks);
        if (currProject != null) Marshal.ReleaseComObject(currProject);
    }
}

You’ll notice that MS Project shows an additional “FORMAT” ribbon tab (Shaded in purple) when the Gantt Chart is visible:

And it shows a similar “FORMAT” ribbon tab (Shaded in Cyan), when the Team Planner is visible:

If we would like our custom ribbon tab to be visible when the user has selected the Team Planner view, we need to set its Context property to Project.TabSetTeamPlanner. Add-in Express automatically list all the available context names for each Office application:

When you run the add-in and switch to the Team Planner view, you should see your custom Ribbon tab in Project 2013:

Customizing the MS Project context menus

In MS Project the context menu is the menu that appears when a user right-clicks on an item and it will display relevant commands based on the item that was selected. In order to add your own item to the context-menu that is displayed when a user right-clicks on a task in the Gant Chart view, you first need to add a new ADXRibbonContextMenu component to the AddinModule designer surface.

Add-in Express also provides a visual editor that shows a toolbar for all context-menus that includes the available context-menu controls. In the following design, we’ve created a right click menu that contains two buttons, a checkbox and a Ribbon gallery control.

To add the controls to the context-menu that is displayed when a user right-clicks on a task in the Gant Chart view, add it to the ContextMenuNames property of the ADXRibbonContentMenu control:

For all Office applications, the Context Menu Names dialog window displays a list of all the available built-in context-menu names.

To add code which will run when a user clicks on a custom item on the task context-menu, we first need to generate an event handler for the OnClick event in a similar fashion as we’ve created it for a ribbon button. To display the task on which the user right-clicked, as well as the name and duration, add the following code to the OnClick event handler:

private void showTaskInfoRibbonButton1_OnClick(object sender, 
    IRibbonControl control, bool pressed)
{
    MSProject.Cell activeCell = null;
    MSProject.Task activeTask = null;
 
    try
    {
        activeCell = MSProjectApp.ActiveCell;
        if (activeCell != null)
        {
            activeTask = activeCell.Task;
            if (activeTask != null)
                MessageBox.Show(
                    string.Format("{0} will take {1} minutes.", 
                    activeTask.Name, activeTask.Duration.ToString()));
        }
    }
    finally
    {
        if (activeTask != null) Marshal.ReleaseComObject(activeTask);
        if (activeCell != null) Marshal.ReleaseComObject(activeCell);
    }
}

Customizing the MS Project Backstage view

Since Office 2010, the original File menu has been replaced by the Backstage view. The Backstage view provides a supercharged menu structure that contains information about your MS Project file and gives the user access to a number of functions.

The backstage view is a good location to place things like settings and options for your add-in. Add-in Express also provides a visual editor for the backstage view, which is a good thing as the design for a backstage view can quickly get very complicated.

To add a backstage view, add a new ADXBackstageView component to the AddinModule designer surface.

The backstage view visual designer offers a too wide range of configurations to cover in this article, but below is just a small example of what can be achieved with the MS Project backstage view:

Creating MS Project task panes

Microsoft Project supports custom task panes and it is a great way to provide your users with a reasonably sized UI in order to display additional information or add extra functionality. Unfortunately, Add-in Express Advanced Task Panes does not support MS Project.

To add your own custom task pane to MS Project, first add a new User Control to your project.

You can design your task pane as you would any standard Windows forms user control. In this example, we’ve designed a relatively simple control which will display some of the project properties as well as a list of tasks and resources.

The last step in showing the task pane in MS Project is to switch back to the AddinModule designer surface and click on the ellipses (…) button next to its TaskPanes property.

This will display the ADXTaskPane Collection Editor dialog, add a new item to the collection and set the following properties on it:

• ControlProgID : MSProjectUI.ctlInfo (The name of the user control we’ve added earlier)
• DockPosition : ctpDockPositionRight
• DockPositionRestrict : ctpDockPositionRestrictNone
• OutlookWindows: (None)
• SupportedApps : Project
• Title : Project Information

The final result should resemble the following in Microsoft Project 2013:

Thank you for reading. Until next time, keep coding!

Available downloads:

This sample Outlook add-in was developed using Add-in Express for Office and .net:

Custom MS Project Ribbon UI (C#)

You may also be interested in:

• Programming for Microsoft Project 2013
• How to create add-ins for Office 2013 – 2003