Een aangepaste paneelindeling maken

 

Gepubliceerd: november 2016

Is van toepassing op: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2013, Dynamics CRM 2015, Dynamics CRM 2016

Paneelindelingen in Unified Service Desk zijn gehoste besturingselementen die de mogelijkheid bieden om allerlei soorten verschillende indelingen in het systeem te laden.Unified Service Desk biedt een aantal vooraf gedefinieerde paneelindelingen die u in uw agenttoepassing kunt gebruiken. Zie Paneelindelingen in Unified Service Desk voor meer informatie.

Met Unified Service Desk kunt u ook door de gebruiker gedefinieerde of aangepaste paneelindelingen maken waarmee u de gewenste indeling kunt ontwerpen voor uw Unified Service Desk-paneeltypen en de ervaring kunt verbeteren met code achter de XAML.Microsoft Dynamics 365 biedt een Visual Studio-projectsjabloon voor het maken van door de gebruiker gedefinieerde paneelindelingen met ondersteuning voor achter de code.

In dit onderwerp ziet u hoe u een deelvensterindeling maakt waarbij u de deelvensters ordent om de sessie-informatie, agentscripting, notitiebeheer en bijbehorende aanvragen aan de rechterzijde van het bureaublad weergeeft in plaats van aan de linkerzijde. Het deelvenster dat al deze informatie bevat wordt ook automatisch weergegeven wanneer een sessie wordt gestart in Unified Service Desk en verdwijnt automatisch wanneer de sessie wordt gesloten, in plaats van dat u het deelvenster handmatig moet uitvouwen en samenvouwen.

In dit onderwerp

Vereisten

Een aangepaste paneelindeling maken

Uw aangepaste deelvensterindeling testen

Vereisten

  • Microsoft .NET Framework 4.5.2

  • Unified Service Desk-clienttoepassing; de clienttoepassing is vereist voor het testen van het gehoste besturingselement met de aangepaste deelvensterindeling, door zich aan te melden met behulp van de agenttoepassing.

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

  • NuGet-pakketbeheer voor Visual Studio 2012, Visual Studio 2013 of Visual Studio 2015

  • Microsoft Dynamics 365 SDK-sjablonen voor Visual Studio die de projectsjabloon met de aangepaste paneelindeling bevatten. U kunt het via een van de volgende opties krijgen:

Een aangepaste paneelindeling maken

  1. Start Visual Studio, en maak een nieuw project.

  2. In het dialoogvenster Nieuw project:

    1. Vouw in de lijst met geïnstalleerde sjablonen Visual C# uit en selecteer Dynamics 365 SDK-sjablonen > Unified Service Desk > Aangepaste USD-deelvensterindeling.

    2. Controleer of .NET Framework 4.5.2 is geselecteerd.

    3. Geef de locatie en de naam van het bestand op, en klik op OK.

    Een aangepaste paneelindeling maken

  3. Dubbelklik in Verkenner op het bestand CustomLayout.xaml om de XAML-ontwerpfunctie weer te geven. De XAML-ontwerpfunctie geeft de standaarddeelvensterindeling in Unified Service Desk weer.

  4. Vervang de XAML-code in het bestand CustomLayout.xaml door de code uit het volgende voorbeeld. Als u dit wilt doen, selecteert u alle code (CTRL+A) in het XAML-gebied (zoals in de afbeelding), verwijdert u deze en plakt u de XAML-code op dezelfde plaats. Dit wordt gerealiseerd door de locatie van het uitvouwdeelvenster van links naar rechts te veranderen.

    De XAML-code bijwerken voor de aangepaste paneelindeling

    <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. U kunt ook een sneltoets definiëren om toegang te krijgen tot een paneel in uw aangepaste paneelindeling.Meer informatie:Sneltoetsen voor panelen

  6. Klik in Oplossingenverkenner met de rechtermuisknop op het bestand CustomLayout.xaml en selecteer Code weergeven om code toe te voegen achter de XAML. Dit opent het bestand CustomLayout.xaml.cs.

  7. Werk de methodedefinitie NotifyContextChange bij door de volgende code toe te voegen.

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

    De code controleert of er sessies actief zijn in Unified Service Desk, en toont (vouwt uit) of verbergt (vouwt samen) automatisch het uitvouwdeelvenster.

    Dit is de bijgewerkte NotifyContextChange-methodedefinitie.

    Bijgewerkte NotifyContextChange-methode

  8. Sla uw project op en maak het (Maken > Oplossing maken) om te controleren of het met succes kan worden gemaakt.

    Notitie

    Noteer de naam van de klasse die is gebruikt om uw aangepaste deelvensterindeling te maken in het bestand CustomLayout.xaml.cs. In dit geval is dat CustomLayout. U hebt deze informatie in de volgende stap nodig.

