Customize USD Toolbar buttons

One of the hidden features of USD is it’s ability to render the XAML as Display text for Tabs & Buttons (There might be some other places, which I haven’t looked yet 😊, Please post on comments if you see any other). The advantage of able to render the XAML is, you can change the whole look and feel of the tool bar buttons. Have you ever come across a requirement where the customer want to show some highlighted button to show the importance of it, for ex : Number of active cases as shown in below image? Or the number of active calls in the Queue? Or the “escalated” cases count?

USD Customized toolbar buttons

USD Customized toolbar buttons

Yes, the Red coloured Circles are USD Tool bar buttons, No Custom code except for a bit of XAML. And with a bit more XAML and time, you can even change colour dynamically as well. Let’s dig in to how do we achieve this style.

In this example, we will try to create a highlighted tool bar button that shows number of active cases assigned to the user.

Create an Entity Search

First we will create an entity search which tells us the number of active cases assigned to the logged in user.

TIP: You can use advanced find and get the Fetch XML like how we normally do. Just make sure to get only the fields that we need. In this case, all I’m looking for is Counts, so no other fields included.

Field Value
Name My Active Cases Count (Or any other name you like)
Entity Incident
Fetch XML <fetch version=”1.0″ output-format=”xml-platform” mapping=”logical” distinct=”false”>

<entity name=”incident”>

<attribute name=”incidentid” />

<filter type=”and”>

<condition attribute=”ownerid” operator=”eq-userid” />

<condition attribute=”statecode” operator=”eq” value=”0″ />

</filter>

</entity>

</fetch>

Call the DoSearch to get the Active Cases Count

Create an Action call, Use CRM Global Manager’s DoSearch Action to get the Active cases count.

Field Value
Name Get My Active Case count (Or any other name you like)
Hosted Control CRM Global Manager (Hoping you are following the same name for Global Manger)
Action DoSearch
Data name=My Active Cases Countglobal=True

Add the Action call to Desktop Ready event

Associate the Get My Active Case Count action call created in previous step to the DesktopReady event so that, whenever USD loads – it fetches the Active case count. This is how my DesktopReady event looks after adding the action call.

DesktopReady Event

DesktopReady Event

With this we are done with the Entity Searches, Action calls and events to get the Active cases count. Now let’s look in to the actual tool bar button part.

Create a New tool bar button

Open the existing Main Tool bar (or whatever the other tool bar you want), Add a new button with the following information

Field Value Explanation
Name Number of Active cases (Or any other name you like) Any name should work.
Button Text [[$Context.ActiveCaseButtonText]vg+] This would be the Replacement parameter which holds the XAML. You can directly place your XAML over here as well, but note that there is number of characters limit in this field so you might not be able to place full XAML.*Note the usage “v” in replacement parameter – this helps in replacing replacement parameters inside a replacement parameter.
Visible Condition “[[$Return.Get My Active Case count]g+]” != “0” && “[[$Return.Get My Active Case count]g+]” !=”” Hiding the button if the cases count is – 0.

This is how my tool bar button now looks in CRM.

USD Toolbar Button

USD Toolbar Button

Note: You can add further action calls on what should happen when user click this button. There is nothing new in how do you add an action call to a button. Let me know if any details needed on that front via comments.

Create an Action call to set the Button Text

Create a new action call using CRM Global Manager’s CopyToContext with the following information.

Field Value Explanation
Name Copy Active Cases count Button XAML to Context Any name should work
Hosted Control CRM Global Manager Hoping you are following the same name for Global Manger
Action CopyToContext Copies the key-value Data parameter in to Context
Data ActiveCaseButtonText=<Border BorderThickness=”1″ Cursor=”Hand” BorderBrush=”Red” CornerRadius=”20″><Border BorderThickness=”2″ Padding=”2 0 2 0″ BorderBrush=”White” Background=”Red” CornerRadius=”20″><TextBlock Text=”[[$Return.Get
My Active Case count]g+]
” HorizontalAlignment=”Center” Padding=”3″ Foreground=”White” FontWeight=”Bold” FontSize=”12″/></Border></Border>
Piece of XAML that I have used to display a Circular button. You can use your own XAML if you want a different style/layout.* Notice the ActiveCaseButtonText, this is the replacement parameter we used as Button Text in previous step.

* Make a note of the Replacement parameter highlighted. This is the action call which tells us the cases count. Make sure you use your action call name created in previous steps.

* Notice how I have changed the Cursor as well to get it a different experience.

** Once after entering the XAML, the text box in CRM won’t display the XAML, but if you mouse hove, you will be able to see the XAML text.

Add the Action call to Desktop Ready event

Add the above action call as well to Desktop ready event so that when USD starts, after getting the cases count, it will populate the Replacement parameter – ActiveCaseButtonText

Desktop Ready event

Desktop Ready event

That’s all it takes. Close and Open USD and you should see some thing like this in USD.

USD Customized toolbar button

USD Customized toolbar button

Hope you enjoyed the post, Let me know your thoughts by comments.

Thank you !!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s