Criar um esquema de painel personalizado

Artigo
07/15/2015

Os esquemas de painel no Unified Service Desk são controlos alojados, que fornecem a capacidade de carregar todos os tipos de esquemas diferentes no sistema. O Unified Service Desk fornece alguns esquemas de painéis predefinidos para que possa utilizar na aplicação de agente. Para mais informações, consulte Esquemas de painel.

O Unified Service Desk também lhe permite criar esquemas de painel definidos pelo utilizador ou personalizados quando define os tipos de painel do Unified Service Desk de acordo com o seu requisito e melhorar a experiência com XAML subjacente ao código. O Microsoft Dynamics CRM fornece um modelo de projeto do Visual Studio para criar esquemas de painel definidos pelo utilizador com suporte para código subjacente.

Este tópico mostra como criar um esquema de painel em que irá reorganizar os painéis para apresentar informações de sessão, scripting do agente, gestor de notas e incidentes associados do lado direito do ambiente de trabalho em vez do lado esquerdo. Além disso, o painel que apresenta todas estas informações será apresentado automaticamente quando uma sessão é iniciada no Unified Service Deske desaparecerá automaticamente quando a sessão for fechada, em vez de ter de expandir e fechar manualmente o painel.

Neste Tópico

Pré-requisitos

Criar um esquema de painel personalizado

Testar o esquema de painel personalizado

Pré-requisitos

Microsoft.NET Framework 4.5.2
Aplicação de cliente do Unified Service Desk; a aplicação de cliente é necessária para testar o controlo alojado do esquema de painel personalizado utilizando a aplicação de agente.
Microsoft Visual Studio 2012 ou Visual Studio 2013
NuGet Package Manager para Visual Studio 2012 or Visual Studio 2013
Modelos do Microsoft Dynamics CRM SDK para o Visual Studio que contêm o modelo de projeto de esquema de painel personalizado. Poderá obtê-la numa das seguintes formas:
- Transfira o pacote CRM SDK a partir da galeria do Visual Studio. Faça duplo clique no ficheiro CRMSDKTemplates.vsix para instalar o modelo no Visual Studio.
- Transfira e instale o CRM SDK. O ficheiro de modelo, CRMSDKTemplates.vsix, está localizado na pasta SDK\Templates. Faça duplo clique no ficheiro para instalar o modelo no Visual Studio.

Criar um esquema 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#, selecione Modelos do CRM SDK > Unified Service Desk > Esquema de Painel Personalizado do USD.
2. Certifique-se de que o .NET Framework 4.5.2 está selecionado.
3. Especifique o nome e a localização do projeto e clique em OK.
No Explorador de Soluções, faça duplo clique no ficheiro CustomLayout.xaml para chamar o XAML designer. O XAML designer apresenta o esquema de painel personalizado no Unified Service Desk.

Substitua o código XAML no ficheiro CustomLayout.xaml com o código fornecido no exemplo seguinte. Para tal, selecione todo o código (CTRL+T) na área de XAML (tal como é mostrado na ilustração), elimine-o e cole o código XAML fornecido na mesma localização. Isto é efectuado para alterar a localização do painel de expansão da esquerda para a direita.

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

No Explorador de Soluções, clique com o botão direito do rato no ficheiro CustomLayout.xaml e clique em Ver Código para adicionar o código subjacente ao XAML. Isto abre o ficheiro CustomLayout.xaml.cs.
Atualize a definição do método NotifyContextChange adicionando o código seguinte.
```
if (context.Count != 0)
{
   RightExpander.IsExpanded = true;
}
else
{ 
   RightExpander.IsExpanded = false;
}
```
O código verifica se existem sessões ativas no Unified Service Desk e apresenta (expande) ou oculta (fecha) automaticamente o painel de expansão.

Esta é a definição do método NotifyContextChange atualizada.
Guarde o projeto e compile-o (Criar > Criar Solução) para verificar se é criado com êxito.

Nota

Tenha em atenção o nome da classe utilizada para compilar o esquema de painel personalizado no ficheiro CustomLayout.xaml.cs. Neste caso, é CustomLayout. Irá necessitar destas informações no passo seguinte.

Testar o esquema de painel personalizado

Após a compilação do projeto com êxito, testa o esquema de painel personalizado. O teste contém duas partes: definir o controlo alojado do esquema de painel personalizado no servidor e iniciar sessão no Unified Service Desk no servidor utilizando a aplicação cliente com a assemblagem de código personalizado no diretório do cliente.

Definir o controlo alojado de esquema de painel personalizado no servidor

Iniciar sessão no Microsoft Dynamics CRM.
Na barra de navegação, escolha Microsoft Dynamics CRM e seleccione Definições.
Escolha Definições > Unified Service Desk > Controlos Alojados.
Escolha NOVO e especifique valores no ecrã Novo Controlo Alojado conforme apresentado aqui.

Nota

URI da Assemblagem é o nome da assemblagem e o Tipo de Assemblagem é o nome do ficheiro de assemblagem (dll) seguinte por por um ponto (.) e seguida pelo nome da classe no projeto do Visual Visual Studio. Neste exemplo, o nome da assemblagem é MyUSDCustomPanelLayout e o nome da classe é CustomLayout, que é o nome de classe predefinida quando cria um esquema de painel personalizado.
Guarde o controlo alojado.

Executar o cliente do Unified Service Desk para trabalhar com o esquema de painel personalizado

Copie o ficheiro de assemblagem (dll) que contém a definição do controlo alojado personalizado a partir da pasta de depuração do projecto do Visual Studio para o diretório da aplicação do Unified Service Desk que é, por predefinição, c:\Program Files\Microsoft Dynamics CRM USD\USD.
Execute o cliente do Unified Service Desk para ligar ao servidor do CRM.
Quando iniciar sessão com êxito, verá o esquema de painel personalizado sem o painel de expansão do lado esquerdo. O painel de expansão expansor está agora no lado direito.
Escolha Procurar na barra de ferramentas e selecione um registo para apresentar numa sessão. Neste caso, selecione Contactos na janela Procurar e escolha Maria Campbell (Exemplo). O painel direito é apresentado automaticamente para apresentar os dados de sessão, scripting de agente e outras informações associadas sobre o registo do contacto.
Feche a sessão clicando na cruz no separador de sessão na parte superior e o painel direito irá fechar automaticamente.

Nota

No caso das múltiplas sessões, o painel direito continuará a ser apresentado até que tenha fechado todos os separadores de sessão.

Consulte Também

Conceitos

Apresentar controlos alojados no esquema de painel personalizado
Painéis, tipos de painel, e esquemas de painel no Unified Service Desk

Unified Service Desk
Send comments about this topic to Microsoft.
© 2015 Microsoft. All rights reserved.