Condividi tramite

Pannelli, tipi di pannello e layout dei pannelli in Unified Service Desk

 

Data di pubblicazione: novembre 2016

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

In Unified Service Desk for Microsoft Dynamics 365 vengono utilizzati dei pannelli per visualizzare i controlli ospitati di vari tipi. In Unified Service Desk sono disponibili vari tipi predefiniti di pannello per supportare varie opzioni di layout come il layout a schede, a ponte e in pila. È possibile definire la disposizione di questi pannelli nella schermata principale di Unified Service Desk tramite un controllo ospitato Layout pannelli.Ulteriori informazioni:Layout pannello (controllo ospitato)

In questa sezione

Pannelli di Unified Service Desk

Tipi di pannello di Unified Service Desk

Layout di pannello di Unified Service Desk

Pannelli di Unified Service Desk

Ogni volta che si crea un controllo ospitato, è necessario specificare il pannello che lo conterrà nel campo Gruppo di visualizzazione della pagina Nuovo controllo ospitato. Per la maggior parte dei tipi di controlli ospitati, in Unified Service Desk viene automaticamente inserito un valore di pannello nel campo Gruppo di visualizzazione. Ad esempio, MainPanel viene utilizzato per un tipo Pagina CRM di controllo ospitato e ToolbarPanel viene utilizzato per il tipo Contenitore barra degli strumenti di controllo ospitato.

I seguenti pannelli predefiniti sono disponibili in Unified Service Desk.

Pannello

Descrizione

MainPanel

Area di lavoro principale nella parte inferiore destra.

ChatPanel

Posizione tipica della finestra chat. Si trova sotto il controllo di scripting dell'agente.

HiddenPanel

Pannello invisibile utilizzato in genere per componenti senza un'interfaccia utente (UI).

LeftPanel1

Pannello subito sotto il WorkflowPanel a sinistra.

LeftPanel2

Pannello subito sotto il LeftPanel1 a sinistra.

LeftPanelFill

Pannello subito sotto il LeftPanel2. Questo pannello si espande per includere il resto dell'area disponibile fino alla parte inferiore del pannello di sinistra.

RightPanel

Pannello disponibile sul lato destro.

CtiPanel *

Pannello presente nella parte superiore destra, è la posizione predefinita per i controlli softphone. Si tratta di un pannello Stack che consente pertanto di aggiungere più controlli che verranno visualizzati l'uno accanto all'altro.

SessionExplorerPanel *

Pannello posto appena sotto le schede di sessione dove in genere vengono visualizzate le righe di sessione.

WorkflowPanel *

Pannello posto subito sotto il SessionExplorerPanel contenente in genere il controllo di scripting dell'agente.

ToolbarPanel *

Pannello posto nella parte superiore a destra del logo di Unified Service Desk contenente in genere la barra degli strumenti.

RibbonPanel

Solo per uso interno.

StatusPanel *

Pannello speciale posto sulla barra di stato nella parte inferiore dell'applicazione.

* Questi pannelli sono in genere riservati a scopi speciali, pertanto si consiglia di evitarne l'utilizzo salvo richiesto.

Con Unified Service Desk 2.2.1 o versione successiva, puoi anche assegnare tasti di scelta rapida ai pannelli in modo che gli agenti del servizio clienti possano accedere direttamente al pannello nell'applicazione client solo utilizzando la tastiera.Ulteriori informazioni:Tasti di scelta rapida per pannelli

Tipi di pannello di Unified Service Desk

InUnified Service Desk sono disponibili i seguenti tipi predefiniti di pannello per supportare varie opzioni di layout:

Tipo di pannello

Descrizione

USDTabPanel

Questo tipo di pannello contiene un controllo a schede. Ciascun controllo ospitato viene caricato in una delle schede. Il nome della scheda contiene il valore specificato nel campo Nome visualizzato del controllo ospitato. Se non viene specificato alcun nome visualizzato per un controllo ospitato, il nome del controllo ospitato viene visualizzato come il nome della scheda. L'intestazione/controllo a schede viene visualizzato per questo tipo di pannello se include uno o più controlli ospitati.

USDStackPanel

