USD – SetVisualProperty Action

February 20, 2016

In this post I will look at the capabilities of the SetVisualProperty action within Unified Service Desk for Microsoft Dynamics CRM.

The science bit, according to the “manual” ….

“Set the visual (UIElement) properties such as height, width, and visibility of a hosted control. This action call is specifically useful for UI automation, such as automatically displaying or hiding a panel. Familiarity with XAML and Unified Service Desk layout is required for effectively using this action.”

*Parameter*	*Description*
*elementname*	The name of the UI element for which you want to set the property such as Expander, StackPanel, and Grid. For example: elementname=Expander
*propertyname*	The name of the property for the specified element that you want to set such as Height, Width, Visibility, and Color. For example: propertyname=Visibility
*value*	Specify the appropriate value for the specified property. Supported value types for this parameter are string, enumeration, integer, or bool. For example: value=Visible

Got it? So all is good? You know enough this post is over!!!!!!!

Well maybe but you might “like” from some actual examples and maybe some more information on possible “elementname”, “propertyname” and “value” settings.

All of the examples I am going to give have been tested and i know work. But I admit did try some things I couldn’t make work. (I will mention those as I go, maybe you can help me with them!!!) The positive is I also found some combinations not mentioned in the “manual”!! So yin and yang.

First of all, let’s look at a hosted control, all things USD related should start with a hosted control! J You will use the “SetVisualProperty” action on your “Main Layout” hosted control. You will probably already have a “Main Layout” but not please create one now;

Main Layout

My main layout is shown below. Notice that the USD Component type is “Panel Layout” and that the PanelType is “Standard Main Panel”.

Great. Ready? Let’s look at some examples.

I am going to run these examples directly in the debugger but you would actually create USD actions and call these from appropriate events in your application. I am simply using the debugger for speed.

Expand / Collapse Panels

It is possible to expand and collapse the right and left panels by using a simple action call. Very useful if you want to open the left panel as a session starts or open the right panel as USD loads etc.

elementname=ExpanderSessionDetails
propertyname=IsExpanded
value=true

A few things to note;

Element Name

In this case your element name will be “RightPanelExpander” or ” ExpanderSessionDetails”.

With RightPanelExpander meaning the right panel, as you’d expect.

ExpanderSessionDetails is the left panel. Obvious! There is some logic here, as the left panel is actually made up of several parts. (More on that later.)

Property Name

In this case the propertyname field will be set to “IsExpanded”. Not mentioned in my extract from the manual above. J

Value

Set the value field to false to collapse the panel or true to expand.

Note: For other types of property the value won’t always be true or false. More on that later.

Make Panels Visible/Invisible

First of all, a bit of magic …. Now you see them ……

Now you don’t ……

In this example I have run three commands to hide each part of the left panel independently. Earlier, when I expanded the left panel I used just ExpanderSessionDetails. ExpanderSessionDetails refers to all of the elements of the left panel as a collection. Something you need to do if expanding or hiding the whole panel. If you want the left panel to completely vanish you’d use it as shown below.

elementname=ExpanderSessionDetails
propertyname=Visibility
value=1

Notice that the value is set to 1. “1” will hide the panel and “0” will show the panel. (I admit I had help in figuring that out! It wasn’t obvious from the technical notes I found.)

At this point it might be useful if I gave you some more details on the possible panel names. That you will need for the “elementname” field.

Panel	Description
MainPanel	The main work area in the bottom right.
ChatPanel	The typical location of the chat window. It is under the agent scripting control.
HiddenPanel	A nonvisible panel generally used for component without a user interface (UI).
LeftPanel1	A panel just under the WorkflowPanel on the left.
LeftPanel2	A panel just under the LeftPanel1 on the left.
LeftPanelFill	A panel just under the LeftPanel2. This panel expands to fill the rest of the area available to the bottom edge of the left panel.
RightPanel	A panel located on the right side.
CtiPanel *	A panel located in the top right, it is the default location for softphone controls. This is a stack panel so more than one control can be added and will show up next to each other.
SessionExplorerPanel *	A panel located just under the session tabs where you typically display the session lines.
WorkflowPanel *	A panel located just under the SessionExplorerPanel and usually contains the agent scripting control.
ToolbarPanel *	A panel at the very top just to the right of the Unified Service Desk logo, and typically holds the Toolbar.
RibbonPanel	For internal use only.
StatusPanel *	A special panel located on the status bar at the bottom of the application.

* These panels are generally reserved for special purposes (BUT you can use these names in SetVisualProperty)

NOTE: I admit that in my tests couldn’t find the name for one panel. I wanted to hide a navigation toolbar, a toolbar I ‘d associated with a hosted control so that it showed at the top of a tab. If anyone finds how to SetVisualProperty on one of those panels, please comment on this post I will update these notes.

Other options for property name

Now you know the panel names and have some examples you’ll no doubt be really excited to try some combinations. So what else can you do with SetVisualProperty?

The “manual” said, “Height, Width, Visibility, and Color“. I have already shown “IsExpanded” which isn’t mentioned and “Visibility” which is.

Note:
I have been unable to get “Color” to do anything and I have tried quite a few combinations. Again if anyone would like to comment on this post with a working example I will be happy to update these notes for everyone.

Height & Width

In the example below I have used the Height property to make my Session overview taller. This idea might be useful if you wanted to create more space for the overview.

elementname=SessionExplorerPanel
propertyname=Height
value=200

Note:
I did find some slightly “unexpected” behavior with Height and Width. For example, just because I increased the width of a panel it doesn’t mean the hosted controls will scale to fit the resized panel. So you might find you are just making the panel wider. Which isn’t so useful. .

Opacity

I found this parameter and got it working. Its existence interested me as it suggested other things will be possible for SetVisualProperty. I will continue digging and will update this post if / when I find some interesting examples. (Plus I’d love to hear about any useful examples you find.)

Opacity lets you define how “clear” the contents of a panel are. It has a value from 0 to 1. One being fully visible and zero being invisible. So 1 would be normal, .5 would be quite clear and .1 would be almost greyed out.

elementname=LeftPanelFill
propertyname=Opacity
value=.4

In the example below you can see that my session overview is almost invisible, my agent script stands out and my notes are slightly greyed out. I guess you could use this to help focus someone on the most critical information.