Créer une disposition de panneau personnalisée

 

Date de publication : novembre 2016

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

Les dispositions de panneau d'Unified Service Desk sont des contrôles hébergés, qui offrent la possibilité de charger toutes sortes de dispositions dans le système.Unified Service Desk fournit des dispositions de panneau prédéfinies à utiliser dans votre application agent. Pour plus d'informations, voir Dispositions des panneaux dans Unified Service Desk.

Unified Service Desk vous permet également de créer des dispositions de panneau définies par l'utilisateur ou personnalisées, où vous agencez les types de panneau d'Unified Service Desk selon vos besoins, et d'améliorer l'expérience avec l'utilisation de code XAML en arrière-plan.Microsoft Dynamics 365 fournit un modèle de projet Visual Studio pour créer des dispositions de panneau définies par l'utilisateur avec la prise en charge de code en arrière plan.

Cette rubrique explique comment créer une disposition de panneau où vous réorganisez les panneaux pour afficher les informations de session, les scripts d’agent, le gestionnaire des notes et les incidents associés sur le côté droit du bureau au lieu du côté gauche. En outre, le volet qui affiche toutes ces informations s’affiche automatiquement lorsqu’une session est démarrée dans le Unified Service Desk, et disparaît automatiquement lorsque la session est fermée sans que vous ayez besoin de le développer et de le réduire manuellement.

Contenu de la rubrique

Conditions préalables

Créer une disposition de panneau personnalisée

Tester votre disposition de panneau personnalisée

Conditions préalables

• Microsoft .NET Framework 4.5.2

• Application cliente Unified Service Desk ; l’application cliente est nécessaire pour tester le contrôle hébergé de la disposition de panneau personnalisée en se connectant à l’aide de l’application agent.

• Microsoft Visual Studio 2012, Visual Studio 2013 ou Visual Studio 2015

• Gestionnaire de package NuGet pour Visual Studio 2012, Visual Studio 2013 ou Visual Studio 2015

• Modèles SDK de Microsoft Dynamics 365 pour Visual Studio contenant le modèle de projet de disposition de panneau personnalisée. Vous pouvez l’obtenir de l’une des méthodes suivantes :

  • Téléchargez le modèle de Kit de développement logiciel (SDK) de CRM depuis la galerie Visual Studio. Double-cliquez sur le fichier CRMSDKTemplates.vsix pour installer le modèle dans Visual Studio.

  • Téléchargez et installez le Kit de développement logiciel (SDK) de CRM. Le fichier de modèle, CRMSDKTemplates.vsix, est situé dans le dossier SDK\Templates. Double-cliquez sur le fichier pour installer le modèle dans Visual Studio.

Créer une disposition de panneau personnalisée

1. Démarrez Visual Studio et créez un projet.

2. Dans la boîte de dialogue Nouveau projet :

   1. Dans la liste des modèles installés, développez Visual C#, puis sélectionnez Modèles Dynamics 365 SDK > Unified Service Desk > Disposition de panneau personnalisée USD.

   2. Vérifiez que .NET Framework 4.5.2 est sélectionné.

   3. Spécifiez le nom et l’emplacement du projet, puis cliquez sur OK.

   

3. Dans l’Explorateur de solutions, double-cliquez sur le fichier CustomLayout.xaml pour afficher le concepteur XAML. Le concepteur XAML affiche la disposition de panneau par défaut dans le Unified Service Desk.

4. Remplacez le code XAML du fichier CustomLayout.xaml par le code fourni dans l’exemple suivant. Pour ce faire, sélectionnez l’intégralité du code (CTRL+A) dans la zone XAML (comme indiqué dans l’illustration), supprimez-le, puis collez le code XAML fourni au même endroit. Cette opération permet de modifier l’emplacement du volet de développeur de gauche à droite.

   

   <USD:PanelLayoutBase           
           x:Class="MyUSDCustomPanelLayout.CustomLayout"
           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="500" d:DesignWidth="500">
       <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" SelectedAppChanged="SelectedAppChangedHander"/>
                       <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="*" />
                       <ColumnDefinition Width="auto"/>
                   </Grid.ColumnDefinitions>
                   <Expander Grid.Column="1" Style="{DynamicResource StretchExpanderStyle}"  ExpandDirection="Right" x:Name="RightExpander" IsExpanded="false" BorderBrush="White" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed" >
                       <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" SelectedAppChanged="SelectedAppChangedHander" />
                           <USD:USDCollapsePanel x:Name="WorkflowPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="1" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
                           <USD:USDCollapsePanel x:Name="ChatPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="2" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                           <USD:USDCollapsePanel x:Name="LeftPanel1" AutomationProperties.Name="Left Panel 1" Grid.Row="3" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                           <USD:USDCollapsePanel x:Name="LeftPanel2" AutomationProperties.Name="Left Panel 2" Grid.Row="4" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                           <USD:USDDeckTabPanel x:Name="LeftPanelFill" AutomationProperties.Name="Left Panel Fill" Grid.Row="5" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                       </Grid>
                   </Expander>
                   <Grid Grid.Column="0" 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" SelectedAppChanged="SelectedAppChangedHander"/>
                   </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" SelectedAppChanged="SelectedAppChangedHander" />
               </StatusBarItem>
           </StatusBar>
       </Grid>
   </USD:PanelLayoutBase>
   