Questo tipo di pannello impila i controlli ospitati in orizzontale o verticale in modo analogo a un pannello Stack di Windows Presentation Foundation (WPF). Può risultare pratico per le barre degli strumenti o le barre di stato. Questo tipo del pannello è derivato da StackPanel, che supporta una proprietà Orientation. L'orientamento deve essere definito nel codice XAML per definire il modo in cui vengono impilati i controlli ospitati.

USDDeckTabPanel

Se nel pannello è presente un singolo controllo ospitato, le schede non vengono visualizzate. Esse vengono visualizzate se nel pannello sono presenti almeno due controlli.

Nota

Questo controllo è lo stesso del pannello USDTabPanel ma nei temi predefiniti è presente uno stile che nasconde le schede nella parte superiore quando è caricato un solo controllo.

USDCollapsePanel

Questo controllo è lo stesso del pannello USDTabPanel ma nei temi predefiniti è presente uno stile che comprime automaticamente questo tipo di pannello per occupare meno spazio nell'interfaccia utente se non vengono visualizzati controlli ospitati.

USDFloatingPanel

Nel desktop predefinito è disponibile un'istanza di questo tipo del pannello. Quando è specificato "FloatingPanel" per un controllo ospitato, è in uso questo tipo di pannello. In genere questo tipo di pannello non viene specificato in un layout personalizzato, tuttavia, è esposto nel caso in cui vi fosse motivo di utilizzarlo.

USDFloatingToolPanel

Questo tipo di pannello crea una finestra degli strumenti per ogni controllo ospitato in esso caricato. Nel desktop predefinito è disponibile un'istanza di questo tipo del pannello. Quando è specificato "FloatingToolPanel" per un controllo ospitato, è in uso questo tipo di pannello. In genere questo tipo di pannello non viene specificato in un layout personalizzato, tuttavia, è esposto nel caso in cui vi fosse motivo di utilizzarlo.

USDPopUpPanel

Questo tipo di pannello consente la presenza di contenuto nel controllo ospitato su cui passare il puntatore del mouse nella visualizzazione principale.

È inoltre possibile utilizzare questi tipi predefiniti di pannello per creare un tipo di pannello personalizzato in Unified Service Desk.Ulteriori informazioni:Creare un tipo di pannello personalizzato

Layout di pannello di Unified Service Desk

Utilizzare un layout pannello per definire la disposizione dei pannelli sullo schermo nel client di Unified Service Desk. Un layout pannello viene definito utilizzando un controllo ospitato Layout pannello.Ulteriori informazioni:Layout pannello (controllo ospitato)

Di seguito viene descritto il tipo di layout di pannello Pannello principale standard (detto anche layout pannello standard) in Unified Service Desk.

Tema Aria in Unified Service Desk

Nota

Se non si crea un layout pannello nella configurazione Unified Service Desk, verrà utilizzato automaticamente il layout pannello standard per visualizzare i pannelli e i controlli nell'applicazione client.

L'intera area dell'applicazione nella finestra principale è definita come il pannello stesso ed è denominata MainWorkArea. Durante la definizione del tipo d layout pannello XAML o User-Defined, viene utilizzato come valore pannello MainWorkArea per il campo Gruppo di visualizzazione.

Poiché i layout di pannelli sono controlli ospitati, è possibile utilizzare un layout di pannelli ovunque si possa configurare un controllo ospitato. Un utilizzo comune consiste nel definire una doppia visualizzazione nell'area del pannello principale. È possibile mostrare una visualizzazione elenco con un elenco di account e una visualizzazione dettagli nella parte inferiore. È possibile visualizzare un intero layout di pannelli nel pannello mobile e mostrarlo in un secondo monitor. Per ulteriori informazioni sull'utilizzo dei riquadri mobili, vedi Configurare la funzionalità Inserisci e Apri nuova finestra per gli articoli della Knowledge Base.

Unified Service Desk include i seguenti tipi di layout pannello:

Layout pannello

Descrizione

Pannello principale standard

