USD – Custom Branding

A new feature with Microsoft’s Unified Service Desk 2.2 is the ability for developers to modify the login and splash screen to apply your own name / branding. In this post I will look at this concept, I work for a company called Crimson. So by way of an example I will show how I’ve altered my USD application to have their branding.

As USD loads my splash screen now looks like this …

On my splash screen I’ve changed the application name, font style and background colour. Using three style keys of SplashAppNameStyle, SplashScreenDefaultFontStyle and SplashGridBgColor.

My login screen looks like this …

On the login screen the new feature allowed me to change the application name field. This is one with a style key of FormAppNameStyle.

Note: I would have liked to have made more changes to the login screen, including changing the picture of the two guys who are obviously not call centre workers. I currently don’t know how to change this image. Any suggestions????

Making these changes was a simple enough process. First, I created some XAML. Mine looked like this…

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:resx1="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Properties">

  <Style x:Key="FormAppNameStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="Red"></Setter>
    <Setter Property="FontFamily" Value="Segoe UI"></Setter>
    <Setter Property="FontSize" Value="40"></Setter>
    <Setter Property="Background" Value="White"></Setter>
    <Setter Property="Text" Value="Crimson"></Setter>
  </Style>
    
    <Style x:Key="SplashAppNameStyle" TargetType="Label">
    <Setter Property="Foreground" Value="Red"></Setter>
    <Setter Property="FontFamily" Value="/UnifiedServiceDesk;component/Fonts/#Segoe UI"></Setter>
    <Setter Property="FontSize" Value="40"></Setter>
    <Setter Property="Content" Value="Crimson"></Setter>
  </Style>

  <Style x:Key="SplashScreenDefaultFontStyle" TargetType="TextBlock">
    <Setter Property="FontSize" Value="14px"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="TextTrimming" Value="WordEllipsis"/>
    <Setter Property="FontFamily" Value="Calibri"/>
  </Style>

  <Style x:Key="SplashGridBgColor" TargetType="Grid">
    <Setter Property="Background" Value="Gray"></Setter>
  </Style>

</ResourceDictionary>

Next I saved this XAML with the name “CustomerSplashStyles.XAML”.

Once I’d saved my file I copied it into the program directory of USD. Which for me meant copying my XAML file into “C:/Program Files/Microsoft Dynamics CRM USD/USD”.

Finally, I finished my branding off by changing the application name and also adding Crimson’s logo.

I have described how to change the application name before, you can find that post here.

Changing the logo is dead simple. Simply go into customizations in CRM, find the web resource called “msdyusd_Logo” and change the image. In my example I have used an image that was 160 x 35 pixels.

I hope you enjoy re-branding your application.
J

3 thoughts on “USD – Custom Branding

  1. Hi Neil,
    thank you so much for your blog, so far it has been immensely helpful in getting started with USD.

    I wanted to add that it is possible to use an image for the logo in the splash screen rather than text by using the following XAML syntax in SplashAppNameStyle:

    Basic stuff, but I figured this information could be helpful to somebody that doesn’t have much experience in XAML.

    Like

    • Argh, the code snippet is gone. Let’s try by HTML encoding it:
      <Setter Property="Content"> <Setter.Value> <Image Source="pathTo/image.png"/> </Setter.Value> </Setter>

      Oh, and I have a question. Neil, is it possible to deploy these files using the Customization Files configuration? Since the Customization Files are deployed in the appdata folder, this doesn’t seem to be a viable solution. Is the only way a custom MSI installer?

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s