Panneaux, types de panneau, et structures de panneau dans Unified Service Desk

Article
04/18/2017

Date de publication : novembre 2016

S’applique à : Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2013, Dynamics CRM 2015, Dynamics CRM 2016

Le Unified Service Desk for Microsoft Dynamics 365 utilise des panneaux pour afficher des contrôles hébergés de divers types. Différents types de panneaux prédéfinis sont disponibles dans le Unified Service Desk pour prendre en charge diverses options de disposition, comme la disposition à onglets, à plages et à piles. Vous définissez la disposition de ces panneaux dans l'écran principal du Unified Service Desk à l'aide d'un contrôle hébergé Mise en page du volet.Pour plus d'informations :Mise en page du volet (contrôle hébergé)

Contenu de la section

Les panneaux dans Unified Service Desk

Types de panneaux dans Unified Service Desk

Dispositions des panneaux dans Unified Service Desk

Les panneaux dans Unified Service Desk

Lorsque vous créez un contrôle hébergé, vous devez spécifier le panneau qui le contiendra dans le champ Afficher le groupe de la page Nouveau contrôle hébergé. Pour la plupart des types de contrôle hébergé, le Unified Service Desk remplit automatiquement la valeur de panneau dans le champ Afficher le groupe. Par exemple, MainPanel est utilisé pour un type de contrôle hébergé Page CRM et ToolbarPanel est utilisé pour le type de contrôle hébergé Conteneur de barre d'outils.

Les panneaux prédéfinis suivants sont disponibles dans le Unified Service Desk.

Panneau	Description
MainPanel	La zone de travail principale dans la partie inférieure droite.
ChatPanel	L'emplacement standard de la fenêtre de conversation. Il est sous le contrôle Génération de scripts de l'agent.
HiddenPanel	Un panneau invisible généralement utilisé pour le composant sans interface utilisateur (IU).
LeftPanel1	Un panneau sous le WorkflowPanel de gauche.
LeftPanel2	Un panneau sous le LeftPanel1 de gauche.
LeftPanelFill	Un panneau sous le LeftPanel2. Ce panneau se développe pour compléter le reste de la zone disponible dans la partie inférieure du panneau gauche.
RightPanel	Panneau situé du côté droit.
CtiPanel *	Un panneau situé dans la partie supérieure droite, c'est l'emplacement par défaut des contrôles de téléphone logiciel. Il s'agit d'un panneau d'empilement qui permet d'ajouter plusieurs contrôles, qui seront affichés côte à côte.
SessionExplorerPanel *	Un panneau situé sous les onglets de session, où vous affichez généralement les lignes de session.
WorkflowPanel *	Un panneau situé sous le SessionExplorerPanel et contenant généralement le contrôle Génération de scripts de l'agent.
ToolbarPanel *	Un panneau situé dans la partie supérieure, à droit du logo Unified Service Desk, et contenant généralement la barre d'outils.
RibbonPanel	Utilisation interne uniquement.
StatusPanel *	Un panneau spécial situé sur la barre statut en bas de l'application.

* Ces panneaux sont généralement réservés à des fins précises, leur utilisation doit donc être évitée, sauf si cela est requis.

Avec Unified Service Desk 2.2.1 ou une version ultérieure, vous pouvez également attribuer des raccourcis clavier aux panneaux afin que les agents du service clientèle puissent y accéder directement dans l'application cliente à l'aide du clavier.Pour plus d'informations :Raccourcis clavier pour les panneaux

Types de panneaux dans Unified Service Desk

Le Unified Service Desk fournit les types de panneaux prédéfinis suivants, pour prendre en charge diverses options de disposition :

