Sep
25

Part 2: Custom Form Templates for Service Manager 2012

By

In Part 1: Custom Form Templates for Service Manager 2012 I showed you how to make use of the custom form templates, this time I’ll show you how the templates were created. This blog post will not only be useful to those that wants to create templates that can be used with the Service Manager Authoring Tool, but this is also a good start for those who want to build their complete form within Visual Studio.

In the previous post I shared two templates that re-used Service Manager controls to equipe custom forms with the Related Items Tab and the History Tab. This is how they were created.

Setting up the development environment

This guide was developed on a machine that had the following components installed:

  • Visual Studio 2012
  • Service Manager 2012 Console
  • Service Manager 2012 Authoring Tool
  • Service Manager 2012 Update Rollup 2

Note: You should without any problems be able to use any version of Visual Studio 2010/2012 when following this guide.

Setting up the Visual Studio Project

  1. Fire up Visual Studio 2010/2012 and create a new “WPF User Control Library”
    Important: You need to make use of .Net Framework 3.5
    SNAGHTML2bfe415
  2. Add the following references to the project
?View Code CSHARP
Microsoft.EnterpriseManagement.UI.Control.dll 
Microsoft.EnterpriseManagement.UI.SMControls.dll 
Microsoft.EnterpriseManagement.ServiceManager.Application.Common.dll 
Microsoft.EnterpriseManagement.ServiceManager.SharedResources.dll

All but the “SharedResources” assembly can be found in the installation directory of the Service Manager console. The “SharedResources” assembly can be found in a sub directory of the “Authoring Tool installation directory” called PackagesToLoad.

Creating the Form Templates

This section will guide you in how to build a custom form template which will contain two special Service Manager controls, the RelatedItemsPane control (Related Items tab) and the History control (History tab).

  1. Delete UserControl1 and add a new user control called MyTemplate (for Part 1 of this blog post I created two templates, CITemplate and WITemplate)
  2. In the XAML code for the user control, in the UserControl tag, set the Height and Width to something like 600 to make it easier to work with the control in the Authoring Tool.
  3. In the XAML code for the user control, add the following reference
?View Code CSHARP
xmlns:smcontrols="clr-namespace:Microsoft.EnterpriseManagement.UI.WpfControls;assembly=Microsoft.EnterpriseManagement.UI.SMControls"
  1. Drag a TabControl onto the design surface.
  2. Name the existing tab item “tabItemGeneral
  3. Add two tab items – tabItemRelItems for “Related items” and tabItemHistory for “History”.
  4. Add a Grid control inside the “General Tab”

Step 4-7 should give you a TabControl XAML representation as below:

<TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <TabItem Header="General" x:Name="tabItemGeneral">
        <Grid />
    </TabItem>
    <TabItem Header="Related Items" x:Name="tabItemRelItems">
    </TabItem>
    <TabItem Header="History" x:Name="tabItemHistory">
        <smcontrols:HistoryTab></smcontrols:HistoryTab>
    </TabItem>
</TabControl>

Note: The Authoring Tool doesn’t support adding controls directly inside a TabItem, that’s the reason for adding a Grid control in step 7.

Adding the “Related Items Tab”

To re-use the “Related Items” control in your custom form template you need to make use of the RelatedItemsPane control. To add the “Related Items” control simply declare the control in your code behind:

?View Code CSHARP
private RelatedItemsPane _relatedItemsPane;

Depending on if you’re going to use the form template to create forms for Work Item classes or Configuration Item classes there’s a difference:

Alt.1 – Related Items Tab in Configuration Item Forms

Add the following two lines to the constructor (“MyTemplate()”) method of your user control:

?View Code CSHARP
_relatedItemsPane = new RelatedItemsPane(new ConfigItemRelatedItemsConfiguration());
tabItemRelItems.Content = _relatedItemsPane;

Alt.2 – Related Items Tab in Work Item Forms

Add the following lines to the constructor (“MyTemplate()”) method of your user control:

?View Code CSHARP
var paneConfig = new WorkItemRelatedItemsConfiguration("RelatedWorkItems", "RelatedWorkItemSource","RelatedConfigItems","RelatedKnowledgeArticles","FileAttachments");
_relatedItemsPane = new RelatedItemsPane(paneConfig);
tabItemRelItems.Content = _relatedItemsPane;

Note: When using the “Related Items” control you need to provide the form with a binding source that contains the required relationships (components) used by the “Related Items” control. If the form isn’t bound to a type projection that includes the relationships used by the “Related Items” control the “Related Items” control will be “disabled”. In the section called “Wiring up a working binding source” in Part 1 of this blog post there’s examples of two type projections that contains the required components, one for work item forms and one for configuration item forms.

Adding the “History Tab”

To add the “History” control to a tab item you simply add the control in the XAML code for the tab item as below:

?View Code CSHARP
<TabItem Header="History" x:Name="tabItemHistory">
	<smcontrols:HistoryTab></smcontrols:HistoryTab>
</TabItem>

Wrapping it up!

Compile the project in (Release Mode) and use the output assembly (e.g. Litware.SCSM.CustomFormTemplates.dll) as described in Part 1: Custom Form Templates for Service Manager 2012.

In this example I did’t go all the way and add localization support, for more information on localization support in custom forms see: Localizing Forms – Service Request Example

For reference, here’s the XAML code and code beind of the CITemplate and WITemplate I created in Part 1 of the blog post:

CITemplate.xaml

<UserControl x:Class="Litware.SCSM.CustomFormTemplates.CITemplate"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:smcontrols="clr-namespace:Microsoft.EnterpriseManagement.UI.WpfControls;assembly=Microsoft.EnterpriseManagement.UI.SMControls"
             mc:Ignorable="d" 
             Height="600" Width="600">
    <Grid>
        <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
            <TabItem Header="General" x:Name="tabItemGeneral">
                <Grid/>
            </TabItem>
            <TabItem Header="Related Items" x:Name="tabItemRelItems">
            </TabItem>
            <TabItem Header="History" x:Name="tabItemHistory">
                <smcontrols:HistoryTab></smcontrols:HistoryTab>
            </TabItem>
        </TabControl>
    </Grid>
</UserControl>

CITemplate.xaml.cs

?View Code CSHARP
using Microsoft.EnterpriseManagement.ServiceManager.Application.Common;
 
namespace Litware.SCSM.CustomFormTemplates
{
    /// <summary>
    /// Interaction logic for CITemplate.xaml
    /// </summary>
    public partial class CITemplate
    {
        private readonly RelatedItemsPane _relatedItemsPane;
 
        public CITemplate()
        {
            InitializeComponent();
 
            _relatedItemsPane = new RelatedItemsPane(new ConfigItemRelatedItemsConfiguration());
            tabItemRelItems.Content = _relatedItemsPane;
        }
    }
}

WITemplate.xaml

<UserControl x:Class="Litware.SCSM.CustomFormTemplates.WITemplate"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:smcontrols="clr-namespace:Microsoft.EnterpriseManagement.UI.WpfControls;assembly=Microsoft.EnterpriseManagement.UI.SMControls"
             mc:Ignorable="d" 
             Height="600" Width="600">
    <Grid>
        <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
            <TabItem Header="General" x:Name="tabItemGeneral">
                <Grid/>
            </TabItem>
            <TabItem Header="Related Items" x:Name="tabItemRelItems">
            </TabItem>
            <TabItem Header="History" x:Name="tabItemHistory">
                <smcontrols:HistoryTab></smcontrols:HistoryTab>
            </TabItem>
        </TabControl>
    </Grid>
</UserControl>

WITemplate.xaml.cs

?View Code CSHARP
using Microsoft.EnterpriseManagement.ServiceManager.Application.Common;
 
namespace Litware.SCSM.CustomFormTemplates
{
    /// <summary>
    /// Interaction logic for CITemplate.xaml
    /// </summary>
    public partial class WITemplate
    {
        private readonly RelatedItemsPane _relatedItemsPane;
 
        public WITemplate()
        {
            InitializeComponent();
 
            var paneConfig = new WorkItemRelatedItemsConfiguration("RelatedWorkItems", "RelatedWorkItemSource",
                                                               "RelatedConfigItems", "RelatedKnowledgeArticles",
                                                               "FileAttachments");
            _relatedItemsPane = new RelatedItemsPane(paneConfig);
            tabItemRelItems.Content = _relatedItemsPane;
        }
    }
}

Comments

  1. Pedro Renan says:

    Hi Congratulations on your two posts about how to develop custom forms. I managed to make my own, but I can not create notifications by email. In Operations Manager an error message appears, saying that it was not possible to identify the type definition. I auditioned as a management pack that left for download and had the same error.

  2. Pedro Renan says:

    Update: restarted the service manager and worked … lol

  3. Excellent Patrick, thanks for sharing!

  4. [...] There are a number of good blog posts out there that give you some very detailed instructions on how you can build your custom forms using Visual Studio, like this link, this link, and this link. [...]

  5. Hi Patrick

    I’m using Windows 8 and I installed Microsoft Visual Studio Express 2012 for Windows Desktop. I can not locate the “WPF User Control Library” Project. Do I have to install some add-ons or plugins etc?

  6. [...] procedimentos já foram escritos pelo Patrik Sundqvist, mas o post é um pouco mais voltado para quem já está habituado com programação, então alguns [...]

  7. Roman Stadlmair says:

    Hi Litware !

    If i would create a custom WorkItem, would your solution add an autoincrementing ID to the workitem ?

    It should have a custom prefix (i.e. IF for Infoticket) and an autoincrementing value afterwards.

    Thanks / Roman

Leave a Reply