Compartilhar via

Painéis, tipos de painéis e layouts de painéis no Unified Service Desk

  • Artigo

 

Publicado: novembro de 2016

Aplicável a: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2013, Dynamics CRM 2015, Dynamics CRM 2016

A Unified Service Desk for Microsoft Dynamics 365 usa painéis para exibir controles hospedados de vários tipos. Os vários tipos predefinidos de painéis estão disponíveis na Unified Service Desk para oferecer suporte a diversas opções de layout, tais como layout tabulado, layout de plataforma e layout empilhado. Você define a organização desses painéis na tela principal da Unified Service Desk usando um controle hospedado de Layout de painel.Para obter mais informações:Layout de painel (controle hospedado)

Nesta seção

Painéis no Unified Service Desk

Tipos de painéis no Unified Service Desk

Layouts de painéis no Unified Service Desk

Painéis no Unified Service Desk

Sempre que você criar um controle hospedado, será necessário especificar o painel que irá hospedá-lo no campo Grupo de exibição da página Novo controle hospedado. Para a maioria dos tipos de controle hospedado, a Unified Service Desk preenche automaticamente um valor de painel no campo Grupo de exibição. Por exemplo, o PainelPrincipal é usado para um tipo de Página do CRM de controle hospedado e o PainelDaBarraDeFerramentas é usado para o tipo Contêiner da Barra de Ferramentas do controle hospedado.

Os seguintes painéis predefinidos ficam disponíveis na Unified Service Desk:

Painel

Descrição

MainPanel

A área de trabalho principal do canto inferior direito.

PainelDeConversa

O típico local da janela de conversa. Está no controle de script do agente.

PainelOculto

Um painel invisível geralmente usado para o componente sem uma interface do usuário (UI).

PainelEsquerdo1

Um painel em PainelDoFluxoDeTrabalho à esquerda.

PainelEsquerdo2

Um painel em PainelEsquerdo1 à esquerda.

PreenchimentoDoPainelEsquerdo

Um painel em PainelEsquerdo2. Esse painel expande o preenchimento para o restante da área disponível na borda inferior do painel esquerdo.

RightPanel

Um painel localizado no lado direito.

PainelCTI *

Um painel posicionado na parte superior direita é o local padrão para controles de softphone. Esse é um painel de pilha para que mais de um controle possa ser adicionado e apareçam próximos uns dos outros.

SessionExplorerPanel *

Um painel localizado nas guias de sessão onde geralmente são visualizadas as linhas de sessão.

PainelDeFluxoDeTrabalho *

Um painel localizado em PainelExploradorDaSessão e, geralmente, contém o controle de script do agente.

PainelDaBarraDeFerramentas *

Um painel na parte superior à direita do logotipo da Unified Service Desk e, normalmente, detém a barra de ferramentas.

PainelDaFaixaDeOpções

Apenas para uso interno.

PainelDeStatus *

Um painel especial localizado na barra de status na parte inferior do aplicativo.

* Esses painéis normalmente são reservados para objetivos especiais, por isso, seu uso deve ser evitado, a menos que necessário.

Com o Unified Service Desk 2.2.1 ou posterior, você também pode atribuir atalhos de teclado a painéis para que os agentes do SAC possam acessar o painel diretamente no aplicativo cliente usando apenas o teclado.Para obter mais informações:Atalhos do teclado para painéis

Tipos de painéis no Unified Service Desk

A Unified Service Desk fornece os seguintes tipos predefinidos de painéis para oferecer suporte a diversas opções de layout:

Tipo de painel

Descrição

PainelDaGuiaUSD

Esse tipo de painel contém um controle de guia. Cada controle hospedado é carregado em uma das guias. O nome da guia exibirá o valor especificado no campo Nome de exibição de um controle hospedado. Se nenhum nome de exibição for especificado para um controle hospedado, o nome do controle hospedado será exibido como o nome da guia. O controle/cabeçalho da guia será exibido para esse tipo de painel se um ou mais controles hospedados estiverem nele.

PainelDePilhaUSD

