Upload
vunga
View
216
Download
0
Embed Size (px)
Citation preview
Hands-On LabOffice 2010 UI Customization
Lab version: 1.0.0
Last updated: 5/5/2023
CONTENTS
OVERVIEW................................................................................................................................................. 3
EXERCISE 1: CUSTOMIZING OFFICE WITH RIBBONS AND BACKSTAGE..........................................4Task 1 – Add Export Backstage tab......................................................................................................4
Task 2 – Connect Backstage tab to document properties....................................................................8
Task 3 – Add quick export buttons to the Home ribbon tab..............................................................13
Exercise 1 Verification.......................................................................................................................17
EXERCISE 2: CREATE A CUSTOM TASK PANE...................................................................................18Task 1 – Creating a custom Task Pane...............................................................................................19
Task 2 – Add Snippets Ribbon Button................................................................................................20
Exercise 2 Verification.......................................................................................................................21
EXERCISE 3: OUTLOOK FORM REGIONS............................................................................................22Task 1 – Creating a Form Region........................................................................................................22
Task 2 – Implement the Form Region................................................................................................25
Exercise 3 Verification.......................................................................................................................31
SUMMARY................................................................................................................................................ 33
Overview
In this exercise, you will explore the different ways in which Office 2010’s UI can be customized to provide a platform for building rich office applications. You will make use of C#/VB and the Visual Studio support for Office 2010.
Objectives
In this lab you will:
Customize the Office 2010 UI using Office 2010
Build a custom Ribbon using Visual Studio 2010
Build a custom Outlook Form Region using Visual Studio 2010
System Requirements
You must have the following items to complete this lab:
Microsoft® Windows® Vista SP1 or Microsoft® Windows Server 2008 (64-bit)
Microsoft® Office Professional Plus 2010(32-bit or 64-bit)
Microsoft® Visual Studio 2010
Exercises
This Hands-On Lab is comprised of one exercise with the following tasks:
1. End-User Customization
2. Customizing the Office UI with Add-Ins
3. Outlook Form Regions
Estimated time to complete this lab: 60 minutes.
Starting Materials
This Hands-On Lab includes the following starting materials.
Visual Studio solutions. The lab provides the following Visual Studio solutions that you can use as starting point for the exercises. Lab instructions will reference the Training Kit location after installation as %Office2010DeveloperTrainingKitPath%.
◦ %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\ExportAddIn.sln: Contains a starting point for the Export Add-in that contains the needed resource images.
◦ %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\WPFTaskPane.sln: Contains a starter TaskPane with the WPF User Control already defined.
Note: Inside the lab’s Source folder, you will find a Solution folder containing an end solution with the completed lab exercise.
Exercise 1: Customizing Office with Ribbons and Backstage
Backstage is a perfect place to put UI elements that take up space but are not necessary when actively editing the document. In this case you will be using Backstage and a Ribbon together to create multiple parts of a complete add-in.
Task 1 – Add Export Backstage tab
In this first task, you will create a new Backstage tab named Export to manage the quick export functionality.
1. Add a new XML Ribbon item to the existing ExportAddIn project
a. Open Visual Studio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\ExportAddIn.sln
b. Right click ExportAddIn in the Solution Explorer and choose Add -> New Item.
c. In the Add New Item dialog, select the Office category.
d. Choose the Ribbon (XML) item type and enter a name of Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#)
e. Click Add to create the new ribbon
Figure 1(a)-In case of C#Add Ribbon (XML) Item
Figure 1(b)-In case of VBAdd Ribbon (XML) Item
f. Open the Ribbon.xml file located in the Solution Explorer
2. Add XML Markup to the Ribbon.xml file to define the Export Backstage tab
a. Remove the current ribbon node from the Ribbon.xml file
b. Add the following markup to define the Backstage tab and the first column of information
XML
<backstage> <tab id="tabExport" label="Export" insertAfterMso="TabInfo"> <firstColumn> </firstColumn> </tab></backstage>
c. Inside the firstColumn element, add the following markup to define the group containing the XPS export controls
XML
<group id="grpExportXPS" label="Export as XPS" helperText="Exports the current document as XPS."> <primaryItem> <button id="btnBackStageXPS" label="To XPS" getImage="GetButtonImage" /> </primaryItem> <topItems> <checkBox id="chkEnableXPS" label="Allow XPS Export" /> <editBox id="txtXPSPath" label="Export Path" sizeString="WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" /> </topItems></group>
Note: The XPS output controls are made up of a button to perform the export, a check box to enable or disable exporting to XPS and a edit box to define the filename of the exported file.
d. Immediately following the previous group, add the following markup to define the PDF export controls
XML
<group id="grpExportPDF" label="Export as PDF" helperText="Exports the current document as PDF."> <primaryItem> <button id="btnBackStagePDF" label="To PDF" getImage="GetButtonImage" /> </primaryItem> <topItems> <checkBox id="chkEnablePDF" label="Allow PDF Export" /> <editBox id="txtPDFPath" label="Export Path" sizeString="WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" /> </topItems></group>
3. Define the code that will load images for the export buttons
a. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
b. Add the following GetButtonImage method to the Ribbon class
C#
public System.Drawing.Bitmap GetButtonImage( Office.IRibbonControl control){ switch (control.Id) { case "btnBackStageXPS": return Properties.Resources.XPS; case "btnBackStagePDF": return Properties.Resources.PDF; default: return null; }}
Visual Basic
Public Function GetButtonImage(ByVal control As Office.IRibbonControl) As System.Drawing.Bitmap
Select Case control.IdCase "btnBackStageXPS"
Return My.Resources.XPSCase "btnBackStagePDF"
Return My.Resources.PDFCase Else
Return NothingEnd Select
End Function
Note: The getImage attribute in the button elements define a public method Office will call any time a button loads. This method uses a switch command to differentiate between the different buttons.
4. Override the CreateRibbonExtensibilityObject method in the add-in to define the ribbon to load
a. Open the ThisAddIn class by double clicking it in the Solution Explorer
b. In the ThisAddIn class, override the CreateRibbonExtensibilityObject method and return a new Ribbon object
C#
protected override Office.IRibbonExtensibility CreateRibbonExtensibilityObject(){ return new Ribbon();}
Visual Basic
Protected Overrides Function CreateRibbonExtensibilityObject() As Office.IRibbonExtensibility
Return New Ribbon()End Function
5. Run the add-in and verify the Backstage tab looks correct
a. In the Debug menu, click Start Without Debugging
b. Once Word 2010 loads, click the Backstage button (labeled as File)
c. In Backstage switch to the Export tab and verify it looks like the image below
Figure 2Custom Backstage Export tab
Task 2 – Connect Backstage tab to document properties
In this task, you will connect the controls in the Export tab to the CustomDocumentProperties object in the active document. This will allow the state of the controls to be persisted in the document and loaded when the document is loaded later.
1. Define the code behind that will determine when the button and editBox controls are enabled
a. Open Ribbon.xml by double clicking it in the Solution Explorer
b. Add a getEnabled attribute to the button and editBox controls
XML
<button id="btnBackStageXPS" getEnabled="GetEnable" ... />
Note: You should find 2 button controls and 2 editBox controls
c. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
d. Add the following private field to the class
C#
private ExportProperties m_properties = new ExportProperties();
Visual Basic
Private m_properties As New ExportProperties()
Note: The ExportProperties class is a wrapper provided for you that wraps the CustomDocumentProperties collection of the current ActiveDocument.
e. Create a GetEnable method to determine the enable state of other controls.
C#
public bool GetEnable(Office.IRibbonControl control){ switch (control.Id) { case "btnBackStageXPS": case "txtXPSPath": return m_properties.XpsEnabled; case "btnBackStagePDF": case "txtPDFPath": return m_properties.PdfEnabled; default: return false; }}
Visual Basic
Public Function GetEnable(ByVal control As Office.IRibbonControl) As Boolean
Select Case control.IdCase "btnBackStageXPS", "txtXPSPath"
Return m_properties.XpsEnabledCase "btnBackStagePDF", "txtPDFPath"
Return m_properties.PdfEnabledCase Else
Return FalseEnd Select
End Function
2. Add code to populate and respond to events from the enabled checkboxes
a. Open Ribbon.xml by double clicking it in the Solution Explorer
b. Add a getPressed and onAction attribute to every checkBox element in the Backstage markup
XML
<checkBox id="chkEnablePDF" getPressed="IsEnableChecked" onAction="EnableChecked" .../>
Note: You should find 2 checkBox controls
c. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
d. Create an IsEnableChecked method that will respond to requests from check box controls to get their current state
C#
public bool IsEnableChecked(Office.IRibbonControl control){ if (control.Id == "chkEnableXPS") return m_properties.XpsEnabled; else if (control.Id == "chkEnablePDF") return m_properties.PdfEnabled; else return false;}
Visual Basic
Public Function IsEnableChecked(ByVal control As Office.IRibbonControl) As Boolean
If control.Id = "chkEnableXPS" ThenReturn m_properties.XpsEnabled
ElseIf control.Id = "chkEnablePDF" ThenReturn m_properties.PdfEnabled
ElseReturn False
End IfEnd Function
e. Create an EnableChecked method that will respond to the checking of a check box
C#
public void EnableChecked(Office.IRibbonControl control, bool value){ if (control.Id == "chkEnableXPS") { m_properties.XpsEnabled = value; ribbon.InvalidateControl("btnBackStageXPS"); ribbon.InvalidateControl("txtXPSPath"); } else if (control.Id == "chkEnablePDF") { m_properties.PdfEnabled = value; ribbon.InvalidateControl("btnBackStagePDF"); ribbon.InvalidateControl("txtPDFPath"); }}
Visual Basic
Public Sub EnableChecked(ByVal control As Office.IRibbonControl, ByVal value As Boolean)
If control.Id = "chkEnableXPS" Thenm_properties.XpsEnabled = valueribbon.InvalidateControl("btnBackStageXPS")ribbon.InvalidateControl("txtXPSPath")
ElseIf control.Id = "chkEnablePDF" Thenm_properties.PdfEnabled = valueribbon.InvalidateControl("btnBackStagePDF")ribbon.InvalidateControl("txtPDFPath")
End IfEnd Sub
Note: The calls to ribbon.InvalidateControl force those controls to reevaluate their state. This will lead to another call to GetEnabled that will now have a different result.
3. Add code to populate and respond to events from the path edit boxes
a. Open Ribbon.xml by double clicking it in the Solution Explorer
b. Add a getText and onChange attribute to every editBox element
XML
<editBox id="txtPDFPath" getText="GetExportPath" onChange="SetExportPath" ... />
Note: You should find 2 editBox controls
c. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
d. Create a GetExportPath method that will retrieve the current export path for the editBox controls
C#
public string GetExportPath(Office.IRibbonControl control){ if (control.Id == "txtXPSPath") return m_properties.XpsExportPath; else if (control.Id == "txtPDFPath") return m_properties.PdfExportPath; else return string.Empty; }
Visual Basic
Public Function GetExportPath(ByVal control As Office.IRibbonControl) As String
If control.Id = "txtXPSPath" ThenReturn m_properties.XpsExportPath
ElseIf control.Id = "txtPDFPath" ThenReturn m_properties.PdfExportPath
ElseReturn String.Empty
End IfEnd Function
e. Create a SetExportPath method that will respond to the change event of the editBox control
C#
public void SetExportPath(Office.IRibbonControl control, string value){ if (control.Id == "txtXPSPath") m_properties.XpsExportPath = value; else if (control.Id == "txtPDFPath") m_properties.PdfExportPath = value;}
Visual Basic
Public Sub SetExportPath(ByVal control As Office.IRibbonControl, ByVal value As String)
If control.Id = "txtXPSPath" Then
m_properties.XpsExportPath = valueElseIf control.Id = "txtPDFPath" Then
m_properties.PdfExportPath = valueEnd If
End Sub
4. Run the add-in and verify the enable checkboxes work
a. In the Debug menu, click Start Without Debugging
b. Once Word 2010 loads, click the Backstage button (labeled as File)
c. In Backstage switch to the Export tab
d. Check and uncheck the enabled checkboxes and verify the related controls are enabled and disabled
Figure 1Enable check box in Backstage tab
Task 3 – Add quick export buttons to the Home ribbon tab
In this task, you will add a Quick Export ribbon button to the Home ribbon tab. It will tie into the same functionality as the buttons on Backstage.
1. Add the ribbon markup to the Ribbon.xml file
a. Open Ribbon.xml by double clicking it in the Solution Explorer
b. Add the markup that will create a new Quick Export group in the Home tab
i. Make sure the ribbon xml element is added before the backstage xml element
XML
<ribbon> <tabs> <tab idMso="TabHome"> <group id="grpQuickExport" autoScale="true">
</group> </tab>
</tabs></ribbon>
Note: The use of the idMso attribute tells Office to put the following group in the existing tab.
c. Inside the grpQuickExport group element, add a menu control using an existing image within Office
XML
<menu id="btnQuickExport" size="large" itemSize="large" label="Quick Export" imageMso="PageMenu" ></menu>
Note: The use of imageMso tells Office to use an built in Office image
d. Inside the menu element, add the two button controls to perform the export as XPS or PDF
XML
<button id="btnRibbonXPS" label="XPS" getEnabled="GetEnable" getImage="GetButtonImage" /><button id="btnRibbonPDF" label="PDF" getEnabled="GetEnable" getImage="GetButtonImage" />
2. Update the code behind to update the Ribbon buttons as well as the Backstage buttons
a. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
b. Locate the GetButtonImage method and add cases for the ribbon buttons
C#
case "btnRibbonXPS":case "btnBackStageXPS": return Properties.Resources.XPS;case "btnRibbonPDF":case "btnBackStagePDF": return Properties.Resources.PDF;
Visual Basic
Case "btnRibbonXPS", "btnBackStageXPS"Return My.Resources.XPS
Case "btnRibbonPDF", "btnBackStagePDF"Return My.Resources.PDF
c. Locate the GetEnable method and add cases for the ribbon buttons
C#
case "btnRibbonXPS":case "btnBackStageXPS":case "txtXPSPath": return m_properties.XpsEnabled;case "btnRibbonPDF":case "btnBackStagePDF":case "txtPDFPath": return m_properties.PdfEnabled;
Visual Basic
Case "btnRibbonXPS", "btnBackStageXPS", "txtXPSPath"Return m_properties.XpsEnabled
Case "btnRibbonPDF", "btnBackStagePDF", "txtPDFPath"Return m_properties.PdfEnabled
d. Locate the EnableChecked method and add InvalidateControl calls for the ribbon buttons
C#
if (control.Id == "chkEnableXPS"){ m_properties.XpsEnabled = value; ribbon.InvalidateControl("btnRibbonXPS"); ribbon.InvalidateControl("btnBackStageXPS"); ribbon.InvalidateControl("txtXPSPath");}else if (control.Id == "chkEnablePDF"){ m_properties.PdfEnabled = value; ribbon.InvalidateControl("btnRibbonPDF"); ribbon.InvalidateControl("btnBackStagePDF"); ribbon.InvalidateControl("txtPDFPath");}
Visual Basic
If control.Id = "chkEnableXPS" Thenm_properties.XpsEnabled = valueribbon.InvalidateControl("btnRibbonXPS")ribbon.InvalidateControl("btnBackStageXPS")ribbon.InvalidateControl("txtXPSPath")
ElseIf control.Id = "chkEnablePDF" Thenm_properties.PdfEnabled = valueribbon.InvalidateControl("btnRibbonPDF")
ribbon.InvalidateControl("btnBackStagePDF")ribbon.InvalidateControl("txtPDFPath")
End If
3. Create the method that will perform the export when the buttons are clicked
a. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
b. Add the following using statements to the file
C#
using Microsoft.Office.Interop.Word;
Visual Basic
Imports Microsoft.Office.Interop.Word
c. Create a new method named ExportDocument that will use the ExportAsFixedFormat document method to export the current document
C#
public void ExportDocument(Office.IRibbonControl control){ switch (control.Id) { case "btnRibbonXPS": case "btnBackStageXPS": Globals.ThisAddIn.Application.ActiveDocument. ExportAsFixedFormat( m_properties.XpsExportPath, WdExportFormat.wdExportFormatXPS); break; case "btnRibbonPDF": case "btnBackStagePDF": Globals.ThisAddIn.Application.ActiveDocument. ExportAsFixedFormat( m_properties.PdfExportPath, WdExportFormat.wdExportFormatPDF); break; }}
Visual Basic
Public Sub ExportDocument(ByVal control As Office.IRibbonControl)Select Case control.Id
Case "btnRibbonXPS", "btnBackStageXPS"
Globals.ThisAddIn.Application.ActiveDocument.ExportAsFixedFormat(m_properties.XpsExportPath, WdExportFormat.wdExportFormatXPS)
Case "btnRibbonPDF", "btnBackStagePDF"
Globals.ThisAddIn.Application.ActiveDocument.ExportAsFixedFormat(m_properties.PdfExportPath, WdExportFormat.wdExportFormatPDF)
End SelectEnd Sub
4. Add the onAction attributes to all of the buttons in the Ribbon and Backstage
a. Open Ribbon.xml by double clicking it in the Solution Explorer
b. Add a onAction attribute to every button element
XML
<button id="btnRibbonXPS" onAction="ExportDocument" ... />
Note: You should find 4 button controls
Exercise 1 Verification
In order to verify that you have correctly performed all steps in the above exercise, proceed as follows:
Test the Add-in
Test your add-in to confirm that the export ribbon and backstage buttons work as expected.
1. Run the add-in and verify the enable checkboxes work
a. In the Debug menu, click Start Without Debugging
b. Once Word 2010 loads, type a phrase in the document and click the Backstage button (labeled as File)
c. In Backstage switch to the Export tab
d. Check the Allow XPS Export check box
e. Enter an Export Path of %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\Export.xps
Figure 4Export as XPS
2. Click the To XPS button and using Windows Explorer navigate to the folder and open the Export.xps document. Close the .xps file.
3. Verify the Home ribbon contains a new Quick Format button
a. Switch to the Home ribbon tab and type an additional phrase into the document
b. Click the Quick Export button and click the XPS button. Navigate to the .xps document and view it again to see your changes.
Figure 5Quick Export Ribbon Button
1. When you are done cleanup and remove the add-in
a. Close Word 2010
b. In the Solution Explorer, right click Word2010AddIn and click Clean
Exercise 2: Create a Custom Task Pane
In this exercise you will create a custom task pane that can be used to insert snippets of text into the active document. A ribbon button will toggle visibility of a custom task pane that hosts a WPF User Control
Task 1 – Creating a custom Task Pane
In this first task, you will use a pre-created WPF user control as a task pane.
1. Create a Windows Forms UserControl to host the WPF Task Pane
a. Open Visual Studio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\WPFTaskPane\ WPFTaskPane.sln
b. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
c. Locate the ThisAddIn_Startup method and add the following code to create a new UserControl
C#
UserControl taskPane = new UserControl();
Visual Basic
Dim taskPane As New UserControl()
d. Create a new ElementHost control to contain the WPF user control and add it to the Windows Forms UserControl
C#
taskPane.Controls.Add( new ElementHost { Child = new TaskPane(), Dock = DockStyle.Fill });
Visual Basic
taskPane.Controls.Add(New ElementHost With {.Child = New TaskPane(), .Dock = DockStyle.Fill})
2. Add the Windows forms user control to the add-in as a task pane
a. Create a new CustomTaskPane object wrapping the user control from the previous step
C#
Microsoft.Office.Tools.CustomTaskPane snippetsTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets");
Visual Basic
Dim snippetsTaskPane As Microsoft.Office.Tools.CustomTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets")
b. Set the visibility and size of the new task pane
C#
snippetsTaskPane.Visible = true;snippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight;snippetsTaskPane.Width = 300;
Visual Basic
snippetsTaskPane.Visible = TruesnippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRightsnippetsTaskPane.Width = 300
Task 2 – Add Snippets Ribbon Button
In this second task, you will add a ribbon button that will toggle the visibility of the snippets task pane.
1. Add a toggle button to the View ribbon tab
a. Open Ribbon.xml by double clicking it in the Solution Explorer
b. Add the tab element referencing the standard View ribbon tab
XML
<ribbon> <tabs> <tab idMso="TabView"> </tab> </tabs></ribbon>
c. Add a snippets group and toggle button to the tab element
XML
<group id="GroupSnippets" label="Snippets"> <toggleButton id="Snippets" label="Pane" size="large" imageMso="PageMenu" getPressed="IsSnippetsPressed" onAction="SnippetsToggle" /></group>
2. Add the code behind to process the button toggle changes
a. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
b. Add an IsSnippetPressed method to the Ribbon class
C#
public bool IsSnippetsPressed(Office.IRibbonControl control){ return Globals.ThisAddIn.CustomTaskPanes[0].Visible;}
Visual Basic
Public Function IsSnippetsPressed(ByVal control As Office.IRibbonControl) As Boolean
Return Globals.ThisAddIn.CustomTaskPanes(0).VisibleEnd Function
Note: The status is set using the Visible property of the CustomTaskPane object
c. Add a SnippetsToggle method to the Ribbon class
C#
public void SnippetsToggle(Office.IRibbonControl control, bool value){ Globals.ThisAddIn.CustomTaskPanes[0].Visible = value;}
Visual Basic
Public Sub SnippetsToggle(ByVal control As Office.IRibbonControl, ByVal value As Boolean)
Globals.ThisAddIn.CustomTaskPanes(0).Visible = valueEnd Sub
Note: The value of the button is stored directly in the CustomTaskPane object
Exercise 2 Verification
In order to verify that you have correctly performed all steps in the above exercise, proceed as follows:
Test the Add-in
Test your add-in to confirm that the export ribbon and backstage buttons work as expected.
1. Run the add-in and verify the enable checkboxes work
a. In the Debug menu, click Start Without Debugging
b. Once Word 2010 loads, switch to the Views ribbon tab
c. On the View tab, click the Pane button in the Snippets group and verify the task pane is shown and hidden
d. Double click one of the items in the task pane and verify the content is added to the document
Figure 6Custom Task Pane
2. When you are done cleanup and remove the add-in
a. Close Word 2010
b. In the Solution Explorer, right click WPFTaskPane and click Clean
Exercise 3: Outlook Form Regions
In this exercise you will use an Outlook Form Region to extend the Task form in Outlook. The extensions will allow tracking of billable tasks within Outlook’s storage location.
Task 1 – Creating a Form Region
In this first task, you will create a new Outlook Form Region attached to the existing Task forms in Outlook.
1. Create new Outlook 2010 add-in project
a. Open Visual Studio 2010 and select File -> New -> Project
b. In the New Project dialog select the Visual C#(in case of C#)/ Visual Basic(in case of VB) -> Office -> 2010 templates
c. Choose an Outlook 2010 Add-in template
d. Set the Name of the project to OutlookFormRegion and set the location to %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter
e. Verify Create directory for solution is unchecked and click OK to create the new project
Figure 7(a)-In case of C#
Figure 7(b)- In case of VBNew Outlook 2010 Addin Project
2. Add a new form region named BillableTaskRegion to the Task form
a. Right click on OutlookFormRegion in the Solution Explorer and click Add -> New Item
b. In the Add New Item dialog choose the Visual C#(in case of C#)/ Visual Basic(in case of VB) -> Office templates
c. Choose OutlookFormRegion and name it BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of C#)
d. Click Add to create the new item
e. In the first page of the New Outlook Form Region wizard, choose Design a new form region and click Next
f. In the next page, select Adjoining and click Next
Figure 8Choose Form Region Type
g. Change the name to Billable Task and click Next
h. Choose the Task option and clear all other check boxes then click Finish
Figure 9Choose Form Region Class
Note: The message classes chosen determine which types of items receive the new form region. In this case you will be extending the IPM.Task message class only
Task 2 – Implement the Form Region
In this second task, you will add controls to the form and implement the code behind necessary to make the form region functional.
1. Add the controls to the form region to create the Billable Task extensions
Figure 10Completed Custom Form Region
a. Open the designer for BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of C#) by right clicking it in the Solution Explorer and clicking View Designer
b. Right click the design surface and click Properties
c. In the Properties window, set the size of the canvas to 486, 150
d. Using the toolbox, drag the following controls onto the canvas
i. 1 CheckBox
ii. 1 ComboBox
iii. 1 NumericUpDown
iv. 1 TextBox
v. 2 Labels
e. Set the following properties on the CheckBox controls
i. (Name) & Text – chkBillable & Billable
ii. Location & Size – 6, 6 & 59, 17
f. Set the following properties on one of the Label controls
i. Text –Customer
ii. Location & Size – 87, 7 & 51, 13
g. Set the following properties on the ComboBox control
i. (Name) – lstCustomer
ii. Location & Size – 143, 4 & 167, 21
iii. Items – Fabrikam Inc., Adventure Works
Note: Enter each company on its own line
h. Set the following properties on the remaining Label control
i. Text –Hours
ii. Location & Size – 347, 7 & 35, 13
i. Set the following properties on the NumericUpDown control
i. (Name) – numHours
ii. Location & Size – 386, 4 & 95, 20
j. Set the following properties on the TextBox control
i. (Name) - txtDetails
ii. Multiline - true
iii. Location & Size – 5, 31 & 476, 116
iv. Anchor – Top, Bottom, Left, Right
2. Add the code behind that will implement the functionality of the form
a. Open the code behind for BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of C#) by right clicking it in the Solution Explorer and clicking View Code
b. Add the following properties to the BillableTaskRegion class
C#
private Outlook.TaskItem m_taskItem;private Outlook.ItemProperty m_isBillable;private Outlook.ItemProperty m_customer;private Outlook.ItemProperty m_hours;private Outlook.ItemProperty m_details;
Visual Basic
Private m_taskItem As Outlook.TaskItemPrivate m_isBillable As Outlook.ItemPropertyPrivate m_customer As Outlook.ItemPropertyPrivate m_hours As Outlook.ItemPropertyPrivate m_details As Outlook.ItemProperty
c. Add the EnsureItemProperty method to aid in creating custom properties on the task
C#
private void EnsureItemProperty( ref Outlook.ItemProperty property, string name, Outlook.OlUserPropertyType propertyType){ if (property == null) { property = m_taskItem.ItemProperties[name]; if (property == null) property = m_taskItem.ItemProperties.Add(name, propertyType); }}
Visual Basic
Private Sub EnsureItemProperty(ByRef [property] As Outlook.ItemProperty, ByVal name As String, ByVal propertyType As Outlook.OlUserPropertyType)
If [property] Is Nothing Then[property] = m_taskItem.ItemProperties(name)If [property] Is Nothing Then
[property] = m_taskItem.ItemProperties.Add(name, propertyType)
End IfEnd If
End Sub
d. Add the EnsureProperties method to verify all of the custom task properties exists
C#
private void EnsureProperties(){ EnsureItemProperty(ref m_isBillable, "Billable", Outlook.OlUserPropertyType.olYesNo); EnsureItemProperty(ref m_customer, "Billable Customer", Outlook.OlUserPropertyType.olText); EnsureItemProperty(ref m_hours, "Billable Hours", Outlook.OlUserPropertyType.olNumber); EnsureItemProperty(ref m_details, "Billing Details", Outlook.OlUserPropertyType.olText);}
Visual Basic
Private Sub EnsureProperties()EnsureItemProperty(m_isBillable, "Billable",
Outlook.OlUserPropertyType.olYesNo)EnsureItemProperty(m_customer, "Billable Customer",
Outlook.OlUserPropertyType.olText)EnsureItemProperty(m_hours, "Billable Hours",
Outlook.OlUserPropertyType.olNumber)EnsureItemProperty(m_details, "Billing Details",
Outlook.OlUserPropertyType.olText)End Sub
e. Add UpdateEnableState to update the state of the controls based on the state of the Billable checkbox
C#
public void UpdateEnableState(){ lstCustomer.Enabled = chkBillable.Checked; numHours.Enabled = chkBillable.Checked; txtDetails.Enabled = chkBillable.Checked;}
Visual Basic
Public Sub UpdateEnableState()lstCustomer.Enabled = chkBillable.Checked
numHours.Enabled = chkBillable.CheckedtxtDetails.Enabled = chkBillable.Checked
End Sub
f. Implement FormRegionShowing to load the current property values into the controls and setup the initial state of the form region
C#
m_taskItem = this.OutlookItem as Outlook.TaskItem;
EnsureProperties();chkBillable.Checked = m_isBillable.Value;UpdateEnableState();
lstCustomer.SelectedText = m_customer.Value;numHours.Value = (decimal)m_hours.Value;txtDetails.Text = m_details.Value;
Visual Basic
m_taskItem = TryCast(Me.OutlookItem, Outlook.TaskItem)
EnsureProperties()chkBillable.Checked = m_isBillable.ValueUpdateEnableState()
lstCustomer.SelectedText = m_customer.ValuenumHours.Value = CDec(m_hours.Value)txtDetails.Text = m_details.Value
3. Add code behind that will write the contents of the controls as they change
a. Create a method named chkBillable_CheckedChanged to handle the Billable check box’s checked event
C#
private void chkBillable_CheckedChanged(object sender, EventArgs e){ m_isBillable.Value = chkBillable.Checked; UpdateEnableState();}
Visual Basic
Private Sub chkBillable_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
m_isBillable.Value = chkBillable.CheckedUpdateEnableState()
End Sub
b. Create a method named lstCustomer_TextChanged to handle the Customer drop down control’s changed event
C#
private void lstCustomer_TextChanged(object sender, EventArgs e){ m_customer.Value = lstCustomer.Text;}
Visual Basic
Private Sub lstCustomer_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
m_customer.Value = lstCustomer.TextEnd Sub
c. Create a method named numHours_ValueChanged to handle changes in the Hours control
C#
private void numHours_ValueChanged(object sender, EventArgs e){ m_hours.Value = (double)numHours.Value;}
Visual Basic
Private Sub numHours_ValueChanged(ByVal sender As Object, ByVal e As EventArgs)
m_hours.Value = CDbl(numHours.Value)End Sub
d. Create a method named txtDetails_TextChanged to handle changes to the Details control
C#
private void txtDetails_TextChanged(object sender, EventArgs e){ m_details.Value = txtDetails.Text;}
Visual Basic
Private Sub txtDetails_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
m_details.Value = txtDetails.Text
End Sub
4. Connect the code behind to the controls using the designer
a. Open the designer for BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of C#) by right clicking it in the Solution Explorer and clicking View Designer
b. Right click the Billable check box control and click Properties
c. In the Properties window, click the Event icon (the lightning bolt)
d. Set the CheckedChanged event to chkBillable_CheckedChanged using the drop down list
Figure 11Control Events
e. Repeat the above process to attach the Customer control’s TextChanged event to the lstCustomer_TextChanged method
f. Repeat the above process to attach the Hours control’s ValueChanged event to the numHours_ValueChanged method
g. Repeat the above process to attach the Details control’s TextChanged event to the txtDetails_TextChanged method
Exercise 3 Verification
In order to verify that you have correctly performed all steps in the above exercise, proceed as follows:
Test the Add-in
Test your add-in to confirm that the export ribbon and backstage buttons work as expected.
1. Run the add-in and verify the enable checkboxes work
a. In the Debug menu, click Start Without Debugging
b. Once Outlook 2010 loads, switch to the Home ribbon tab
c. Click the New Items -> Task option to create a new task
d. Verify the Billable Task form region is visible
Figure 12Custom Task Form Region
e. Enter some data into the new task and save it
f. Switch to the Tasks section using the buttons in the lower left and open the task you just created.
g. Verify the information in the Billable Task region is loading correctly
2. When you are done cleanup and remove the add-in
a. Close Word 2010
b. In the Solution Explorer, right click OutlookFormRegion and click Clean
Summary
In this exercise you learned how to extend Office application using custom ribbons, backstage tabs, task panes, and Outlook form regions. Each of these tools are used to solve a different problem. Ribbons provide functionality while editing while Backstage provides tools that work on the state of the document, no necessarily the content.