Erstellen eines benutzerdefinierten Bereichslayouts

Veröffentlicht: November 2016

Gilt für: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2013, Dynamics CRM 2015, Dynamics CRM 2016

Bereichslayouts in Unified Service Desk sind gehostete Steuerelemente, die die Möglichkeit bieten, alle Arten von unterschiedlichen Layouts im System zu laden.Unified Service Desk enthält einige vordefinierte Bereichslayouts für Sie zur Verwendung in der Agentenanwendung. Weitere Informationen finden Sie unter Bereichslayouts im Unified Service Desk.

Mit Unified Service Desk lässt Sie auch über anwenderdefinierte Bereichslayouts erstellen, bei denen Sie die Unified Service Desk-Bereichstypen nach Ihren Anforderungen gestalten und mit Code-Behind XAML. verbessern.Microsoft Dynamics 365 stellt eine Visual Studio-Projektvorlage zum Erstellen benutzerdefinierter Bereichslayouts mit Code-Behind-Support bereit.

In diesem Thema wird gezeigt, wie ein Bereichslayout erstellt wird, in dem Sie Bereiche neu anordnen, um die Sitzungsinformationen, Agentenskripting Notizenverwaltung und die zugeordneten Anfragen auf der rechten Seite des Desktops anstatt der linken Seite anzuzeigen. Entsprechend wird der Bereich, der alle diese Informationen anzeigt, automatisch angezeigt, wenn eine Sitzung in Unified Service Desk gestartet, und verschwindet automatisch, wenn die Sitzung geschlossen wird, sodass Sie den Bereich nicht manuell erweitern und verkleinern müssen.

In diesem Thema

Voraussetzungen

Erstellen eines benutzerdefinierten Bereichslayouts

Testen Sie Ihr benutzerdefiniertes Bereichslayout

Voraussetzungen

• Microsoft .NET Framework 4.5.2

• Unified Service Desk-Client-Anwendung; die Client-Anwendung ist die für das Testen des benutzerdefiniertem Bereichslayout gehosteteSteuerelements mit der Agent-Anwendung erforderlich.

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

• NuGet Package Manager für Visual Studio 2012, Visual Studio 2013 oder Visual Studio 2015

• Microsoft Dynamics 365 SDK-Vorlagen für Visual Studio mit Projektvorlage für benutzerdefiniertes Bereichslayout. Sie können Sie auf eine der folgenden Weisen erhalten:

  • Laden Sie die CRM-SDK-Vorlage vom Visual Studio-Katalog herunter. Doppelklicken Sie zur Installation der Vorlage in Visual Studio auf die Datei CRMSDKTemplates.vsix.

  • Laden Sie das CRM SDK herunter und installieren Sie es. Die Vorlagendatei CRMSDKTemplates.vsix ist standardmäßig im SDK\Templates-Ordner gespeichert. Doppelklicken Sie auf die Datei, um die Vorlage in Visual Studio zu installieren.

Erstellen eines benutzerdefinierten Bereichslayouts

1. Starten Sie Visual Studio und erstellen Sie ein neues Projekt.

2. Im Dialogfeld Neues Projekt:

   1. Erweitern Sie in der Liste der installierten Vorlagen Visual C# und wählen Sie Dynamics 365-SDK Vorlagen > Unified Service Desk > USD Benutzerdefiniertes Bereichslayout aus.

   2. Sicherstellen, dass .NET Framework 4.5.2 ausgewählt ist.

   3. Geben Sie den Namen und den Standort des Projekts an, und klicken Sie auf OK.

   

3. In Projektmappen-Explorer doppelklicken Sie auf die Datei CustomLayout.xaml, um den XAML-Designer herauszubringen. Der XAML-Designer zeigt das Standard-Bereichslayout in Unified Service Desk an.

4. Ersetzen Sie den XAML-Code in der Datei CustomLayout.xaml durch den Code, der in dem folgenden Beispiel bereitgestellt wird. Dazu müssen Sie den gesamten Code (CTRL+A) im XAML-Bereich (wie in Abbildung gezeigt) auswählen, löschen und dann den XAML-Code einfügen, der an der gleichen Stelle bereitgestellt wird. Dies ist notwendig, um den Ort des Erweiterungsbereichs von rechts nach links zu ändern.

   

   <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. Sie können auch eine Tastenkombination definieren, um auf einen Bereich in einem benutzerdefinierten Bereichslayout zugreifen.Weitere Informationen:Tastenkombinationen für Bereiche

6. Rechtsklicken Sie in Lösungsexplorer auf die Datei CustomLayout.xaml, und klicken Sie auf Code anzeigen, um den Code hinter dem XAML hinzuzufügen. Dadurch wird der Datei CustomLayout.xaml.cs geöffnet.