5. Vous pouvez également définir un raccourci clavier pour accéder à un panneau de votre disposition de panneau personnalisée.Pour plus d'informations :Raccourcis clavier pour les panneaux

6. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le fichier CustomLayout.xaml, puis cliquez sur Afficher le code pour ajouter le code derrière le code XAML. Cela ouvre le fichier CustomLayout.xaml.cs.

7. Mettez à jour la définition de méthode NotifyContextChange en ajoutant le code suivant.

   if (context.Count != 0)
   {
      RightExpander.IsExpanded = true;
   }
   else
   { 
      RightExpander.IsExpanded = false;
   }
   

   Le code vérifie si des sessions sont actives dans le Unified Service Desk, puis affiche (développe) ou masque (réduit) automatiquement le volet de développeur.

   Il s’agit de la définition de méthode NotifyContextChange mise à jour.

   

8. Enregistrez votre projet, puis générez-le (Générer > Générer la solution) > pour savoir s'il se génère correctement.

   Notes

   Notez le nom de la classe utilisée pour générer votre disposition de panneau personnalisée dans le fichier CustomLayout.xaml.cs. Dans ce cas, il s’agit de CustomLayout. Vous aurez besoin de ces informations dans l’étape suivante.

Tester votre disposition de panneau personnalisée

Lorsque votre projet se génère correctement, testez la disposition de panneau personnalisée. Le test comprend deux parties : définir le contrôle hébergé de la disposition de panneau personnalisée sur le serveur, puis se connecter au Unified Service Desk sur le serveur qui utilise votre application cliente avec l’assembly de code personnalisé dans le répertoire client.

Définir le contrôle hébergé de la disposition de panneau personnalisée sur le serveur

1. Connectez-vous à Microsoft Dynamics 365.

2. Sur la barre de navigation, choisissez Microsoft Dynamics 365, puis sélectionnez Paramètres.

3. Choisissez Paramètres > Unified Service Desk > Contrôles hébergés.

4. Choisissez NOUVEAU, puis spécifiez les valeurs dans l’écran Nouveau contrôle hébergé, comme indiqué ci-dessous.

   

   Notes

   URI d'assembly est le nom de votre assembly et Type d'assembly est le nom de votre fichier d'assembly (dll) suivi d'un point (.), puis du nom de la classe dans votre projet Visual Studio. Dans cet exemple, le nom de l'assembly est MyUSDCustomPanelLayout et le nom de la classe est CustomLayout, qui est le nom de classe par défaut lorsque vous créez une disposition de panneau personnalisée.

5. Enregistré le contrôle hébergé.

Exécuter le client Unified Service Desk pour utiliser la disposition de panneau personnalisée

1. Copiez le fichier d’assembly (dll) contenant la définition de votre contrôle hébergé personnalisé depuis le dossier de débogage du projet Visual Studio vers le répertoire d’applications du Unified Service Desk, qui est par défaut c:\Program Files\Microsoft Dynamics CRM USD\USD.

2. Exécutez le client Unified Service Desk pour vous connecter à votre serveur Dynamics 365.

3. Une fois connecté, vous verrez la disposition de panneau personnalisée sans le volet de développeur sur le côté gauche. Le volet de développeur se trouve désormais sur le côté droit.

   

4. Choisissez Rechercher dans la barre d’outils, puis sélectionnez un enregistrement à afficher dans une session. Dans ce cas, choisissez Contacts dans la fenêtre Rechercher, puis Maria Campbell (exemple). Le volet droit s’affiche automatiquement pour afficher les données de session associées, les scripts d’agent et d’autres informations sur l’enregistrement de contact actuel.

   

5. Fermez la session en cliquant sur l’onglet de la session situé en haut. Le volet droit se ferme/réduit automatiquement.

   Notes

   Dans le cas de sessions multiples, le volet droit continuera à s’afficher tant que vous n’avez pas fermé tous les onglets de session.

Voir aussi

Afficher des contrôles hébergés dans la disposition de panneau personnalisée
Panneaux, types de panneau, et structures de panneau dans Unified Service Desk

Unified Service Desk 2.0

© 2017 Microsoft. Tous droits réservés. Copyright