Este tipo de painel empilha os controles hospedados de maneira horizontal ou vertical semelhante ao painel de pilha em Windows Presentation Foundation (WPF). Isso pode ser útil para barras de ferramentas ou barras de status, etc. Este tipo de painel é derivado a partir de StackPanel, que suporta uma propriedade Orientação. Essa orientação deve ser definida no XAML para definir de qual maneira os controles hospedados deverão ser empilhados.

PainelDaGuiaDaCentralUSD

Se um único controle hospedado estiver nesse painel, as guias não serão exibidas. As guias de um controle de guia são mostradas se dois ou mais controles residirem nesse painel.

Dica

Esse controle é o mesmo que o PaineDaGuiaUSD, mas existe um estilo nos temas padrão que ocultarão as guias na parte superior somente quando um controle for carregado.

PainelRecolherUSD

Este é o mesmo que o PainelDaGuiaUSD, mas um estilo no tema padrão é definido para recolher automaticamente este tipo de painel, de modo que não ocupe espaço na interface do usuário se nenhum controle hospedado for carregado nele.

PainelFlutuanteUSD

A área de trabalho padrão fornece uma instância desse tipo de painel. Quando “FloatingPanel” é especificado para um controle hospedado, esse tipo de painel está sendo usado. Normalmente, esse tipo de painel não seria especificado no seu layout personalizado. No entanto, ele é exposto caso haja motivo para usá-lo.

PainelDeFerramentasFlutuanteUSD

Esse tipo de painel cria uma janela de ferramentas para cada controle hospedado carregado nele. A área de trabalho padrão fornece uma instância desse tipo de painel. Quando “FloatingToolPanel” é especificado para um controle hospedado, esse tipo de painel está sendo usado. Normalmente, esse tipo de painel não seria especificado no seu layout personalizado. No entanto, ele é exposto caso haja motivo para usá-lo.

USDPopUpPanel

Esse tipo de painel permite que o conteúdo do controle hospedado passe pela exibição principal.

Você também pode usar esses tipos predefinidos de painel para criar um tipo de painel personalizado na Unified Service Desk.Para obter mais informações:Criar um tipo de painel personalizado

Layouts de painéis no Unified Service Desk

Use um do layout do painel para definir a organização de painéis na tela no cliente do Unified Service Desk. O layout do painel é definido com o uso de um controle hospedado do Layout do Painel.Para obter mais informações:Layout de painel (controle hospedado)

O layout a seguir mostra o tipo de Painel Principal Padrão do layout do painel (também chamado layout do painel padrão) no Unified Service Desk.

Tema de Ar no Unified Service Desk

Dica

Se você não criar nenhum layout do painel em sua configuração do Unified Service Desk, o layout do painel padrão é usado automaticamente para exibir painéis e controles no aplicativo cliente.

A área do aplicativo total na janela principal é definida como um próprio painel e é chamada MainWorkArea. Ao definir o tipo de XAML ou User-Defined do layout do painel, a MainWorkArea é usada como o valor do painel para o campo Grupo de Exibição.

Como os layouts de painel são os controles hospedados, você pode usar um layout de painel em qualquer parte onde um controle hospedado tiver sido configurado. Um uso comum para esse tipo é definir uma exibição dividida na área do painel principal. É possível exibir uma lista de exibição mostrando uma lista de contas na parte superior e uma exibição detalhada na parte inferior. É possível exibir todo um layout de painel no painel flutuante e mostrá-lo em um segundo monitor. Para obter mais informações sobre o uso de painéis flutuantes, consulte Configurar o recurso de exibição e ocultamento de artigos da base de dados de conhecimento.

O Unified Service Desk fornece os seguintes tipos de layouts do painel:

Layout do painel

Descrição

Painel Principal Padrão

O layout do painel padrão fornece o layout tradicional que inclui uma série de painéis à esquerda, área recolhível e uma área de trabalho principal à direita. A seguir está o XAML usado para definir o layout do painel. Você também pode encontrar esse XAML no SDK do User Interface Integration (UII).Baixe o pacote e extraia-o para ver o arquivo SamplePanelLayout.xaml sob o diretório do "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>

