Dec
19

Color Coded Views

By

The question has been asked a number of times: “Can the views in Service Manager be color coded?". For a while now I’ve been telling people that they can be. In this blog post I’ll show one way of doing exactly that.

Before I go into the details of how to do this I would like to take the opportunity to introduce Gridpro AB. Gridpro is the name of a new System Center (SC) focused company founded by me and my friend and co-founder Jonas Ullman. We’ll be focusing on developing products and solutions around the SC family of products. The company web site (http://www.gridpro.se) should be up within a few weeks but this blog will live on as my, Jonas and Gridpro’s contribution to the SC community. Now to the solution!

First, let’s take a look at what we want to accomplish. Using the Incident settings in Service Manager it’s possible to configure a priority matrix which is used by built in workflows to calculate the priority of an incident given the values of impact and urgency. Based on the calculated priority value I want to color code the incident in incident views in the Service Manager console according to the following table:

Priority Color
1 Red
2 Red
3 Red
4 Yellow
5 Yellow
6 Yellow
7 Green
8 Green
9 Green

The first thing to understand, which is what makes this possible, is that the column configuration of a view is XAML based code that is stored in a management pack. If you create a incident view containing the Priority property you’ll find the following line of XAML in the <Presentation> tag of the view definition within the management pack where you stored the view:

<mux:column name="Priority" displaymemberbinding="{Binding Path=Priority}"
 width="100" displayname="Priority.6bd567905b574b128823749bc7dc6e74"
 property="Priority" datatype="s:Int32" />

The code above defines the column that displays the priority value of each incident listed in the view. Now, after reading some documentation around the Service Manager Grid Views found here: Grid View Configuration and what it means. I found that the schema for the grid view column supports templates. This means that we can define how each cell in the column should be presented using any WPF control like Borders, Grids, Textboxes etc.

In the example below I’ve created a new view for incidents containing, amongst other properties, the incident priority. I’ve exported the management pack where I stored the view and added a new column definition using the cell template part of the schema. After a few minutes of serious designing Smile I came up with the following definition.

<mux:column datatype="s:Int32" property="Priority" displayname="Priority.6bd567905b574b128823749bc7dc6e74" width="110" name="PriorityColor">  
	<mux:column.celltemplate> 
		<datatemplate>  
			<border width="80" height="Auto" verticalalignment="Stretch" horizontalalignment="Stretch" background="{Binding Path=Priority, Converter={x:Static gridpro:PrioColorConverter.Default}}" cornerradius="5" borderbrush="Black" borderthickness="2"> 
				<dockpanel lastchildfill="True"> 
					<textblock verticalalignment="Center" horizontalalignment="Center" margin="0" text="{Binding Path=Priority}" /> 
				</dockpanel> 
			</border> 
		</datatemplate> 
	</mux:column.celltemplate> 
</mux:column>

I’ve basically copied the generated definition of the Priority column, given the column a new name, removed the DisplayMemberPath property and added the child elements that defines my new cell template. Also, notice that I’ve reused the generated DisplayName of the Priority column. Reusing the identifier of the Priority column DisplayName means that the column will get the header value “Priority”.

The most important part, which make the magic happen, is the binding defined of the Background property of the Border. Notice that I’m using a value converter. The value converter is a few lines of code that I’ve written in C# which takes a property value as input, applies my custom logics and returns a new value. Since the Background property expects a color I cannot simply bind the property to the incident priority, the border wouldn’t know which color to present for a value like “8”. Using the value converter which maps a priority value (1-9) and translates each of these values to value of either “green”, “yellow” or “red” the border can be displayed with the “correct” background color.

In the download, found in last in this post I’ve included an example management pack containing the view from the picture below, the assembly containing the value converter and the source code for the value converter. To try the example out:

  1. Copy the assembly “Gridpro.ChristmasGifts.Converters.dll” (containing the value converter) to the Service Manager installation path, usually “C:\Program Files\Microsoft System Center\Service Manager 2010”.
  2. Import the management pack “Gridpro.ChristmasGifts.ColorCodedView.xml”
  3. Make sure you’ve configured the Priority calculation within Incident Settings (Administration – Settings – Incident Settings).
  4. Make sure you have some incidents in your env. and go to Work Items – Incident – Merry Christmas

The result can be seen in the picture below, enjoy!

ColorCodedView

Download solution files: Color Coded Views – Gridpro Christmas Gift

Note: To learn how you can modify the cell template you should read up on basic Windows Presentation Foundation.

Be sure to read the comments made in the provided management pack.
Merry Christmas!

Comments

  1. Klabbe says:

    Rock’n'Roll….implemented in Customer test environment!

  2. Dennis says:

    Nice article, very useful. Thanks for sharing!

  3. [...] Muchos clientes quieren poder ver las diferentes prioridades con colores, un ejemplo de como conseguirlo lo tienes aquí: http://blogs.litware.se/?p=836 [...]

  4. Hi Patrick

    Is it possible to re-write this to depend on resolve by date?

    If an incident is overdue: red
    If there is 24 hours left: yellow
    If there is more than 24 hours: green

    Thanks.

  5. Patrik Sundqvist says:

    Yes, since it’s evaluated att runtime you could just compare the “Resolved By” date with “DateTime.Now” and take action on that.

  6. Audrey says:

    Is it possible to color code the views by the incident status instead?

  7. Patrik Sundqvist says:

    Hi Audrey,

    Yes, that can be done by using the same strategy, a value converter. One would need to create the mapping between colors and statuses though. Actually, we could even have different icons for the different statuses.

  8. Audrey says:

    I uploaded the xml and copied the dll in, but it says invalid view. Help?

  9. Patrik Sundqvist says:

    Did you re-start the console?

  10. Patrik Sundqvist says:

    Did you copy the dll to the machine running the console?

  11. Audrey says:

    I didn’t – I had copied it to the server. Once I copied it to the local folder your view worked! Thanks

  12. Patrik Sundqvist says:

    You’re welcome :)

  13. [...] ? ??????? ?? ????????? ????? ????? ???????? ??? ????? ??????? ??? ????????????? ????????????? XML-??? [...]

  14. [...] you can use any markup without necessary to edit XML code. For example, you can add columns like this. For developers will be added ability to add custom [...]

  15. Dustin Elliott says:

    Any update on when Advanced View Editor 2.0 Pro will be released?

  16. John Grenfell says:

    Does this work on SCSM 2012?

  17. Patrik Sundqvist says:

    Are you talking about Anton’s tool?
    http://gallery.technet.microsoft.com/Advanced-View-Editor-e4592390

    If so, keep an eye at http://blog.scsmsolutions.com/

  18. Patrik Sundqvist says:

    Should work fine. Though, I’ll be writing a “2012″ update for this post as soon as possible.

  19. Eric says:

    Side note for SCSM 2012:
    For SCSM 2012 you have to keep in mind to compile the created/edited C# file with .NET Framework 3.5 and not with .NET Framework 4. If you compile it with 4.0, you will get an error like “invalid view” in SCSM 2012.
    Regards Eric

  20. Roman Stadlmair says:

    Hi All !
    Any update on the 2012 Edition ?
    Roman

  21. I just tried this on SCSM 2012 and while I was able to import the MP and copy the DLL, I seems I am unable to select the “PriorityColor” column when I am editing my View.

    Is there a way to do this without needing the DLL? Maybe some key:value pirs in the XML or something?

  22. Chris Deacon says:

    Same result (no priority color) with SCSM2012. Very interested in seeing a 2012 update.

Leave a Reply