Type de panneau	Description
USDTabPanel	Ce type de panneau contient un contrôle d'onglet. Chaque contrôle hébergé est chargé sur l'un des onglets. Le nom de l'onglet affiche la valeur spécifiée dans le champ Nom complet d'un contrôle hébergé. Si aucun nom complet n'est spécifié pour un contrôle hébergé, le nom du contrôle hébergé est affiché comme le nom de l'onglet. Le contrôle d'onglet/l'en-tête s'affiche pour ce type de panneau si un ou plusieurs contrôles hébergés s'y trouvent.
USDStackPanel	Contrôles hébergés par piles de ce type de affichage d'une mode horizontale ou verticale similaire à un panneau de la pile dans Windows Presentation Foundation (WPF). Ils peuvent être utiles pour les barres d'outils ou les barres d'état, etc. Ce type de volet provient de StackPanel, qui prend en charge une propriété Orientation. Cette orientation doit être définie dans le XAML pour définir la manière dont les contrôles hébergés doivent être empilés.
USDDeckTabPanel	Si un seul contrôle hébergé se trouve sur le panneau, les onglets ne sont pas affichés. Les onglets d'un contrôle d'onglet sont affichés si deux contrôles ou plus se trouvent sur le panneau. Notes Ce contrôle est identique à USDTabPanel mais un style dans les thèmes par défaut masque les onglets en haut lorsqu'un seul contrôle est chargé.
USDCollapsePanel	Il est similaire au USDTabPanel, mais un style défini dans les thèmes par défaut réduit automatiquement ce type de panneau de sorte qu'il n'occupe plus l'espace de l'interface utilisateur, si aucun contrôle hébergé n'est chargé dans celui-ci.
USDFloatingPanel	Le bureau par défaut comprend une instance de ce type de panneau. Lorsque « FloatingPanel » est spécifié pour un contrôle hébergé, ce type de affichage est utilisé. Généralement, vous ne spécifierez pas ce type de panneau dans votre disposition personnalisée, toutefois, il est indiqué au cas où vous pourriez en avoir besoin.
USDFloatingToolPanel	Ce type de panneau crée une fenêtre d'outils pour chaque contrôle hébergé chargé dans celui-ci. Le bureau par défaut comprend une instance de ce type de panneau. Lorsque « FloatingToolPanel » est spécifié pour un contrôle hébergé, ce type de affichage est utilisé. Généralement, vous ne spécifierez pas ce type de panneau dans votre disposition personnalisée, toutefois, il est indiqué au cas où vous pourriez en avoir besoin.
USDPopUpPanel	Ce type de panneau permet au contenu du contrôle hébergé de pointer sur la vue principale.

Vous pouvez également utiliser ces types de panneaux prédéfinis pour créer un type de panneau personnalisé dans le Unified Service Desk.Pour plus d'informations :Créer un type de panneau personnalisé

Dispositions des panneaux dans Unified Service Desk

Utilisez une disposition de panneau pour définir la disposition des panneaux à l'écran dans le client Unified Service Desk. Une disposition de panneau est définie à l'aide d'un contrôle hébergé Mise en page du volet.Pour plus d'informations :Mise en page du volet (contrôle hébergé)

La disposition suivante représente le type de disposition de panneau Volet principal standard (également appelée disposition de panneau standard) dans Unified Service Desk.

Thème Air dans Unified Service Desk

Notes

Si vous ne créez pas de disposition de panneau dans votre configuration Unified Service Desk, la disposition de panneau standard est utilisée pour afficher automatiquement les panneaux et les contrôles dans l'application cliente.

Toute la zone d'application dans la fenêtre principale est définie comme un panneau proprement dit, et est appelée MainWorkArea. Lors de la définition du type de disposition de panneau XAML ou User-Defined, MainWorkArea est utilisé comme valeur de panneau pour le champ Afficher le groupe.

Les dispositions de panneau étant des contrôles hébergés, vous pouvez utiliser une disposition de panneau partout où vous voulez configurer un contrôle hébergé. Généralement, on définit une vue fractionnée dans la zone du panneau principal. Vous pouvez afficher une liste des comptes en haut, et une vue spécifique en bas. Vous pouvez afficher l'intégralité de la disposition du panneau dans le panneau flottant, et l'afficher sur un deuxième écran. Pour plus d'informations sur l'utilisation des panneaux flottants, voir Configurer la fonction d'ouverture des articles de la base de connaissances dans la fenêtre actuelle ou une nouvelle fenêtre

Unified Service Desk propose les types suivants de dispositions de panneau :

Disposition du panneau

Description

Volet principal standard

La disposition de panneau standard fournit la disposition traditionnelle, avec une série de panneaux sur la gauche, une zone pouvant être réduite, et une zone de travail principale sur la droite. Ci-dessous est indiqué le XAML utilisé pour définir la disposition des panneaux. Vous trouverez également ce XAML dans le Kit de développement logiciel (SDK) de User Interface Integration (UII).Téléchargez le package et extrayez-le pour afficher le fichier SamplePanelLayout.xaml disponible sous le répertoire « UII\USD Developer Assets\USD Layout and Style Sheet ».

        <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>

Volet principal du ruban

Utilisation interne uniquement.

Fractionnement horizontal