Painel Principal da Faixa de Opções

Somente para uso interno.

Divisão Horizontal

Este é um layout especial geralmente usado no MainPanel como um controle hospedado. Ele contém um separador com um painel superior e um painel inferior. É tipicamente usado para exibir uma visualização da lista na parte superior e uma visualização de detalhes na parte inferior do Outlook. Dois painéis são definidos nesse layout.

Nome do painel

Descrição

TopPanel

Este é o painel exibido na parte superior. É definido como:

USDDeckTabPanel

BottomPanel

Este é o painel exibido na parte inferior. É definido como:

USDDeckTabPanel

Este painel oferece suporte às seguintes ações:

Ação

Descrição

SetTopPanelHeight

Esta ação pode ser usada para definir a altura do painel superior. Oferece suporte a dois parâmetros, altura e tipo.

O tipo pode ser qualquer um dos seguintes valores:

  • Automático: dimensionado para corrigir componentes internos

  • Pixel: o número de pixels

  • Estrela: ocupa o espaço restante

A interpretação do parâmetro de altura depende deste valor do tipo. Para obter mais informações, consulte a Windows Presentation Foundation (WPF)documentação

SetBottomPanelHeight

Esta ação pode ser usada para definir a altura do painel inferior. Oferece suporte a dois parâmetros, altura e tipo.

O tipo pode ser qualquer um dos seguintes valores:

  • Automático: dimensionado para corrigir componentes internos

  • Pixel: o número de pixels

  • Estrela: ocupa o espaço restante

A interpretação do parâmetro de altura depende deste valor do tipo. Para obter mais informações, consulte a documentação WPF.

Divisão vertical

Este é um layout especial que contém um separador vertical com um painel esquerdo e um painel direito.

Nome do painel

Descrição

LeftPanel

Este é o painel exibido à esquerda. É definido como:

USDDeckTabPanel

RightPanel

Este é o painel exibido à direita. É definido como:

USDDeckTabPanel

Este painel oferece suporte às seguintes ações:

Ação

Descrição

SetLeftPanelWidth

Esta ação pode ser usada para definir a largura do painel esquerdo. Oferece suporte a dois parâmetros, largura e tipo.

O tipo pode ser qualquer um dos seguintes valores:

  • Automático: dimensionado para corrigir componentes internos

  • Pixel: o número de pixels

  • Estrela: ocupa o espaço restante

A interpretação do parâmetro de largura depende deste valor do tipo. Para obter mais informações, consulte a documentação WPF.

SetRightPanelWidth

Esta ação pode ser usada para definir a largura do painel direito. Oferece suporte a dois parâmetros, largura e tipo.

O tipo pode ser qualquer um dos seguintes valores:

  • Automático: dimensionado para corrigir componentes internos

  • Pixel: o número de pixels

  • Estrela: ocupa o espaço restante

A interpretação do parâmetro de largura depende deste valor do tipo. Para obter mais informações, consulte a documentação WPF.

XAML

Uma das maneiras mais rápidas de criar um layout personalizado. No entanto, esta opção não suporta o code-behind. Assim, se não for possível descrever seu layout sem código, não será possível usar esta opção. Em vez dela, a opção Definida pelo usuário deverá ser usada. Para obter mais informações, consulte Code-Behind e XAML no WPF.

Veja um exemplo de 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>

Para obter detalhes sobre quais tipos de painel podem ser definidos e usados na XAML, consulte Tipos de painéis no Unified Service Desk.

Definido pelo Usuário

Esta configuração permite que você crie um controle hospedado com um code behind para obter os recursos completos do .NET ao tratar seu layout.

Para obter detalhes sobre quais tipos de painel podem ser definidos e usados em um painel definido pelo usuário, consulte Tipos de painéis no Unified Service Desk.

Para obter informações sobre como criar um layout de painel personalizado, consulte Criar um layout de painel personalizado.

Confira Também

Usar tipos e layouts de painel personalizados no Unified Service Desk
Atalhos do teclado para painéis

Unified Service Desk 2.0

© 2017 Microsoft. Todos os direitos reservados. Direitos autorais