Il layout pannello standard è il layout tradizionale costituito da una serie di pannelli a sinistra, un'area comprimibile e un'area di lavoro principale a destra. Il seguente codice XAML viene utilizzato per definire il layout pannello. Puoi trovare il codice XAML anche in User Interface Integration (UII) SDK.Scaricail pacchetto ed estrailo per visualizzare il file SamplePanelLayout.xaml nella directory "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>

    &lt;/Expander&gt;
    &lt;Grid Grid.Column="1"
          Background="Transparent"&gt;
      &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="0" /&gt;
        &lt;RowDefinition Height="79*" /&gt;
        &lt;RowDefinition Height="125*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;USD:USDCollapsePanel x:Name="RibbonPanel"
                            Grid.Row="0"
                            Visibility="Collapsed"
                            AutomationProperties.Name="Ribbon Panel"
                            Focusable="True"
                            Margin="1"
                            ClipToBounds="False"
                            SnapsToDevicePixels="True"/&gt;
      &lt;USD:USDTabPanel x:Name="MainPanel"
                       Grid.Row="1"
                       AutomationProperties.Name="Main Panel"
                       Grid.RowSpan="2"
                       USD:PanelNavigation.KeyboardShortcut="CTRL+7"/&gt;
    &lt;/Grid&gt;
    &lt;Expander Grid.Column="2"
              Style="{DynamicResource StretchExpanderStyle}"
              ExpandDirection="Right"
              x:Name="RightPanelExpander"
              IsExpanded="false"
              BorderBrush="White" &gt;
      &lt;ScrollViewer VerticalScrollBarVisibility="Auto" &gt;
        &lt;Grid Style="{DynamicResource LeftPanelGrid}" &gt;
          &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height="*" /&gt;
          &lt;/Grid.RowDefinitions &gt;
          &lt;USD:USDTabPanel x:Name="RightPanel"
                           AutomationProperties.Name="Right Panel"
                           Grid.Row="0"
                           USD:PanelNavigation.KeyboardShortcut="CTRL+8"/&gt;
          &lt;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"&gt;
            &lt;Grid&gt;
              &lt;Grid.RowDefinitions&gt;
                &lt;RowDefinition Height="20" /&gt;
                &lt;RowDefinition Height="*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Border Background="#cccccc"
                      Grid.Row="0" &gt;
                &lt;TextBlock Text="Article Preview"
                           HorizontalAlignment="Center"
                           Margin="10,0,0,0" /&gt;
              &lt;/Border&gt;
              &lt;Border BorderThickness="1"
                      Grid.Row="1"
                      BorderBrush="#cccccc"
                      Background="White"&gt;
                &lt;ContentControl  Margin="0,0,0,0"
                                 Name="PopupContainer"
                                 Style="{DynamicResource USDContentControlStyle}"/&gt;
              &lt;/Border&gt;
            &lt;/Grid&gt;
          &lt;/USD:USDPopupPanel&gt;
        &lt;/Grid&gt;
      &lt;/ScrollViewer&gt;
    &lt;/Expander&gt;
  &lt;/Grid&gt;
&lt;/Grid&gt;
&lt;StatusBar Grid.Row="2"
           Style="{DynamicResource StatusBarStyle}"&gt;
  &lt;StatusBarItem&gt;
    &lt;TextBlock x:Name="lblStatusBarClock"
               Text="00:00 AM/PM"
               Style="{DynamicResource StatusBarClockLabelStyle}"/&gt;
  &lt;/StatusBarItem&gt;
  &lt;Separator Style="{DynamicResource StatusBarSeparatorStyle}"/&gt;
  &lt;StatusBarItem &gt;
    &lt;USD:USDStackPanel x:Name="StatusPanel"
                       Orientation="Horizontal"
                       AutomationProperties.Name="Status Panel"
                       Margin="1"/&gt;
  &lt;/StatusBarItem&gt;
&lt;/StatusBar&gt;



</Grid>
</USD:PanelLayoutBase>

Pannello principale barra multifunzione

Solo per uso interno.

Divisione orizzontale

Si tratta di un layout speciale in genere utilizzato nel MainPanel come controllo ospitato. Contiene un divisore con un pannello superiore e un pannello inferiore. Viene utilizzato in genere per visualizzare una visualizzazione elenco nella parte superiore e una visualizzazione dettagli nella parte inferiore, come avviene in Outlook. In questo layout sono definiti due pannelli.

