Panels, panel types, and panel layouts in Unified Service Desk

  • Article

Unified Service Desk for Microsoft Dynamics CRM uses panels to display hosted controls of various types. Various predefined panel types are available in Unified Service Desk to support a variety of layout options such as tabbed layout, deck layout, and stacked layout. You define the arrangement of these panels on the main screen of Unified Service Desk using a Panel Layout hosted control. More information: Panel Layout (Hosted Control)

In This Section

Panels in Unified Service Desk

Panel types in Unified Service Desk

Panel layouts in Unified Service Desk

Panels in Unified Service Desk

Whenever you create a hosted control, you have to specify the panel that will hold it in the Display Group field of the New Hosted Control page. For most of the hosted control types, Unified Service Desk automatically populates a panel value in the Display Group field. For example, MainPanel is used for a CRM Page type of hosted control and ToolbarPanel is used for the Toolbar Container type of hosted control.

The following predefined panels are available in Unified Service Desk.

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 so use of these should be avoided unless this is considered.

Panel types in Unified Service Desk

Unified Service Desk provides the following predefined panel types to support a variety of layout options:

Panel Type Description

USDTabPanel

This panel type contains a tab control. Each hosted control is loaded on one of the tabs. The tab name displays the value specified in the Display Name filed of a hosted control. If no display name is specified for a hosted control, the hosted control name is displayed as the tab name. The tab control/header is displayed for this panel type if one or more hosted controls are on it.

USDStackPanel

This panel type stacks hosted controls in a horizontal or vertical fashion similar to a stack panel in Windows Presentation Foundation (WPF) (WPF). These can be useful for toolbars or status bars, etc. This panel type is derived from StackPanel, which supports an Orientation property. This orientation should be defined in the XAML to define which way the hosted controls should be stacked.

USDDeckTabPanel

If a single hosted control is on this panel, the tabs are not shown. The tabs for a tab control are shown if two or more controls reside on this panel.

Note

This control is the same as the USDTabPanel but a style exists in the default themes that will hide the tabs at the top, when only one control is loaded.

USDCollapsePanel

This is the same as the USDTabPanel but a style in the default themes is defined that will automatically collapse this panel type so it no longer takes up space in the UI, if no hosted controls are loaded within it.

USDFloatingPanel

The default desktop provides an instance of this panel type. When “FloatingPanel” is specified for a hosted control, this panel type is being used. Typically you would not specify this panel type in your custom layout, however, it is exposed in case there is a reason to use it.

USDFloatingToolPanel

This panel type creates a tool window for each hosted control loaded into it. The default desktop provides an instance of this panel type. When “FloatingToolPanel” is specified for a hosted control, this panel type is being used. Typically you would not specify this panel type in your custom layout, however, it is exposed in case there is a reason to use it.

USDPopUpPanel

This panel type enables the content in the hosted control to hover over the main view.

You can also use these predefined panel types to create a custom panel type in Unified Service Desk. More information: Create a custom panel type

Panel layouts in Unified Service Desk

Use panel layout to define the arrangement of panels on the screen; this is done using a Panel Layout hosted control. More information: Panel Layout (Hosted Control)

This layout depicts the Standard Main Panel layout panel locations in Unified Service Desk.

Air theme in Unified Service Desk

If no panel layouts are defined in the Unified Service Desk application, the Standard Main Panel is assumed, and will be created automatically. If you create any Panel Layout control, you must configure a replacement for the Standard Main Panel. Any panel layout may be used in its place; however, it is quite common to just define the Standard Main Panel. The full application area on the main window is defined as a panel itself. This area is called MainWorkArea.

Because these panel layouts are hosted controls themselves, you may use a panel layout anywhere you would have configured a hosted control. One common use for this is to define a split view in the main panel area. You might display a list view showing a list of accounts at the top and a detail view at the bottom. You might display a whole panel layout in the floating panel and show it on a second monitor. For more information about the usage of floating panes, see Configure Pop In and Pop Out feature for knowledge base articles.

Unified Service Desk defines the following commonly used panel layouts:

Panel layout Description

Standard Main Panel

The standard layout provides the traditional layout including a series of panels on the left, collapsible area and a main work area on the right. The following is the XAML used to define the layout of this component.

