Condividi tramite

Creare un layout di pannello personalizzato

 

Data di pubblicazione: novembre 2016

Si applica a: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2013, Dynamics CRM 2015, Dynamics CRM 2016

Layout di pannelli di Unified Service Desk sono essi stessi controlli ospitati che offrono la possibilità di caricare tutti i tipi di layout diversi nel sistemaUnified Service Desk offre alcuni layout di pannello predefiniti per l'utilizzo nell'applicazione dell'agente. Per ulteriori informazioni, vedere Layout di pannello di Unified Service Desk.

Unified Service Desk offre alcuni layout di pannello predefiniti per l'utilizzo nell'applicazione dell'agente Unified Service Desk secondo requisiti specifici e migliorare l'esperienza con XAML code-behind.Microsoft Dynamics 365 offre un modello di progetto di Visual Studio per creare layout di pannello definiti dall'utente con supporto code-behind.

In questo argomento viene descritto come creare un layout di pannello in cui si ridispongono i pannelli per visualizzare le informazioni della sessione, lo scripting dell'agente, il responsabile delle note e i casi associati sul lato destro desktop anziché sulla parte sinistra. Inoltre, il riquadro contenente tutte le informazioni viene visualizzato automaticamente quando una sessione viene avviata in Unified Service Desk e viene chiuso automaticamente quando la sessione viene chiusa, senza la necessità di espandere e comprimere il riquadro manualmente.

In questo argomento

Prerequisiti

Creare un layout di pannello personalizzato

Testare il layout di pannello personalizzato

Prerequisiti

  • Microsoft .NET Framework 4.5.2

  • Applicazione client di Unified Service Desk. L'applicazione client è necessaria per testare il controllo ospitato del layout di pannello personalizzato con l'accesso tramite l'applicazione dell'agente.

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

  • Gestione pacchetti NuGet per Visual Studio 2012, Visual Studio 2013 o Visual Studio 2015

  • Modelli Microsoft Dynamics 365 SDK per Visual Studio che contengono il modello del progetto di layout di pannello personalizzato. È possibile ottenere il modello, in uno dei modi seguenti:

Creare un layout di pannello personalizzato

  1. Avviare Visual Studio e creare un nuovo progetto.

  2. Nella finestra di dialogo Nuovo progetto:

    1. Nell'elenco dei modelli installati, espandi Visual C# e seleziona Modelli Dynamics 365 SDK > Unified Service Desk > Layout di pannello personalizzato USD.

    2. Verificare che .NET Framework 4.5.2 sia selezionato.

    3. Specificare il nome e la posizione del progetto e fare clic su OK.

    Creare un layout di pannello personalizzato

  3. In Esplora soluzioni, fare doppio clic sul file CustomLayout.xaml per aprire la finestra di progettazione XAML. Nella finestra di progettazione XAML viene visualizzato il layout di pannello predefinito in Unified Service Desk.

  4. Sostituire il codice XAML nel file CustomLayout.xaml con il codice specificato nell'esempio seguente. A tale scopo, selezionare tutto il codice (CTRL+A) nell'area XAML (come illustrato nella figura), eliminarlo e quindi incollare il codice XAML fornito nello stesso punto. Questa operazione viene eseguita per modificare la posizione del riquadro dell'espansore da destra a sinistra.

    Aggiornare il codice XAML del layout del pannello personalizzato

    <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. È inoltre possibile definire una scelta rapida per accedere a un pannello nel layout personalizzato del pannello.Ulteriori informazioni:Tasti di scelta rapida per pannelli

  6. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul file CustomLayout.xaml e fare clic su Visualizza codice per aggiungere il code-behind XAML. Viene aperto il file CustomLayout.xaml.cs.

  7. Aggiornare la definizione del metodo NotifyContextChange aggiungendo il codice seguente.

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

    Il codice controlla se esistono sessioni attive in Unified Service Desk e automaticamente visualizza (espande) o nasconde (comprime) il riquadro dell'estensore.

    Questa è la definizione aggiornata del metodo NotifyContextChange.

    Metodo NotifyContextChange aggiornato

  8. Salvare il progetto e compilarlo (CompilaCompila soluzione) per verificare se viene compilato correttamente.

    Nota

    Notare il nome della classe utilizzata per compilare il layout di pannello personalizzato nel file CustomLayout.xaml.cs. In questo caso, CustomLayout. Questa informazione è necessaria per il prossimo passaggio.

Testare il layout di pannello personalizzato

Dopo la corretta compilazione del progetto, verificare il layout del pannello personalizzato. Il test è costituito da due parti: la definizione del controllo ospitato di layout del pannello personalizzato nel server e l'accesso a Unified Service Desk nel server utilizzando l'applicazione client con l'assembly del codice personalizzato nella directory client.

Definire il controllo ospitato di layout del pannello personalizzato nel server

  1. Accedere a Microsoft Dynamics 365.

  2. Sulla barra di spostamento scegliere Microsoft Dynamics 365 e selezionare Impostazioni.

  3. Scegliere Impostazioni > Unified Service Desk > Controlli ospitati.

  4. Scegliere NUOVO e quindi specificare i valori nella schermata Nuovo controllo ospitato come illustrato di seguito.

    Definizione personalizzata di controllo ospitato nel pannello

    Nota

    URI assembly è il nome dell'assembly e Tipo assembly è il nome del file assembly (dll) seguito da un punto (.) e dal nome della classe del progetto Visual Studio. In questo esempio il nome dell'assembly è MyUSDCustomPanelLayout e il nome della classe è CustomLayout, vale a dire il nome della classe predefinita quando si crea il layout di un pannello personalizzato.

  5. Salvare il controllo ospitato.

Eseguire il client Unified Service Desk da utilizzare con il layout del pannello personalizzato

  1. Copiare il file di assembly (DLL) che contiene la definizione del controllo ospitato personalizzato dalla cartella di debug del progetto di Visual Studio nella directory dell'applicazione Unified Service Desk che per impostazione predefinita è c:\Program Files\Microsoft Dynamics CRM USD\USD.

  2. Eseguire il client Unified Service Desk per connettersi al server Dynamics 365.

  3. Completato l'accesso, viene visualizzato il layout di pannello personalizzato senza il riquadro dell'espansore nella parte sinistra. Il riquadro dell'espansore è ora da destra.

    Screenshot di layout del pannello personalizzato

  4. Scegliere Cerca nella barra degli strumenti e quindi selezionare un record da visualizzare in una sessione. In questo caso, selezionare Contatti nella finestra Cerca e quindi scegliere Adriana Giorgi (esempio). Il riquadro destro viene aperto automaticamente per visualizzare i dati della sessione, lo scripting dell'agente e altre informazioni associate sul record contatto corrente.

    Il riquadro dell'espansore viene visualizzato automaticamente

  5. Chiudere la sessione facendo clic sulla croce nella parte superiore della scheda della sessione e il riquadro destro viene automaticamente chiuso/compresso.

    Nota

    Nel caso di più sessioni, il riquadro destro continuerà a essere visualizzato fino a che non si chiudono tutte le schede della sessione.

Vedere anche

Visualizzare i controlli ospitati nel layout di pannello personalizzato
Pannelli, tipi di pannello e layout dei pannelli in Unified Service Desk

Unified Service Desk 2.0

© 2017 Microsoft. Tutti i diritti sono riservati. Copyright

  • Last updated on