Uw aangepaste deelvensterindeling testen

Nadat uw project met succes is gemaakt, test u de aangepaste paneelindeling. Het testen bestaat uit twee delen: het gehoste besturingselement met de aangepaste deelvensterindeling op de server definiëren en vervolgens het aanmelden bij Unified Service Desk op de server met uw clienttoepassing met de aangepaste codeassemblage in de clientmap.

Het gehoste besturingselement met de aangepaste paneelindeling op de server definiëren

  1. Aanmelden bij Microsoft Dynamics 365.

  2. Kies op de navigatiebalk Microsoft Dynamics 365 en selecteer Instellingen.

  3. Kies Instellingen > Unified Service Desk > Gehoste besturingselementen.

  4. Kies NIEUW en geef vervolgens waarden in het scherm Nieuw gehost besturingselement op, zoals hier weergegeven.

    Definitie van het gehoste besturingselement van het type aangepast paneel

    Notitie

    Assembly-URI is de naam van uw assembly en het Assemblytype is de naam van uw assemblybestand (dll) gevolgd door een punt (.) en vervolgens de klassenaam in uw Visual Studio-project. In dit voorbeeld is de naam van de assemblage MyUSDCustomPanelLayout en de naam van de klasse CustomLayout, wat de standaardklassenaam is wanneer u een aangepaste paneelindeling maakt.

  5. Sla het gehoste besturingselement op.

De Unified Service Desk-client uitvoeren om te werken met de aangepaste deelvensterindeling

  1. Kopieer het assemblagebestand (dll) met uw aangepaste gehoste besturingselementdefinitie uit de probleemoplossingsmap van de uitvoermap van uw Visual Studio-project naar de toepassingsdirectory van Unified Service Desk, wat standaard c:\Program Files\Microsoft Dynamics CRM USD\USD is.

  2. Voer de Unified Service Desk-client uit om verbinding te maken met uw Dynamics 365-server.

  3. Na een succesvolle aanmelding ziet u de aangepaste deelvensterindeling zonder het uitvouwdeelvenster, aan de linkerzijde. Het uitvouwdeelvenster bevindt zich nu aan de rechterkant.

    Schermafbeelding van aangepaste paneelindeling

  4. Kies Zoeken op de werkbalk en selecteer een record die in een sessie moet worden weergegeven. Kies in dit geval Contactpersonen in het venster Zoeken en kies vervolgens Maria Campbell (voorbeeld). Het rechterdeelvenster wordt automatisch weergegeven om de bijbehorende sessiegegevens, agentscripting en andere informatie over de huidige contactpersoonrecord te tonen.

    De juiste expanderdeelvenster wordt automatisch weergegeven

  5. Sluit de sessie door bovenaan het sessietabblad op het kruis te klikken, waarna het rechterdeelvenster automatisch wordt gesloten/samengevouwen.

    Notitie

    In het geval van meerdere sessies blijft het rechterdeelvenster weergegeven totdat u alle sessietabbladen hebt gesloten.

Zie ook

Gehoste besturingselementen weergeven in de aangepaste paneelindeling
Panelen, paneeltypen en paneelindelingen in Unified Service Desk

Unified Service Desk 2.0

© 2017 Microsoft. Alle rechten voorbehouden. Auteursrecht

  • Last updated on