Nome pannello

Descrizione

TopPanel

Questo è il pannello che viene visualizzato nella parte superiore. È definito come:

USDDeckTabPanel

BottomPanel

Questo è il pannello che viene visualizzato nella parte inferiore. È definito come:

USDDeckTabPanel

Questo pannello supporta le azioni seguenti:

Azione

Descrizione

SetTopPanelHeight

Questa azione può essere utilizzata per impostare l'altezza del pannello superiore. Supporta due parametri, altezza e tipo.

Il tipo può essere uno qualsiasi dei seguenti valori:

  • Automatica: ridimensionata per correggere i componenti all'interno

  • Pixel: il numero di pixel

  • Stella: occupa lo spazio restante

L'interpretazione del parametro altezza dipende dal valore del tipo. Per ulteriori informazioni, vedi la Windows Presentation Foundation (WPF)documentazione.

SetBottomPanelHeight

Questa azione può essere utilizzata per impostare l'altezza del pannello inferiore. Supporta due parametri, altezza e tipo.

Il tipo può essere uno qualsiasi dei seguenti valori:

  • Automatica: ridimensionata per correggere i componenti all'interno

  • Pixel: il numero di pixel

  • Stella: occupa lo spazio restante

L'interpretazione del parametro altezza dipende dal valore del tipo. Per ulteriori informazioni, vedere la documentazione di WPF.

Divisione verticale

Si tratta di un layout speciale contenente un divisore verticale con un pannello a sinistra e uno a destra.

Nome pannello

Descrizione

LeftPanel

Questo è il pannello che viene visualizzato a sinistra. È definito come:

USDDeckTabPanel

RightPanel

Questo è il pannello che viene visualizzato a destra. È definito come:

USDDeckTabPanel

Questo pannello supporta le azioni seguenti:

Azione

Descrizione

SetLeftPanelWidth

Questa azione può essere utilizzata per impostare la larghezza del pannello di sinistra. Supporta due parametri, larghezza e tipo.

Il tipo può essere uno qualsiasi dei seguenti valori:

  • Automatica: ridimensionata per correggere i componenti all'interno

  • Pixel: il numero di pixel

  • Stella: occupa lo spazio restante

L'interpretazione del parametro larghezza dipende dal valore del tipo. Per ulteriori informazioni, vedere la documentazione di WPF.

SetRightPanelWidth

Questa azione può essere utilizzata per impostare la larghezza del pannello di destra. Supporta due parametri, larghezza e tipo.

Il tipo può essere uno qualsiasi dei seguenti valori:

  • Automatica: ridimensionata per correggere i componenti all'interno

  • Pixel: il numero di pixel

  • Stella: occupa lo spazio restante

L'interpretazione del parametro larghezza dipende dal valore del tipo. Per ulteriori informazioni, vedere la documentazione relativa a WPF.

XAML

Una delle modalità più rapide per creare un layout personalizzato. Tuttavia, questa opzione non supporta il code-behind. Pertanto, se non è possibile descrivere il layout senza utilizzare il codice, non è possibile utilizzare questa opzione e occorre invece utilizzare l'opzione Definito dall'utente. Per ulteriori informazioni, vedere Code-Behind e XAML in WPF.

Di seguito è riportato un esempio di layout 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>

Per informazioni dettagliate sui tipi di pannello che possono essere definiti e utilizzati in questo XAML, vedere Tipi di pannello di Unified Service Desk.

Definita dall'utente

Questa impostazione consente di compilare un controllo ospitato con code behind per poter utilizzare tutte le funzionalità di .NET nella gestione del layout.

Per informazioni dettagliate sui tipi di pannello che possono essere definiti e utilizzati in un pannello definito dall'utente, vedere Tipi di pannello di Unified Service Desk.

Per informazioni sulla creazione di un layout del pannello personalizzato, vedi Creare un layout di pannello personalizzato.

Vedere anche

Usare i tipi di pannello e layout dei pannelli personalizzati in Unified Service Desk
Tasti di scelta rapida per pannelli

Unified Service Desk 2.0

© 2017 Microsoft. Tutti i diritti sono riservati. Copyright

  • Last updated on