Unified Service Desk でのパネル、パネルの種類、およびパネルのレイアウト
この記事の内容
公開日: 2016年11月
対象: Dynamics 365 (online)、Dynamics 365 (on-premises)、Dynamics CRM 2013、Dynamics CRM 2015、Dynamics CRM 2016
Unified Service Desk for Microsoft Dynamics 365は、パネルを使って、さまざまな種類のホストされたコントロールを表示します。Unified Service Deskでは、さまざまな種類のあらかじめ定義されたパネルが使用可能で、タブ付きのレイアウト、デッキのレイアウト、スタック レイアウトなど、さまざまなレイアウト オプションがサポートされています。Unified Service Deskのメイン画面のこれらのパネルの配置を定義するには、パネル レイアウト というホストされたコントロールを使用します。詳細:パネルのレイアウト (ホストされたコントロール)
このセクションの内容
Unified Service Deskのパネル
Unified Service Deskのパネル タイプ
Unified Service Deskのパネル レイアウト
Unified Service Deskのパネル
ホストされたコントロールを作成する場合は、新しいホストされたコントロール ページの表示グループ フィールドで、それを保持するパネルを指定する必要があります。 ほとんどのホストされたコントロールの種類の場合は、Unified Service Deskが表示グループ フィールドにパネルの値を自動的に設定します。 たとえば、[CRM ページ ] という種類のホストされたコントロールに対しては、[MainPanel ] が使用されます。[ツールバー コンテナー ] という種類のホストされたコントロールに対しては、[ToolbarPanel ] が使用されます。
Unified Service Deskでは、次の定義済みのパネルが使用できます。
MainPanel
メイン作業領域は右下です。
ChatPanel
チャット ウィンドウの一般的な場所です。 エージェントのスクリプト コントロールの下です。
HiddenPanel
一般に、ユーザー インターフェイス (UI) のないコンポーネントに使用される、非表示のパネルです。
LeftPanel1
左側にある、WorkflowPanel のすぐ下のパネルです。
LeftPanel2
左側にある、LeftPanel1 のすぐ下のパネルです。
LeftPanelFill
LeftPanel2 のすぐ下のパネルです。 このパネルは、左側のパネルの下端に使用可能な領域の残りの部分を埋めます。
RightPanel
右側にあるパネル。
CtiPanel *
右上に配置されたパネルです。Softphone コントロールの既定の場所です。 これはスタック パネルです。このため、1 つ以上のコントロールを追加して、並べて表示できます。
SessionExplorerPanel *
通常セッション行を表示する、セッションのタブのすぐ下に配置されるパネルです。
WorkflowPanel *
SessionExplorerPanel のすぐ下に配置されたパネルです。通常、エージェントのスクリプト コントロールが含まれます。
ToolbarPanel *
一番上、Unified Service Deskロゴのすぐ右側にあるパネルです。通常、ツールバーを保持します。
RibbonPanel
内部のみで使用
StatusPanel *
アプリケーションの下部に位置するステータス バーにある特殊なパネルです。
* 通常、これらのパネルは特別な目的のために使用されるため、必要がない限り、これらのパネルの使用を避ける必要があります。
Unified Service Desk 2.2.1 以降では、パネルにキーボード ショートカットを割り当てて、顧客サービス エージェントがキーボードだけでクライアント アプリケーションのパネルに直接アクセスできるようにすることもできます。詳細:パネルのキーボード ショートカット
Unified Service Deskのパネル タイプ
さまざまなレイアウト オプションをサポートするために、Unified Service Deskは、次の定義済みのパネルの種類を提供します。
USDTabPanel
このパネルの種類には、タブ コントロールが含まれます。 各ホストされたコントロールは、タブのいずれかに読み込まれます。 タブ名には、ホストされたコントロールの表示名 フィールドで指定された値が表示されます。 ホストされたコントロールに表示名を指定しない場合は、ホストされたコントロールの名前がタブ名として表示されます。 ホストされたコントロールが 1 つ以上ある場合、このパネルの種類にはタブ コントロール/ヘッダーが表示されます。
USDStackPanel
このパネルの種類は、ホストされたコントロールを水平方向または垂直方向にスタックします。Windows Presentation Foundation (WPF) のスタック パネルに似ています。 これらは、ツールバーやステータス バーなどに便利です。 このパネルの種類は、方向 プロパティをサポートする StackPanel から派生します。 ホストされたコントロールをどのように積み上げるかを定義するため、この方向を XAML で定義する必要があります。
USDDeckTabPanel
パネルに、ホストされたコントロールが 1 つだけある場合、タブは表示されません。 このパネルに 2 つ以上コントロールがある場合は、タブ コントロールのタブが表示されます。
注意
このコントロールは、USDTabPanel と同様ですが、既定のテーマにスタイルが存在し、コントロールが 1 つだけ読み込まれる場合は、上部にあるタブが非表示になります。
USDCollapsePanel
これは、USDTabPanel と同様ですが、既定のテーマのスタイルが定義されており、ホストされたコントロールが読み込まれていない場合は、UI 内の領域を占めないよう、自動的にこのパネルの種類は折りたたまれます。
USDFloatingPanel
既定のデスクトップには、このパネルの種類のインスタンスがあります。 ホストされたコントロールに「FloatingPanel」が指定されている場合、このパネルの種類が使用されています。 一般に、ユーザー設定のレイアウトにこのパネルの種類を指定することはありません。ただし、それを使用する理由がある場合のために表示されます。
USDFloatingToolPanel
このパネルの種類は、読み込まれている各ホストされたコントロールに対し、ツール ウィンドウを作成します。 既定のデスクトップには、このパネルの種類のインスタンスがあります。 ホストされたコントロールに「FloatingToolPanel」が指定されている場合、このパネルの種類が使用されています。 一般に、ユーザー設定のレイアウトにこのパネルの種類を指定することはありません。ただし、それを使用する理由がある場合のために表示されます。
USDPopUpPanel
このパネル タイプにより、ホストされたコントロールのコンテンツがメイン ビューにポップアップで表示されます。
これらのあらかじめ定義されたパネルの種類を使用して、Unified Service Deskでユーザー設定のパネルの種類を作成することもできます。詳細:カスタム パネルの種類の作成
Unified Service Deskのパネル レイアウト
パネル レイアウトを使用して、Unified Service Desk クライアントのスクリーンのパネル配置を定義します。 パネルのレイアウトは、[パネル レイアウト ] というホストされたコントロールを使用して定義します。詳細:パネルのレイアウト (ホストされたコントロール)
次のレイアウトは Unified Service Desk のパネル レイアウトの [標準メイン パネル ] (標準パネル レイアウトとも呼ばれる) の種類を示します。
注意
Unified Service Desk 構成でパネル レイアウトを作成しない場合、標準パネル レイアウトが、クライアント アプリケーションにパネルとコントロールを表示するために自動的に使用されます。
メイン ウィンドウのフル アプリケーション領域がパネル自身として定義され、MainWorkArea と呼ばれます。XAML または User-Defined 種類のパネル レイアウトを定義する場合は、MainWorkArea が [表示グループ ] フィールド用のパネル値として使用されます。
パネルのレイアウトは、ホストされたコントロールであるため、ホストされたコントロールを構成した場所のうち任意の場所にパネルのレイアウトを使用することができます。 一般的な使用方法の 1 つは、メイン パネル領域に分割ビューを定義することです。 アカウントの一覧を表示するリスト ビューを上部に、および詳細ビューを下部に表示することもできます。 フローティング パネル内にパネルのレイアウト全体を表示し、2 番目のモニターで表示することができます。 フローティング ウィンドウの使用の詳細については、「サポート情報記事にのポップインとポップアウト表示機能を構成する 」を参照してください。
Unified Service Desk は、次のパネル レイアウトの種類を提供します。
パネル レイアウト
内容
標準メイン パネル
標準パネル レイアウトは、左側に一連のパネル、右側に折りたたみ可能な領域とメインの作業領域を含む、従来のレイアウトを提供します。 以下は、パネル レイアウトの定義に使用された XAMLです。User Interface Integration (UII) SDK で、この XAML を見つけることもできます。Download パッケージで、"UII\USD Developer Assets\USD Layout and Style Sheet"ディレクトリの下にある SamplePanelLayout.xaml ファイル"を表示するためにそれを抽出します。
<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" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</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 Style="{DynamicResource USDLogo}"
Grid.Column="0"
ToolTip="Unified Service Desk"
AutomationProperties.Name="Unified Service Desk" />
<Rectangle Width="10"
Grid.Column="1" />
<USD:USDDeckTabPanel x:Name="ToolbarPanel"
Grid.Column="2"
AutomationProperties.Name="Toolbar Panel"
VerticalAlignment="Center"
Focusable="True"
Margin="0"
USD:PanelNavigation.KeyboardShortcut="CTRL+1"/>
<Grid Grid.Column="3"
Background="{DynamicResource AboutPanelStandardBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="412"/>
</Grid.ColumnDefinitions>
<USD:USDStackPanel Grid.Column="0"
x:Name="CtiPanel"
Orientation="Horizontal"
Focusable="True"
VerticalAlignment="Center"
AutomationProperties.Name="Cti Panel"/>
<USD:USDStackPanel Grid.Column="1"
HorizontalAlignment="Right"
x:Name="AboutPanel"
Orientation="Horizontal"
Focusable="True"
VerticalAlignment="Center"
AutomationProperties.Name="AboutPanel"
USD:PanelNavigation.KeyboardShortcut="CTRL+2"/>
</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="True"
ClipToBounds="True"
USD:PanelNavigation.KeyboardShortcut="CTRL+3"/>
<Grid x:Name="MainGrid"
Grid.Row="1"
AutomationProperties.Name="Main Panels">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Expander Grid.Column="0"
Style="{DynamicResource StretchExpanderStyle}"
ExpandDirection="Left"
x:Name="ExpanderSessionDetails"
IsExpanded="false"
BorderBrush="White" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Grid Style="{DynamicResource LeftPanelGrid}"
Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto"
Name="ChatPanelRow" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions >
<USD:USDCollapsePanel x:Name="SessionExplorerPanel"
AutomationProperties.Name="Session Explorer Panel"
Grid.Row="0"
Margin="1"
USD:PanelNavigation.KeyboardShortcut="CTRL+4"/>
<USD:USDCollapsePanel x:Name="WorkflowPanel"
AutomationProperties.Name="Workflow Panel"
Grid.Row="1"
Margin="1"
USD:PanelNavigation.KeyboardShortcut="CTRL+5"/>
<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:USDTabPanel x:Name="LeftPanelFill"
AutomationProperties.Name="Left Panel Fill"
Grid.Row="5"
Margin="1"
MinHeight="300"
USD:PanelNavigation.KeyboardShortcut="CTRL+6"/>
</Grid>
</ScrollViewer>
</Expander>
<Grid Grid.Column="1"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="79*" />
<RowDefinition Height="125*"/>
</Grid.RowDefinitions>
<USD:USDCollapsePanel x:Name="RibbonPanel"
Grid.Row="0"
Visibility="Collapsed"
AutomationProperties.Name="Ribbon Panel"
Focusable="True"
Margin="1"
ClipToBounds="False"
SnapsToDevicePixels="True"/>
<USD:USDTabPanel x:Name="MainPanel"
Grid.Row="1"
AutomationProperties.Name="Main Panel"
Grid.RowSpan="2"
USD:PanelNavigation.KeyboardShortcut="CTRL+7"/>
</Grid>
<Expander Grid.Column="2"
Style="{DynamicResource StretchExpanderStyle}"
ExpandDirection="Right"
x:Name="RightPanelExpander"
IsExpanded="false"
BorderBrush="White" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Grid Style="{DynamicResource LeftPanelGrid}" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions >
<USD:USDTabPanel x:Name="RightPanel"
AutomationProperties.Name="Right Panel"
Grid.Row="0"
USD:PanelNavigation.KeyboardShortcut="CTRL+8"/>
<USD:USDPopupPanel x:Name="RightPopupPanel"
Height="{Binding ActualHeight, ElementName=RightPanel, Mode=OneWay}"
Width="{Binding ActualWidth, ElementName=RightPanel, Mode=OneWay}"
Placement="Left"
PlacementTarget="{Binding ElementName=RightPanel}"
PopupAnimation="Scroll"
USD:PanelNavigation.KeyboardShortcut="CTRL+9">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Background="#cccccc"
Grid.Row="0" >
<TextBlock Text="Article Preview"
HorizontalAlignment="Center"
Margin="10,0,0,0" />
</Border>
<Border BorderThickness="1"
Grid.Row="1"
BorderBrush="#cccccc"
Background="White">
<ContentControl Margin="0,0,0,0"
Name="PopupContainer"
Style="{DynamicResource USDContentControlStyle}"/>
</Border>
</Grid>
</USD:USDPopupPanel>
</Grid>
</ScrollViewer>
</Expander>
</Grid>
</Grid>
<StatusBar Grid.Row="2"
Style="{DynamicResource StatusBarStyle}">
<StatusBarItem>
<TextBlock x:Name="lblStatusBarClock"
Text="00:00 AM/PM"
Style="{DynamicResource StatusBarClockLabelStyle}"/>
</StatusBarItem>
<Separator Style="{DynamicResource StatusBarSeparatorStyle}"/>
<StatusBarItem >
<USD:USDStackPanel x:Name="StatusPanel"
Orientation="Horizontal"
AutomationProperties.Name="Status Panel"
Margin="1"/>
</StatusBarItem>
</StatusBar>
</Grid>
</USD:PanelLayoutBase>
リボン メイン パネル
内部のみで使用。
上下分割
これは特殊なレイアウトで、通常、MainPanel内でホストされたコントロールとして使用されます。 これには分割線、および上部パネルと下部パネルがあります。 通常、Outlook のように、上部にリスト ビューを、下部に詳細ビューを表示するのに使用されます。 2 つのパネルは、このレイアウトで定義されます。
パネル名
内容
TopPanel
これは、上に表示されるパネルです。 次のように定義されます。
USDDeckTabPanel
BottomPanel
これは、下に表示されるパネルです。 次のように定義されます。
USDDeckTabPanel
このパネルでは、以下のアクションがサポートされています。
アクション
内容
SetTopPanelHeight
このアクションは、上のパネルの高さを設定するのに使用します。 2 つのパラメーター、高さ、および種類をサポートします。
種類は、次の値のうち任意のものを指定できます。
高さのパラメーターの解釈は、この種類の値に依存します。 詳細については、「Windows Presentation Foundation (WPF)ドキュメント 」を参照してください。
SetBottomPanelHeight
このアクションは、下のパネルの高さを設定するのに使用します。 2 つのパラメーター、高さ、および種類をサポートします。
種類は、次の値のうち任意のものを指定できます。
高さのパラメーターの解釈は、この種類の値に依存します。 詳細については、WPF のドキュメント を参照してください。
左右分割
これは特殊なレイアウトで、垂直の分割線、および左パネルと右パネルが含まれます。
パネル名
内容
LeftPanel
これは、左に表示されるパネルです。 次のように定義されます。
USDDeckTabPanel
RightPanel
これは、右に表示されるパネルです。 次のように定義されます。
USDDeckTabPanel
このパネルでは、以下のアクションがサポートされています。
アクション
内容
SetLeftPanelWidth
このアクションは、左のパネルの幅を設定するのに使用します。 2 つのパラメーター、幅、および種類をサポートします。
種類は、次の値のうち任意のものを指定できます。
幅のパラメーターの解釈は、この種類の値に依存します。 詳細については、WPF のドキュメント を参照してください。
SetRightPanelWidth
このアクションは、右のパネルの幅を設定するのに使用します。 2 つのパラメーター、幅、および種類をサポートします。
種類は、次の値のうち任意のものを指定できます。
幅のパラメーターの解釈は、この種類の値に依存します。 詳細については、WPF のドキュメントを参照してください。
XAML
ユーザー設定のレイアウトを作成する最も簡単な方法の 1 つです。 ただし、このオプションは分離コードをサポートしません。 結果として、コードを使用せずにレイアウトを記述することができない場合は、このオプションは使用できません。その代わりに、[ユーザー定義] のオプションを使用する必要があります。 詳細については、「WPF での分離コードと XAML 」を参照してください。
ここに、XAMLレイアウトの例を示します。
<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>
この XAML で定義および使用が可能なパネルの種類の詳細については、「Unified Service Deskのパネル タイプ 」を参照してください。
ユーザー定義
この設定では、分離コード を使用してホストされたコントロールを作成し、レイアウトの処理に、.NET のフル機能を取得することができます。
ユーザー定義のパネルで定義および使用が可能なパネルの種類の詳細については、「Unified Service Deskのパネル タイプ 」を参照してください。
カスタム パネル レイアウトの作成方法については、「カスタム パネル レイアウトの作成 」を参照してください。
関連項目
Unified Service Desk でカスタム パネルの種類、およびパネルのレイアウトを使用する パネルのキーボード ショートカット
Unified Service Desk 2.0
© 2017 Microsoft. All rights reserved. 著作権
.jpeg "Unified Service Desk の空気のテーマ")