Criar um layout de painel personalizado

Artigo
04/18/2017

Publicado: novembro de 2016

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

Layouts de painel no Unified Service Desk são controles hospedados, que oferecem a capacidade de carregar todos os layouts dos diferentes tipos do sistema.Unified Service Desk apresenta alguns layouts predefinidos de painel para você usar no aplicativo do agente. Para obter mais informações, consulte Layouts de painéis no Unified Service Desk.

O Unified Service Desk também permite criar layouts de painel definidos pelo usuário ou personalizados, possibilitando desenvolver os tipos de painéis do Unified Service Desk de acordo com os seus requisitos e aprimorar a experiência com code-behind XAML. O Microsoft Dynamics 365 fornece um modelo de projeto do Visual Studio para criar layouts de painel definidos pelo usuário com suporte de code-behind.

Este tópico mostra como criar um layout do painel onde você irá reorganizar os painéis para exibir as informações de sessão, o script do agente, o gerenciador anotações, e as ocorrências associadas para serem exibidos no lado direito da área de trabalho, em veze de no lado esquerdo. Além disso, o painel que exibe todas estas informações será exibido automaticamente quando uma sessão for iniciada no Unified Service Deske desaparecerão automaticamente quando a sessão for fechada, em vez de você ter que recriá-las manualmente e recolher o painel.

Neste tópico

Pré-requisitos

Criar um layout de painel personalizado

Teste o layout de painel personalizado

Pré-requisitos

Microsoft .NET Framework 4.5.2
O aplicativo cliente de Unified Service Desk ; o aplicativo cliente é necessário para testar o controle hospedado do layout do painel personalizado pela conexão usando o aplicativo cliente.
Microsoft Visual Studio 2012, Visual Studio 2013 ou Visual Studio 2015
Gerenciador de Pacotes de NuGet para Visual Studio 2012, Visual Studio 2013 ou Visual Studio 2015
Modelos do SDK do Microsoft Dynamics 365 para Visual Studio que contêm o modelo de projeto de layout de painel personalizado. É possível obter um com as seguintes opções:
- Baixe o modelo SDK de CRM da galeria do Visual Studio. Clique duas vezes no arquivo CRMSDKTemplates.vsix para instalar o modelo no Visual Studio.
- Baixe e instale o SDK do CRM. O arquivo de modelos CRMSDKTemplates.vsix está localizado na pasta SDK\Templates. Clique duas vezes no arquivo para instalar o modelo no Visual Studio.

Criar um layout de painel personalizado

Inicie o Visual Studio e crie um novo projeto.
Na caixa de diálogo Novo projeto:
1. Na lista de modelos instalados, expanda Visual C# e selecione Modelos do SDK do Dynamics 365 > Unified Service Desk > Layout de painel personalizado da USD.
2. Verifique se .NET Framework 4.5.2 está selecionado.
3. Especifique o nome e o local do projeto e clique em OK.
No Solution Explorer, clique duas vezes no arquivo CustomLayout.xaml para ativar o designer de XAML. O designer do XAML exibe o layout do painel padrão no Unified Service Desk.

Substitua o código XAML do arquivo CustomLayout.xaml pelo código fornecido no seguinte exemplo. Para fazer isso, selecione todo o código (CTRL+ A) na área de XML (como mostra a ilustração,) exclua-o e depois cole o código XML fornecido no mesmo lugar. Isso é feito para alterar o local do painel expansor da esquerda para a direita.

Atualizar o código XAML para o layout do painel personalizado

<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>

Você também pode definir um atalho de teclado para acessar um painel em seu layout de painel personalizado.Para obter mais informações:Atalhos do teclado para painéis
No Solution Explorer, clique com o botão direito do mouse no arquivo CustomLayout.xaml e clique em Exibir Código para adicionar o code behind no XAML. Será aberto o arquivo CustomLayout.xaml.cs.
Atualize a definição do método NotifyContextChange adicionando o código a seguir.
```
if (context.Count != 0)
{
   RightExpander.IsExpanded = true;
}
else
{ 
   RightExpander.IsExpanded = false;
}
```
O código verifica se há sessões ativas na Unified Service Desk e exibe (expande) automaticamente ou oculta (recolhe) o painel expansor.

Essa é a definição do método NotifyContextChange atualizada.
Salve o projeto e compile-o (Compilação > Solução de compilação) para verificar se ele é compelido com sucesso.

Dica

Anote o nome da classe que é usada para criar o layout de painel personalizado no arquivo CustomLayout.xaml.cs. Neste caso, ele é CustomLayout. Você precisará dessa informação na próxima etapa.

Teste o layout de painel personalizado

Depois que o projeto for compilado com sucesso, teste o layout de painel personalizado. Os testes consistem em duas partes: definir o controle hospedado do layout do painel personalizado no servidor e, em seguida, conectar o Unified Service Desk no servidor, usando o aplicativo cliente com o assembly de códigos personalizados no diretório do cliente.

Defina o controle hospedado do layout de painel personalizado no servidor

Entre no Microsoft Dynamics 365.
Na barra de navegação, selecione Microsoft Dynamics 365 e Configurações.
Selecione Configurações > Unified Service Desk > Controles Hospedados.
Selecione NOVO e, em seguida, especifique os valores na tela Novo controle hospedado, conforme mostrado a seguir.

Dica

URI assembly é o nome de seu assembly e o Tipo assembly é o nome de seu arquivo assembly (dll) seguido por um ponto (.) e então o nome de classe em seu projeto Visual Studio. Neste exemplo, o nome do assembly é MyUSDCustomPanelLayout e o nome da classe é CustomLayout, que é o nome da classe padrão na criação de um layout de painel personalizado.
Salve os controles hospedados.

Execute o cliente Unified Service Desk para trabalhar com o layout de painel personalizado

Copie o arquivo assembly (dll) que contém a definição do controle hospedado personalizado da pasta de depuração de projeto do Visual Studio para o diretório do aplicativo de Unified Service Desk que é, por padrão, c:\Program Files\Microsoft Dynamics CRM USD\USD.
Execute o cliente do Unified Service Desk para conectar-se ao seu servidor do Dynamics 365.
Após o sucesso da conexão, você verá o layout do painel personalizado sem o painel expansor no lado esquerdo. O painel expansor agora está no lado direito.
Escolha Pesquisar na barra de ferramentas e selecione um registro a ser exibido em uma sessão. Neste caso, escolha Contatos na janela Pesquisar e, em seguida, escolha Maria Campbell (Exemplo). O painel direito será exibido automaticamente para mostrar os dados de sessão associados, o script do agente, e outras informações sobre o registro atual de contato.
Feche a sessão clicando na guia da sessão na parte superior e o painel direito será fechado/recolhido automaticamente.

Dica

Em caso de várias sessões o painel direito, continuará sendo exibido até fechar todos as guias da sessão.

Confira Também

Exibir controles hospedados no layout de painel personalizado
Painéis, tipos de painéis e layouts de painéis no Unified Service Desk

Unified Service Desk 2.0

Criar um layout de painel personalizado

Neste tópico

Pré-requisitos

Criar um layout de painel personalizado

Teste o layout de painel personalizado

Defina o controle hospedado do layout de painel personalizado no servidor

Execute o cliente Unified Service Desk para trabalhar com o layout de painel personalizado

Confira Também

Recursos adicionais