Il s'agit d'une disposition spéciale, généralement utilisé dans le MainPanel comme contrôle hébergé. Elle contient un séparation entre un panneau supérieur et un panneau inférieur. Elle est généralement utilisée pour afficher une liste en haut et une vue détaillée en bas, comme dans Outlook. Deux panneaux sont définis dans cette disposition.

Nom du panneau

Description

TopPanel

Il s'agit du panneau qui s'affiche dans la partie supérieure. Il est défini comme :

USDDeckTabPanel

BottomPanel

Il s'agit du panneau qui s'affiche dans la partie inférieure. Il est défini comme :

USDDeckTabPanel

Ce panneau prend en charge les actions suivantes :

Pour

Description

SetTopPanelHeight

Cette action permet de définir la hauteur du panneau supérieur. Il prend en charge deux paramètres, la hauteur et le type.

Le type peut être l'une des valeurs suivantes :

Auto : la taille dépend des composants fixes situés à l'intérieur
Pixel : le nombre de pixels
Étoile : prend l'espace restant

L'interprétation du paramètre de hauteur dépend de cette valeur de type. Pour plus d’informations, voir la Windows Presentation Foundation (WPF)documentation.

SetBottomPanelHeight

Cette action permet de définir la hauteur du panneau inférieur. Il prend en charge deux paramètres, la hauteur et le type.

Le type peut être l'une des valeurs suivantes :

Auto : la taille dépend des composants fixes situés à l'intérieur
Pixel : le nombre de pixels
Étoile : prend l'espace restant

L'interprétation du paramètre de hauteur dépend de cette valeur de type. Pour plus d’informations, voir la documentation de WPF.

Fractionnement vertical

Il s'agit d'une disposition spéciale contenant une séparation verticale avec un panneau gauche et un panneau droit.

Nom du panneau

Description

LeftPanel

Il s'agit du panneau qui s'affiche dans la partie gauche. Il est défini comme :

USDDeckTabPanel

RightPanel

Il s'agit du panneau qui s'affiche dans la partie droite. Il est défini comme :

USDDeckTabPanel

Ce panneau prend en charge les actions suivantes :

Pour

Description

SetLeftPanelWidth

Cette action permet de définir la largeur du panneau gauche. Il prend en charge deux paramètres, la largeur et le type.

Le type peut être l'une des valeurs suivantes :

Auto : la taille dépend des composants fixes situés à l'intérieur
Pixel : le nombre de pixels
Étoile : prend l'espace restant

L'interprétation du paramètre de largeur dépend de cette valeur de type. Pour plus d’informations, voir la documentation de WPF.

SetRightPanelWidth

Cette action permet de définir la largeur du panneau droit. Il prend en charge deux paramètres, la largeur et le type.

Le type peut être l'une des valeurs suivantes :

Auto : la taille dépend des composants fixes situés à l'intérieur
Pixel : le nombre de pixels
Étoile : prend l'espace restant

L'interprétation du paramètre de largeur dépend de cette valeur de type. Pour plus d’informations, voir la documentation de WPF.

XAML

L'une des méthodes les plus rapides de créer une disposition personnalisée. Toutefois, cette option ne prend pas en charge le code d'arrière-plan. Par conséquent, si vous ne pouvez pas décrire votre disposition sans code, vous ne pouvez pas utiliser cette option, et vous devez utiliser l'option Défini par l'utilisateur. Pour plus d'informations, voir Code d'arrière-plan et XAML dans WPF.

Voici un exemple d'une disposition 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>

Pour plus d'informations sur les types de panneaux pouvant être définis et utilisés dans ce XAML, voir Types de panneaux dans Unified Service Desk.

Défini par l'utilisateur

Ce paramètre permet de créer un contrôle hébergé avec un code d'arrière-plan pour bénéficier de toutes les fonctionnalités de .NET lors de la gestion de votre disposition.

Pour plus d'informations sur les types de panneaux pouvant être définis et utilisés dans un panneau défini par l'utilisateur, voir Types de panneaux dans Unified Service Desk.

Pour plus d’informations sur la création d’une disposition de panneau personnalisée, consultez Créer une disposition de panneau personnalisée.

Voir aussi

Utiliser les types de panneau et les dispositions de panneau personnalisés dans Unified Service Desk
Raccourcis clavier pour les panneaux

Unified Service Desk 2.0

Partager via

Panneaux, types de panneau, et structures de panneau dans Unified Service Desk

Contenu de la section

Les panneaux dans Unified Service Desk

Types de panneaux dans Unified Service Desk

Dispositions des panneaux dans Unified Service Desk

Voir aussi

Ressources supplémentaires