7. Aktualisieren Sie die Methodendefinition NotifyContextChange, indem Sie folgenden Code hinzufügen.

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

   Der Code überprüft, ob Sitzungen in Unified Service Desk aktiv sind, und zeigt automatisch den Erweiterungsbereich an (erweitert ihn) oder blendet ihn aus (verkleinert ihn).

   Dies ist die aktualisierte NotifyContextChange-Methodendefinition.

   

8. Speichern Sie Ihr Projekt, und bauen Sie es auf (Aufbauen > Lösung aufbauen), um zu prüfen, ob es erfolgreich aufgebaut wird.

   Hinweis

   Notieren Sie den Namen der Klasse, die verwendet wird, um das benutzerdefinierte Bereichslayout in der Datei CustomLayout.xaml.cs zu erstellen. In diesem Fall ist es CustomLayout. Sie benötigen diese Informationen im nächsten Schritt.

Testen Sie Ihr benutzerdefiniertes Bereichslayout

Nachdem das Projekt erfolgreich aufgebaut wurde, testen Sie das benutzerdefinierte Bereichslayout. Der Test besteht aus aus zwei Teilen: Definieren des gehosteten Steuerelements für das benutzerdefinierte Bereichslayout auf dem Server und dann Anmeldung bei Unified Service Desk auf dem Server unter Verwendung der Client-Anwendung mit dem benutzerdefinierten Code-Assembly im Clientverzeichnis.

Definieren des gehosteten Steuerelements für das benutzerdefinierte Bereichslayout auf dem Server

1. Melden Sie sich bei Microsoft Dynamics 365 an.

2. Klicken Sie auf der Navigationsleiste auf Microsoft Dynamics 365 und wählen Sie Einstellungen.

3. Klicken Sie auf Einstellungen > Unified Service Desk > Gehostete Steuerelemente.

4. Klicken Sie auf NEU, und geben Sie dann Werte im Bildschirm Neues gehostetes Steuerelement an, wie hier gezeigt.

   

   Hinweis

   Assembly-URI ist der Name Ihrer Assembly, und der Assembly-Typ ist der Name Ihrer Assembly-Datei (dll), gefolgt von einem Punkt (.) und anschließend der Klassenname in Ihrem Visual Studio-Projekt. In diesem Beispiel lautet der Name des Assemblys MyUSDCustomPanelLayout und der Name der Klasse CustomLayout; dies ist der Standardklassenname, wenn Sie ein benutzerdefiniertes Bereichslayout erstellen.

5. Speichern Sie das gehostete Steuerelement.

Führen Sie den Unified Service Desk aus, um mit dem benutzerdefiniertem Bereichslayout zu arbeiten.

1. Kopieren Sie die Assemblydatei (fll), das die Definition Ihres benutzerdefinierten gehosteten Steuerelements enthält, aus Ihrem Visual Studio-Projektdebug-Ordner in das Unified Service Desk-Anwednungsverzeichnis, das standardmäßig c:\Program Files\Microsoft Dynamics CRM USD\USD ist.

2. Führen Sie den Unified Service Desk-Client aus, um eine Verbindung mit dem Dynamics 365-Server herzustellen.

3. Bei erfolgreicher Anmeldung wird das benutzerdefinierte Bereichslayout ohne den Erweiterungsbereich auf der linken Seite angezeigt. Der Erweiterungsbereich steht nun auf der rechten Seite.

   

4. Wählen Sie auf der Symbolleiste Suchen aus, und wählen Sie einen Datensatz aus, der in einer Sitzung angezeigt werden soll. In diesem Fall wählen Sie Kontakte im Fenster Suchen, und wählen Sie dann Maria Campbell (Beispiel) aus. Im rechten Bereich werden automatisch die zugeordneten Agentskripting, Sitzungsdaten und weitere Informationen über den aktuellen Kontaktdatensatz angezeigt.

   

5. Schließen Sie die Sitzung, indem Sie oben in der Sitzungsregisterkarte auf das Kreuz klicken, und der rechte Bereich wird automatisch geschlossen/reduziert.

   Hinweis

   Im Falle mehrerer Sitzungen wird der rechte Bereich weiterhin angezeigt, bis Sie alle Sitzungsregisterkarten geschlossen haben.

Siehe auch

Gehostete Steuerelemente im benutzerdefinierte Bereichslayout anzeigen
Bereiche, Bereichstypen und Bereichslayouts in Unified Service Desk

Unified Service Desk 2.0

© 2017 Microsoft. Alle Rechte vorbehalten. Copyright