<USD:PanelLayoutBase xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
 mc:Ignorable="d" xmlns:local="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics" xmlns:USD="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics.PanelLayouts;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics"
 d:DesignHeight="300" d:DesignWidth="300">
  <Grid x:Name="LayoutRoot">
    <Grid.Resources>
      <local:CRMImageConverter x:Key="CRMImageLoader" />
                                       <Style x:Key="ImageLogo" TargetType="{x:Type Image}">
   <Setter Property="FlowDirection" Value="LeftToRight"/>
   <Setter Property="Width" Value="161" /> 
   <Setter Property="Height" Value="25" /> 
   <Setter Property="Margin" Value="0" /> 
   <Setter Property="HorizontalAlignment" Value="Left" /> 
   <Setter Property="VerticalAlignment" Value="Center" /> 
  </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
      <RowDefinition Height="auto"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="#d8d8d8" BorderThickness="0,1,0,1">
    <Grid Background="{DynamicResource WindowHeaderStyle}" Grid.Row="0" Margin="0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <Image Grid.Column="0" Source="{Binding Source=msdyusd_Logo, Converter={StaticResource CRMImageLoader}}" Style="{DynamicResource ImageLogo}"   />
      <Rectangle Width="10" Grid.Column="1" />
      <USD:USDDeckTabPanel x:Name="ToolbarPanel" Grid.Column="2" AutomationProperties.Name="Toolbar Panel" VerticalAlignment="Stretch" Focusable="False" Margin="1" />
<Grid Grid.Column="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="412"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="{Binding Source=msdyusd_Office15, Converter={StaticResource CRMImageLoader}}" Stretch="Fill" ></ImageBrush>
</Grid.Background>
<USD:USDStackPanel Grid.Column="0" x:Name="CtiPanel" Orientation="Horizontal" Focusable="False" VerticalAlignment="Center" AutomationProperties.Name="Cti Panel"/>
<USD:USDStackPanel Grid.Column="1" HorizontalAlignment="Right" x:Name="AboutPanel" Orientation="Horizontal" Focusable="False" VerticalAlignment="Center" AutomationProperties.Name="AboutPanel"/>
</Grid>
    </Grid>
</Border>
    <Grid Grid.Row="1" VerticalAlignment="Stretch" Margin="0" Background="{DynamicResource WindowBackgroundStyle}">
      <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="auto" />
      </Grid.RowDefinitions>
      <USD:USDDeckTabPanel x:Name="SessionTabsPanel" Grid.Row="0" Margin="5,5,0,5" AutomationProperties.Name="Session Tabs Panel" Focusable="False" ClipToBounds="True" />
      <Grid x:Name="MainGrid" Grid.Row="1" AutomationProperties.Name="Main Panels">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Expander Grid.Column="0" Style="{DynamicResource StretchExpanderStyle}" ExpandDirection="Left" x:Name="ExpanderSessionDetails" IsExpanded="false" BorderBrush="White" >
          <Grid Style="{DynamicResource LeftPanelGrid}">
            <Grid.RowDefinitions>
              <RowDefinition Height="auto" />
              <RowDefinition Height="auto" />
              <RowDefinition Height="auto" Name="ChatPanelRow" />
              <RowDefinition Height="auto" />
              <RowDefinition Height="auto" />
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <USD:USDCollapsePanel x:Name="SessionExplorerPanel" AutomationProperties.Name="Session Explorer Panel" Grid.Row="0" Margin="1" />
            <USD:USDCollapsePanel x:Name="WorkflowPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="1" Margin="1" />
            <USD:USDCollapsePanel x:Name="ChatPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="2" Margin="1" />
            <USD:USDCollapsePanel x:Name="LeftPanel1" AutomationProperties.Name="Left Panel 1" Grid.Row="3" Margin="1" />
            <USD:USDCollapsePanel x:Name="LeftPanel2" AutomationProperties.Name="Left Panel 2" Grid.Row="4" Margin="1" />
            <USD:USDDeckTabPanel x:Name="LeftPanelFill" AutomationProperties.Name="Left Panel Fill" Grid.Row="5" Margin="1" />
          </Grid>
        </Expander>
        <Grid Grid.Column="1" Background="Transparent">
          <Grid.RowDefinitions>
            <RowDefinition Height="0" />
            <RowDefinition Height="*" />
          </Grid.RowDefinitions>
          <USD:USDCollapsePanel x:Name="RibbonPanel" Grid.Row="0" Visibility="Collapsed" AutomationProperties.Name="Ribbon Panel" Focusable="False" Margin="1" ClipToBounds="False" SnapsToDevicePixels="True" />
          <USD:USDTabPanel x:Name="MainPanel" Grid.Row="1" AutomationProperties.Name="Main Panel" />
        </Grid>
      </Grid>
    </Grid>
    <StatusBar Margin="0" Background="{DynamicResource WindowHeaderStyle}" Grid.Row="2" Height="auto" VerticalAlignment="Bottom">
      <StatusBarItem Background="{DynamicResource WindowHeaderStyle}" >
        <USD:USDStackPanel x:Name="StatusPanel" Orientation="Horizontal" AutomationProperties.Name="Status Panel" Margin="1" />
      </StatusBarItem>
    </StatusBar>
  </Grid>
