Unified Service Desk でのパネル、パネルの種類、およびパネルのレイアウト
Dynamics 365 用 Unified Service Desk は、パネルを使って、さまざまな種類のホストされたコントロールを表示します。 Unified Service Desk では、さまざまな種類のあらかじめ定義されたパネルが使用可能で、タブ付きのレイアウト、デッキのレイアウト、スタック レイアウトなど、さまざまなレイアウト オプションがサポートされています。 Unified Service Desk のメイン画面のこれらのパネルの配置を定義するには、パネル レイアウトというホストされたコントロールを使用します。 詳細: パネルのレイアウト (ホストされたコントロール)
Unified Service Desk のパネル
ホストされたコントロールを作成する場合は、新しいホストされたコントロールページの表示グループフィールドで、それを保持するパネルを指定する必要があります。 ほとんどのホストされたコントロールの種類の場合は、Unified Service Desk が表示グループ フィールドにパネルの値を自動的に設定します。 たとえば、CRM ページという種類のホストされたコントロールに対しては、MainPanel が使用されます。ツールバー コンテナーという種類のホストされたコントロールに対しては、ToolbarPanel が使用されます。
Unified Service Desk では、次の定義済みのパネルが使用できます。
| パネル | 説明設定 |
|---|---|
| MainPanel | メイン作業領域は右下です。 |
| AboutPanel | 右上のエリア。 このパネルには、設定、デバッグ、バージョン情報、その他の設定済みオプションが表示されます。 |
| 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 のパネル タイプ
さまざまなレイアウト オプションをサポートするために、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 です。 この XAML は、User Interface Integration (UII) SDK にもあります。
パッケージをダウンロードしそれを抽出して、"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>
ユーザー定義 この設定では、分離コード を使用してホストされたコントロールを作成し、レイアウトの処理に、.NET のフル機能を取得することができます。
ユーザー定義のパネルで定義および使用が可能なパネルの種類の詳細については、「パネルの種類」を参照してください。
カスタム パネル レイアウトの作成方法については、「カスタム パネル レイアウトの作成」を参照してください。
関連項目
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示