Office 2010 UI Customization Lab .net



Hands-On LabOffice 2010 UI CustomizationLab version: 1.0.0Last updated: DATE \@ "M/d/yyyy" 3/31/2011Contents TOC \h \z \t "Heading 3,2,pp Topic,1,PP Procedure start,3" Overview PAGEREF _Toc289251411 \h 3Exercise 1: Customizing Office with Ribbons and Backstage PAGEREF _Toc289251412 \h 4Task 1 – Add Export Backstage tab PAGEREF _Toc289251413 \h 4Task 2 – Connect Backstage tab to document properties PAGEREF _Toc289251414 \h 8Task 3 – Add quick export buttons to the Home ribbon tab PAGEREF _Toc289251415 \h 13Exercise 1 Verification PAGEREF _Toc289251416 \h 17Exercise 2: Create a Custom Task Pane PAGEREF _Toc289251417 \h 18Task 1 – Creating a custom Task Pane PAGEREF _Toc289251418 \h 19Task 2 – Add Snippets Ribbon Button PAGEREF _Toc289251419 \h 20Exercise 2 Verification PAGEREF _Toc289251420 \h 21Exercise 3: Outlook Form Regions PAGEREF _Toc289251421 \h 22Task 1 – Creating a Form Region PAGEREF _Toc289251422 \h 22Task 2 – Implement the Form Region PAGEREF _Toc289251423 \h 25Exercise 3 Verification PAGEREF _Toc289251424 \h 31Summary PAGEREF _Toc289251425 \h 33OverviewIn 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.ObjectivesIn this lab you will:Customize the Office 2010 UI using Office 2010Build a custom Ribbon using Visual Studio 2010Build a custom Outlook Form Region using Visual Studio 2010System RequirementsYou 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 2010ExercisesThis Hands-On Lab is comprised of one exercise with the following tasks:End-User CustomizationCustomizing the Office UI with Add-InsOutlook Form RegionsEstimated time to complete this lab: 60 minutes.Starting MaterialsThis 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 BackstageBackstage 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 tabIn this first task, you will create a new Backstage tab named Export to manage the quick export functionality.Add a new XML Ribbon item to the existing ExportAddIn projectOpen Visual Studio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\ExportAddIn.slnRight click ExportAddIn in the Solution Explorer and choose Add -> New Item.In the Add New Item dialog, select the Office category.Choose the Ribbon (XML) item type and enter a name of Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#)Click Add to create the new ribbonFigure 1(a)-In case of C#Add Ribbon (XML) ItemFigure 1(b)-In case of VBAdd Ribbon (XML) ItemOpen the Ribbon.xml file located in the Solution ExplorerAdd XML Markup to the Ribbon.xml file to define the Export Backstage tabRemove the current ribbon node from the Ribbon.xml fileAdd the following markup to define the Backstage tab and the first column of informationXML<backstage> <tab id="tabExport" label="Export" insertAfterMso="TabInfo"> <firstColumn> </firstColumn> </tab></backstage>Inside the firstColumn element, add the following markup to define the group containing the XPS export controlsXML<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.Immediately following the previous group, add the following markup to define the PDF export controlsXML<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>Define the code that will load images for the export buttonsOpen Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerAdd the following GetButtonImage method to the Ribbon classC#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 BasicPublic Function GetButtonImage(ByVal control As Office.IRibbonControl) As System.Drawing.BitmapSelect Case control.IdCase "btnBackStageXPS"Return My.Resources.XPSCase "btnBackStagePDF"Return My.Resources.PDFCase ElseReturn NothingEnd SelectEnd FunctionNote: 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.Override the CreateRibbonExtensibilityObject method in the add-in to define the ribbon to loadOpen the ThisAddIn class by double clicking it in the Solution ExplorerIn the ThisAddIn class, override the CreateRibbonExtensibilityObject method and return a new Ribbon objectC#protected override Office.IRibbonExtensibility CreateRibbonExtensibilityObject(){ return new Ribbon();}Visual BasicProtected Overrides Function CreateRibbonExtensibilityObject() As Office.IRibbonExtensibilityReturn New Ribbon()End FunctionRun the add-in and verify the Backstage tab looks correctIn the Debug menu, click Start Without DebuggingOnce Word 2010 loads, click the Backstage button (labeled as File)In Backstage switch to the Export tab and verify it looks like the image belowFigure 2Custom Backstage Export tabTask 2 – Connect Backstage tab to document propertiesIn 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.Define the code behind that will determine when the button and editBox controls are enabledOpen Ribbon.xml by double clicking it in the Solution ExplorerAdd a getEnabled attribute to the button and editBox controlsXML<button id="btnBackStageXPS" getEnabled="GetEnable" ... />Note: You should find 2 button controls and 2 editBox controlsOpen Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerAdd the following private field to the classC#private ExportProperties m_properties = new ExportProperties();Visual BasicPrivate m_properties As New ExportProperties()Note: The ExportProperties class is a wrapper provided for you that wraps the CustomDocumentProperties collection of the current ActiveDocument.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 BasicPublic Function GetEnable(ByVal control As Office.IRibbonControl) As BooleanSelect Case control.IdCase "btnBackStageXPS", "txtXPSPath"Return m_properties.XpsEnabledCase "btnBackStagePDF", "txtPDFPath"Return m_properties.PdfEnabledCase ElseReturn FalseEnd SelectEnd FunctionAdd code to populate and respond to events from the enabled checkboxesOpen Ribbon.xml by double clicking it in the Solution ExplorerAdd 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 Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerCreate an IsEnableChecked method that will respond to requests from check box controls to get their current stateC#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 BasicPublic Function IsEnableChecked(ByVal control As Office.IRibbonControl) As BooleanIf control.Id = "chkEnableXPS" ThenReturn m_properties.XpsEnabledElseIf control.Id = "chkEnablePDF" ThenReturn m_properties.PdfEnabledElseReturn FalseEnd IfEnd FunctionCreate an EnableChecked method that will respond to the checking of a check boxC#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 BasicPublic 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 SubNote: 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.Add code to populate and respond to events from the path edit boxesOpen Ribbon.xml by double clicking it in the Solution ExplorerAdd a getText and onChange attribute to every editBox element XML<editBox id="txtPDFPath" getText="GetExportPath" onChange="SetExportPath" ... />Note: You should find 2 editBox controls Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerCreate a GetExportPath method that will retrieve the current export path for the editBox controlsC#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 BasicPublic Function GetExportPath(ByVal control As Office.IRibbonControl) As StringIf control.Id = "txtXPSPath" ThenReturn m_properties.XpsExportPathElseIf control.Id = "txtPDFPath" ThenReturn m_properties.PdfExportPathElseReturn String.EmptyEnd IfEnd FunctionCreate a SetExportPath method that will respond to the change event of the editBox controlC#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 BasicPublic Sub SetExportPath(ByVal control As Office.IRibbonControl, ByVal value As String)If control.Id = "txtXPSPath" Thenm_properties.XpsExportPath = valueElseIf control.Id = "txtPDFPath" Thenm_properties.PdfExportPath = valueEnd IfEnd SubRun the add-in and verify the enable checkboxes workIn the Debug menu, click Start Without DebuggingOnce Word 2010 loads, click the Backstage button (labeled as File)In Backstage switch to the Export tab Check and uncheck the enabled checkboxes and verify the related controls are enabled and disabledFigure 1Enable check box in Backstage tabTask 3 – Add quick export buttons to the Home ribbon tabIn 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.Add the ribbon markup to the Ribbon.xml fileOpen Ribbon.xml by double clicking it in the Solution ExplorerAdd the markup that will create a new Quick Export group in the Home tabMake sure the ribbon xml element is added before the backstage xml elementXML<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.Inside the grpQuickExport group element, add a menu control using an existing image within OfficeXML<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 imageInside the menu element, add the two button controls to perform the export as XPS or PDFXML<button id="btnRibbonXPS" label="XPS" getEnabled="GetEnable" getImage="GetButtonImage" /><button id="btnRibbonPDF" label="PDF" getEnabled="GetEnable" getImage="GetButtonImage" />Update the code behind to update the Ribbon buttons as well as the Backstage buttonsOpen Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerLocate the GetButtonImage method and add cases for the ribbon buttonsC#case "btnRibbonXPS":case "btnBackStageXPS": return Properties.Resources.XPS;case "btnRibbonPDF":case "btnBackStagePDF": return Properties.Resources.PDF;Visual BasicCase "btnRibbonXPS", "btnBackStageXPS"Return My.Resources.XPSCase "btnRibbonPDF", "btnBackStagePDF"Return My.Resources.PDFLocate the GetEnable method and add cases for the ribbon buttonsC#case "btnRibbonXPS":case "btnBackStageXPS":case "txtXPSPath": return m_properties.XpsEnabled;case "btnRibbonPDF":case "btnBackStagePDF":case "txtPDFPath": return m_properties.PdfEnabled;Visual BasicCase "btnRibbonXPS", "btnBackStageXPS", "txtXPSPath"Return m_properties.XpsEnabledCase "btnRibbonPDF", "btnBackStagePDF", "txtPDFPath"Return m_properties.PdfEnabledLocate the EnableChecked method and add InvalidateControl calls for the ribbon buttonsC#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 BasicIf 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 IfCreate the method that will perform the export when the buttons are clickedOpen Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerAdd the following using statements to the fileC#using Microsoft.Office.Interop.Word;Visual BasicImports Microsoft.Office.Interop.WordCreate a new method named ExportDocument that will use the ExportAsFixedFormat document method to export the current documentC#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 BasicPublic Sub ExportDocument(ByVal control As Office.IRibbonControl)Select Case control.IdCase "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 SubAdd the onAction attributes to all of the buttons in the Ribbon and BackstageOpen Ribbon.xml by double clicking it in the Solution ExplorerAdd a onAction attribute to every button element XML<button id="btnRibbonXPS" onAction="ExportDocument" ... /> Note: You should find 4 button controls Exercise 1 VerificationIn order to verify that you have correctly performed all steps in the above exercise, proceed as follows:Test the Add-inTest your add-in to confirm that the export ribbon and backstage buttons work as expected.Run the add-in and verify the enable checkboxes workIn the Debug menu, click Start Without DebuggingOnce Word 2010 loads, type a phrase in the document and click the Backstage button (labeled as File)In Backstage switch to the Export tab Check the Allow XPS Export check boxEnter an Export Path of %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\Export.xps Figure 4Export as XPSClick the To XPS button and using Windows Explorer navigate to the folder and open the Export.xps document. Close the .xps file.Verify the Home ribbon contains a new Quick Format buttonSwitch to the Home ribbon tab and type an additional phrase into the documentClick 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 ButtonWhen you are done cleanup and remove the add-inClose Word 2010In the Solution Explorer, right click Word2010AddIn and click Clean Exercise 2: Create a Custom Task PaneIn 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 ControlTask 1 – Creating a custom Task PaneIn this first task, you will use a pre-created WPF user control as a task pane.Create a Windows Forms UserControl to host the WPF Task PaneOpen Visual Studio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\WPFTaskPane\ WPFTaskPane.slnOpen Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerLocate the ThisAddIn_Startup method and add the following code to create a new UserControl C#UserControl taskPane = new UserControl();Visual BasicDim taskPane As New UserControl()Create a new ElementHost control to contain the WPF user control and add it to the Windows Forms UserControlC#taskPane.Controls.Add( new ElementHost { Child = new TaskPane(), Dock = DockStyle.Fill });Visual BasictaskPane.Controls.Add(New ElementHost With {.Child = New TaskPane(), .Dock = DockStyle.Fill})Add the Windows forms user control to the add-in as a task paneCreate a new CustomTaskPane object wrapping the user control from the previous stepC#Microsoft.Office.Tools.CustomTaskPane snippetsTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets");Visual BasicDim snippetsTaskPane As Microsoft.Office.Tools.CustomTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets")Set the visibility and size of the new task paneC#snippetsTaskPane.Visible = true;snippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight;snippetsTaskPane.Width = 300;Visual BasicsnippetsTaskPane.Visible = TruesnippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRightsnippetsTaskPane.Width = 300Task 2 – Add Snippets Ribbon ButtonIn this second task, you will add a ribbon button that will toggle the visibility of the snippets task pane.Add a toggle button to the View ribbon tabOpen Ribbon.xml by double clicking it in the Solution ExplorerAdd the tab element referencing the standard View ribbon tabXML<ribbon> <tabs> <tab idMso="TabView"> </tab> </tabs></ribbon>Add a snippets group and toggle button to the tab elementXML<group id="GroupSnippets" label="Snippets"> <toggleButton id="Snippets" label="Pane" size="large" imageMso="PageMenu" getPressed="IsSnippetsPressed" onAction="SnippetsToggle" /></group>Add the code behind to process the button toggle changesOpen Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution ExplorerAdd an IsSnippetPressed method to the Ribbon classC#public bool IsSnippetsPressed(Office.IRibbonControl control){ return Globals.ThisAddIn.CustomTaskPanes[0].Visible;}Visual BasicPublic Function IsSnippetsPressed(ByVal control As Office.IRibbonControl) As BooleanReturn Globals.ThisAddIn.CustomTaskPanes(0).VisibleEnd FunctionNote: The status is set using the Visible property of the CustomTaskPane objectAdd a SnippetsToggle method to the Ribbon classC#public void SnippetsToggle(Office.IRibbonControl control, bool value){ Globals.ThisAddIn.CustomTaskPanes[0].Visible = value;}Visual BasicPublic Sub SnippetsToggle(ByVal control As Office.IRibbonControl, ByVal value As Boolean)Globals.ThisAddIn.CustomTaskPanes(0).Visible = valueEnd SubNote: The value of the button is stored directly in the CustomTaskPane objectExercise 2 VerificationIn order to verify that you have correctly performed all steps in the above exercise, proceed as follows:Test the Add-inTest your add-in to confirm that the export ribbon and backstage buttons work as expected.Run the add-in and verify the enable checkboxes workIn the Debug menu, click Start Without DebuggingOnce Word 2010 loads, switch to the Views ribbon tabOn the View tab, click the Pane button in the Snippets group and verify the task pane is shown and hiddenDouble click one of the items in the task pane and verify the content is added to the documentFigure 6Custom Task PaneWhen you are done cleanup and remove the add-inClose Word 2010In the Solution Explorer, right click WPFTaskPane and click Clean Exercise 3: Outlook Form RegionsIn 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 RegionIn this first task, you will create a new Outlook Form Region attached to the existing Task forms in Outlook.Create new Outlook 2010 add-in projectOpen Visual Studio 2010 and select File -> New -> ProjectIn the New Project dialog select the Visual C#(in case of C#)/ Visual Basic(in case of VB) -> Office -> 2010 templatesChoose an Outlook 2010 Add-in templateSet the Name of the project to OutlookFormRegion and set the location to %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\StarterVerify Create directory for solution is unchecked and click OK to create the new projectFigure 7(a)-In case of C#Figure 7(b)- In case of VBNew Outlook 2010 Addin ProjectAdd a new form region named BillableTaskRegion to the Task formRight click on OutlookFormRegion in the Solution Explorer and click Add -> New ItemIn the Add New Item dialog choose the Visual C#(in case of C#)/ Visual Basic(in case of VB) -> Office templatesChoose OutlookFormRegion and name it BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of C#) Click Add to create the new itemIn the first page of the New Outlook Form Region wizard, choose Design a new form region and click NextIn the next page, select Adjoining and click NextFigure 8Choose Form Region TypeChange the name to Billable Task and click NextChoose the Task option and clear all other check boxes then click FinishFigure 9Choose Form Region ClassNote: 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 onlyTask 2 – Implement the Form RegionIn this second task, you will add controls to the form and implement the code behind necessary to make the form region functional.Add the controls to the form region to create the Billable Task extensions Figure 10Completed Custom Form RegionOpen 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 DesignerRight click the design surface and click PropertiesIn the Properties window, set the size of the canvas to 486, 150Using the toolbox, drag the following controls onto the canvas1 CheckBox1 ComboBox1 NumericUpDown1 TextBox2 LabelsSet the following properties on the CheckBox controls(Name) & Text – chkBillable & BillableLocation & Size – 6, 6 & 59, 17Set the following properties on one of the Label controlsText –CustomerLocation & Size – 87, 7 & 51, 13Set the following properties on the ComboBox control(Name) – lstCustomerLocation & Size – 143, 4 & 167, 21Items – Fabrikam Inc., Adventure WorksNote: Enter each company on its own lineSet the following properties on the remaining Label controlText –HoursLocation & Size – 347, 7 & 35, 13Set the following properties on the NumericUpDown control(Name) – numHoursLocation & Size – 386, 4 & 95, 20Set the following properties on the TextBox control(Name) - txtDetailsMultiline - trueLocation & Size – 5, 31 & 476, 116Anchor – Top, Bottom, Left, RightAdd the code behind that will implement the functionality of the formOpen 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 CodeAdd the following properties to the BillableTaskRegion classC#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 BasicPrivate m_taskItem As Outlook.TaskItemPrivate m_isBillable As Outlook.ItemPropertyPrivate m_customer As Outlook.ItemPropertyPrivate m_hours As Outlook.ItemPropertyPrivate m_details As Outlook.ItemPropertyAdd the EnsureItemProperty method to aid in creating custom properties on the taskC#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 BasicPrivate 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 IfEnd SubAdd the EnsureProperties method to verify all of the custom task properties existsC#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 BasicPrivate 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 SubAdd UpdateEnableState to update the state of the controls based on the state of the Billable checkboxC#public void UpdateEnableState(){ lstCustomer.Enabled = chkBillable.Checked; numHours.Enabled = chkBillable.Checked; txtDetails.Enabled = chkBillable.Checked;}Visual BasicPublic Sub UpdateEnableState()lstCustomer.Enabled = chkBillable.CheckednumHours.Enabled = chkBillable.CheckedtxtDetails.Enabled = chkBillable.CheckedEnd SubImplement FormRegionShowing to load the current property values into the controls and setup the initial state of the form regionC#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 Basicm_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.ValueAdd code behind that will write the contents of the controls as they changeCreate a method named chkBillable_CheckedChanged to handle the Billable check box’s checked eventC#private void chkBillable_CheckedChanged(object sender, EventArgs e){ m_isBillable.Value = chkBillable.Checked; UpdateEnableState();} Visual BasicPrivate Sub chkBillable_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)m_isBillable.Value = chkBillable.CheckedUpdateEnableState()End SubCreate a method named lstCustomer_TextChanged to handle the Customer drop down control’s changed eventC#private void lstCustomer_TextChanged(object sender, EventArgs e){ m_customer.Value = lstCustomer.Text;} Visual BasicPrivate Sub lstCustomer_TextChanged(ByVal sender As Object, ByVal e As EventArgs)m_customer.Value = lstCustomer.TextEnd SubCreate a method named numHours_ValueChanged to handle changes in the Hours controlC#private void numHours_ValueChanged(object sender, EventArgs e){ m_hours.Value = (double)numHours.Value;}Visual BasicPrivate Sub numHours_ValueChanged(ByVal sender As Object, ByVal e As EventArgs)m_hours.Value = CDbl(numHours.Value)End SubCreate a method named txtDetails_TextChanged to handle changes to the Details controlC#private void txtDetails_TextChanged(object sender, EventArgs e){ m_details.Value = txtDetails.Text;}Visual BasicPrivate Sub txtDetails_TextChanged(ByVal sender As Object, ByVal e As EventArgs)m_details.Value = txtDetails.TextEnd SubConnect the code behind to the controls using the designerOpen 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 DesignerRight click the Billable check box control and click PropertiesIn the Properties window, click the Event icon (the lightning bolt)Set the CheckedChanged event to chkBillable_CheckedChanged using the drop down listFigure 11Control EventsRepeat the above process to attach the Customer control’s TextChanged event to the lstCustomer_TextChanged methodRepeat the above process to attach the Hours control’s ValueChanged event to the numHours_ValueChanged methodRepeat the above process to attach the Details control’s TextChanged event to the txtDetails_TextChanged methodExercise 3 VerificationIn order to verify that you have correctly performed all steps in the above exercise, proceed as follows:Test the Add-inTest your add-in to confirm that the export ribbon and backstage buttons work as expected.Run the add-in and verify the enable checkboxes workIn the Debug menu, click Start Without DebuggingOnce Outlook 2010 loads, switch to the Home ribbon tabClick the New Items -> Task option to create a new taskVerify the Billable Task form region is visibleFigure 12Custom Task Form RegionEnter some data into the new task and save itSwitch to the Tasks section using the buttons in the lower left and open the task you just created.Verify the information in the Billable Task region is loading correctlyWhen you are done cleanup and remove the add-inClose Word 2010In the Solution Explorer, right click OutlookFormRegion and click Clean SummaryIn 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. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download