</USD:PanelLayoutBase>

Ribbon Main Panel

For internal use only.

Horizontal Split

This is a special layout typically used within the MainPanel as a hosted control. It contains a splitter with a top panel and a bottom panel. It is typically used to display a list view at top and a detail view at the bottom similar to Outlook. Two panels are defined in this layout.

 

Panel Name Description

TopPanel

This is the panel that displays on top. It is defined as:

USDDeckTabPanel

BottomPanel

This is the panel that displays on bottom. It is defined as:

USDDeckTabPanel

This panel supports the following actions:

 

Action Description

SetTopPanelHeight

This action can be used to set the top panel height. It supports two parameters, height and type.

Type can be any of the following values:

  • Auto: sized to fix components inside

  • Pixel: the number of pixels

  • Star: takes the remaining space

The interpretation of the height parameter depends on this type value. For more information, see the Windows Presentation Foundation (WPF) (WPF) documentation.

SetBottomPanelHeight

This action can be used to set the bottom panel height. It supports two parameters, height and type.

Type can be any of the following values:

  • Auto: sized to fix components inside

  • Pixel: the number of pixels

  • Star: takes the remaining space

The interpretation of the height parameter depends on this type value. For more information, see the WPF documentation.

Vertical Split

This is a special layout that contains a vertical splitter with a left panel and a right panel.

 

Panel Name Description

LeftPanel

This is the panel that displays on left. It is defined as:

USDDeckTabPanel

RightPanel

This is the panel that displays on right. It is defined as:

USDDeckTabPanel

This panel supports the following actions:

 

Action Description

SetLeftPanelWidth

This action can be used to set the left panel width. It supports two parameters, width and type.

Type can be any of the following values:

  • Auto: sized to fix components inside

  • Pixel: the number of pixels

  • Star: takes the remaining space

The interpretation of the width parameter depends on this type value. For more information, see the WPF documentation.

SetRightPanelWidth

This action can be used to set the right panel width. It supports two parameters, width and type.

Type can be any of the following values:

  • Auto: sized to fix components inside

  • Pixel: the number of pixels

  • Star: takes the remaining space

The interpretation of the width parameter depends on this type value. See the WPF documentation for more details.

XAML

One of the quickest ways to create a custom layout. However, this option does not support code-behind. As a result, if you can’t describe your layout without code, you can’t use this option and should instead use the User Defined option. For more information, see Code-Behind and XAML in WPF.

Here is an example of a XAML layout.

 <Grid xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" xmlns: USD="clr-namespace:Dynamics.PanelLayouts;assembly=Dynamics">
  <Grid.RowDefinitions>
  <RowDefinition Height="*" x:Name="TopPanelRow" />
  <RowDefinition Height="auto" />
  <RowDefinition Height="*" x:Name="BottomPanelRow" />
  </Grid.RowDefinitions>
  < USD: USDDeckTabPanel Grid.Row="1" x:Name="TopPanel" Focusable="False" ClipToBounds="True" />
  <GridSplitter Height="5" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Stretch" ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" />
  <USD: USDDeckTabPanel Grid.Row="3" x:Name="BottomPanel" />
 </Grid>

For details about what panel types can be defined and used in this XAML, see Panel types in Unified Service Desk.

User Defined

This setting allows you to build a hosted control with code behind to gain the full features of .NET in handling your layout.

For details about what panel types can be defined and used in a user defined panel, see Panel types in Unified Service Desk.

For information about creating a custom panel layout, see Create a custom panel layout

See Also

Other Resources

Use custom panel types and panel layouts

Unified Service Desk
Send comments about this topic to Microsoft.
© 2015 Microsoft. All rights reserved.