Paneles, tipos del panel y diseños de panel en Unified Service Desk
Unified Service Desk para Dynamics 365 usa paneles para mostrar controles hospedados de varios tipos. Los diferentes tipos de paneles predefinidos están disponibles en Unified Service Desk para admitir diversas opciones de diseño, como diseño tabulado, diseño de portada y diseño apilado. Defina la organización de estos paneles en la pantalla principal de Unified Service Desk mediante el uso de un control hospedado Diseño de panel. Más información: Diseño de panel (control hospedado)
Paneles de Unified Service Desk
Cuando crea un control hospedado, tiene que especificar el panel que lo mantendrá en el campo Mostrar grupo de la página Nuevo control hospedado. Para la mayoría de los tipos de control hospedado, Unified Service Desk rellena automáticamente un valor del panel en el campo Mostrar grupo. Por ejemplo, MainPanel se usa para un tipo de control hospedado Página de CRM y ToolbarPanel se usa para el tipo de control hospedado Contenedor de la barra de herramientas.
Los paneles predefinidos siguientes no están disponibles en Unified Service Desk.
| Panel | Descripción |
|---|---|
| MainPanel | El área de trabajo principal en la parte inferior derecha. |
| AboutPanel | El área en la esquina superior derecha. Este panel muestra Configuración, Depuración, Acerca de, y cualquier otra opción configurada. |
| ChatPanel | La ubicación típica de la ventana de chat. Se encuentra bajo el control de script del agente. |
| HiddenPanel | Un panel no visible usado normalmente para componente sin una interfaz de usuario (UI). |
| LeftPanel1 | Un panel justo bajo WorkflowPanel a la izquierda. |
| LeftPanel2 | Un panel justo bajo LeftPanel1 a la izquierda. |
| LeftPanelFill | Un panel justo bajo LeftPanel2. Este panel se amplía para llenar el resto del área disponible hasta el borde inferior del panel izquierdo. |
| RightPanel | Un panel situado en la parte derecha. |
| CtiPanel * | Un panel situado en la parte superior derecha, es la ubicación predeterminada de controles de softphone. Se trata de un panel de pila de modo que se pueda agregar más de un control y se muestren unos junto a otros. |
| SessionExplorerPanel * | Un panel situado justo bajo las pestañas de sesión donde se suelen mostrar las líneas de sesión. |
| WorkflowPanel * | Un panel situado justo bajo SessionExplorerPanel y suele contener el control de scripts de agente. |
| ToolbarPanel * | Un panel en la parte de arriba del todo a la derecha del logotipo de Unified Service Desk y normalmente contiene la barra de herramientas. |
| RibbonPanel | Para uso interno. |
| StatusPanel * | Un panel especial situado en la barra de estado en la parte inferior de la aplicación. |
* Estos paneles se reservan normalmente para fines especiales. Por tanto, su uso deberá evitarse a menos que se requiera.
También puede asignar métodos abreviados de teclado para los paneles de forma que los agentes de servicio al cliente puedan acceder directamente al panel en la aplicación cliente utilizando solo el teclado. Más información: Métodos abreviados de teclado para paneles
Tipos de panel en Unified Service Desk
Unified Service Desk proporciona los siguientes tipos de paneles predefinidos para admitir diferentes opciones de diseño:
| Tipo de panel | Descripción |
|---|---|
| USDTabPanel | Este tipo de panel contiene un control de pestaña. Cada control hospedado se carga en una de las pestañas. El nombre de la pestaña muestra el valor especificado en el campo Nombre para mostrar de un control hospedado. Si no se especifica un nombre para mostrar para un control hospedado, el nombre del control hospedado se mostrará como el nombre de la pestaña. El control/encabezado de la pestaña se muestra para este tipo de panel si uno o varios controles hospedados están en él. |
| USDStackPanel | Este tipo de panel apila controles hospedados en modo horizontal o vertical de forma similar a un panel de pila en Windows Presentation Foundation (WPF). Estos pueden ser útiles para barras de herramientas o barras de estado, etc. Este tipo de panel se deriva de StackPanel, que admite una propiedad Orientación. Esta orientación debe definirse en el XAML para definir de qué forma debe apilarse los controles hospedados. |
| USDDeckTabPanel | Si hay un único control hospedado en el panel, las pestañas no se muestran. Las pestañas de un control de pestaña se muestran si hay dos o más controles en este panel. Este control es el mismo que el USDTabPanel, pero hay un estilo en los temas predeterminados que ocultará las pestañas en la parte superior, solo cuando se cargue un control. |
| USDCollapsePanel | Es el mismo que el USDTabPanel pero se define un estilo en los temas predeterminados que contraerá automáticamente este tipo del panel para que deje de ocupar espacio en la interfaz de usuario, si no se cargan controles hospedados en ella. |
| USDFloatingPanel | El escritorio predeterminado proporciona una instancia de este tipo de panel. Cuando se especifica “FloatingPanel” para un control hospedado, se usa este tipo de panel. Normalmente no especificaría este tipo de panel en el diseño personalizado. No obstante, se expone en el caso de que haya una razón para usarlo. |
| USDFloatingToolPanel | Este tipo de panel crea una ventana de herramientas para cada control hospedado cargado en él. El escritorio predeterminado proporciona una instancia de este tipo de panel. Cuando se especifica “FloatingToolPanel” para un control hospedado, se usa este tipo de panel. Normalmente no especificaría este tipo de panel en el diseño personalizado. No obstante, se expone en el caso de que haya una razón para usarlo. |
| USDPopUpPanel | Este tipo de panel permite que el contenido del control hospedado se sitúe con el puntero sobre la vista principal. |
También puede usar estos tipos predefinidos del panel para crear un tipo de panel personalizado en Unified Service Desk. Más información: Crear un tipo de panel personalizado
Diseños de en Unified Service Desk
Use un diseño de panel para definir la organización de paneles en la pantalla del cliente de Unified Service Desk. Un diseño de panel se define mediante un control hospedado Diseño de panel. Más información: Diseño de panel (control hospedado)
El diseño siguiente describe el tipo Panel principal estándar del diseño de panel (también conocido como diseño del panel estándar) en Unified Service Desk.
Nota
Si no crea ningún diseño de panel en la configuración de Unified Service Desk, el diseño de panel estándar se usa automáticamente para mostrar paneles y controles en la aplicación cliente.
El área de aplicación completa de la ventana principal se define como un panel mismo, y se denomina MainWorkArea. Cuando define el tipo XAML o tipo User-Defined del diseño de panel, se usa MainWorkArea como el valor del panel para el campo Grupo de visualización.
Dado que los diseños de panel son controles hospedados, puede usar un diseño de panel en cualquier lugar donde hubiera configurado un control hospedado. Un uso común de esto es definir una vista dividida en el área del panel principal. Puede mostrar una vista de lista mostrando una lista de cuentas en la parte superior y una vista de detalle en la parte inferior. Puede mostrar un diseño de panel completo en el panel flotante y mostrarlo en un segundo monitor. Para obtener más información sobre el uso de los paneles flotantes, consulte Configurar la característica de introducir y extraer para artículos de knowledge base.
Unified Service Desk proporciona los siguientes tipos de diseños de panel:
Panel principal estándar El diseño de panel estándar proporciona el diseño tradicional incluida una serie de paneles en el área contraíble de la izquierda y un área de trabajo principal a la derecha. Lo siguiente es el XAML usado para definir el diseño del panel. También puede encontrar este XAML en el SDK de User Interface Integration (UII).
Descargue el paquete y extráigalo para ver el archivo SamplePanelLayout.xaml y su contenido en el directorio "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>
</Expander>
<Grid Grid.Column="1"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="79*" />
<RowDefinition Height="125*"/>
</Grid.RowDefinitions>
<USD:USDCollapsePanel x:Name="RibbonPanel"
Grid.Row="0"
Visibility="Collapsed"
AutomationProperties.Name="Ribbon Panel"
Focusable="True"
Margin="1"
ClipToBounds="False"
SnapsToDevicePixels="True"/>
<USD:USDTabPanel x:Name="MainPanel"
Grid.Row="1"
AutomationProperties.Name="Main Panel"
Grid.RowSpan="2"
USD:PanelNavigation.KeyboardShortcut="CTRL+7"/>
</Grid>
<Expander Grid.Column="2"
Style="{DynamicResource StretchExpanderStyle}"
ExpandDirection="Right"
x:Name="RightPanelExpander"
IsExpanded="false"
BorderBrush="White" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Grid Style="{DynamicResource LeftPanelGrid}" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions >
<USD:USDTabPanel x:Name="RightPanel"
AutomationProperties.Name="Right Panel"
Grid.Row="0"
USD:PanelNavigation.KeyboardShortcut="CTRL+8"/>
<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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Background="#cccccc"
Grid.Row="0" >
<TextBlock Text="Article Preview"
HorizontalAlignment="Center"
Margin="10,0,0,0" />
</Border>
<Border BorderThickness="1"
Grid.Row="1"
BorderBrush="#cccccc"
Background="White">
<ContentControl Margin="0,0,0,0"
Name="PopupContainer"
Style="{DynamicResource USDContentControlStyle}"/>
</Border>
</Grid>
</USD:USDPopupPanel>
</Grid>
</ScrollViewer>
</Expander>
</Grid>
</Grid>
<StatusBar Grid.Row="2"
Style="{DynamicResource StatusBarStyle}">
<StatusBarItem>
<TextBlock x:Name="lblStatusBarClock"
Text="00:00 AM/PM"
Style="{DynamicResource StatusBarClockLabelStyle}"/>
</StatusBarItem>
<Separator Style="{DynamicResource StatusBarSeparatorStyle}"/>
<StatusBarItem >
<USD:USDStackPanel x:Name="StatusPanel"
Orientation="Horizontal"
AutomationProperties.Name="Status Panel"
Margin="1"/>
</StatusBarItem>
</StatusBar>
</Grid>
</USD:PanelLayoutBase>
Panel principal de cinta Sólo para uso interno.
División horizontal Este es un diseño especial usado normalmente en MainPanel como control hospedado. Contiene un divisor con un panel superior y un panel inferior. Normalmente se usa para mostrar una vista de lista en la parte superior y una vista de detalle en la parte inferior similar a Outlook. Se definen dos paneles en este diseño.
| Nombre del panel | Descripción |
|---|---|
| TopPanel | Este es el panel que se muestra en la parte superior. Se define como: USDDeckTabPanel |
| BottomPanel | Este es el panel que se muestra en la parte inferior. Se define como: USDDeckTabPanel |
Este panel admite las siguientes acciones:
| Acción | Descripción |
|---|---|
| SetTopPanelHeight | Esta acción se puede usar para establecer el alto del panel superior. Admite dos parámetros, alto y tipo. El tipo puede ser cualquiera de los siguientes valores: - Automático: ajustado para organizar los componentes dentro - Píxel: el número de píxeles - Estrella: ocupa el espacio restante La interpretación del parámetro de alto depende de este valor de tipo. Para obtener más información, consulte la Documentación de Windows Presentation Foundation (WPF). |
| SetBottomPanelHeight | Esta acción se puede usar para establecer el alto del panel inferior. Admite dos parámetros, alto y tipo. El tipo puede ser cualquiera de los siguientes valores: - Automático: ajustado para organizar los componentes dentro - Píxel: el número de píxeles - Estrella: ocupa el espacio restante La interpretación del parámetro de alto depende de este valor de tipo. Para obtener más información, vea la documentación sobre WPF. |
División vertical Este es un diseño especial que contiene un divisor vertical con un panel izquierdo y un panel derecho.
| Nombre del panel | Descripción |
|---|---|
| LeftPanel | Este es el panel que se muestra en la parte izquierda. Se define como: USDDeckTabPanel |
| RightPanel | Este es el panel que se muestra en la parte derecha. Se define como: USDDeckTabPanel |
Este panel admite las siguientes acciones:
| Acción | Descripción |
|---|---|
| SetLeftPanelWidth | Esta acción se puede usar para establecer el ancho del panel izquierdo. Admite dos parámetros, ancho y tipo. El tipo puede ser cualquiera de los siguientes valores: - Automático: ajustado para organizar los componentes dentro - Píxel: el número de píxeles - Estrella: ocupa el espacio restante La interpretación del parámetro de ancho depende de este valor de tipo. Para obtener más información, vea la documentación sobre WPF. |
| SetRightPanelWidth | Esta acción se puede usar para establecer el ancho del panel derecho. Admite dos parámetros, ancho y tipo. El tipo puede ser cualquiera de los siguientes valores: - Automático: ajustado para organizar los componentes dentro - Píxel: el número de píxeles - Estrella: ocupa el espacio restante La interpretación del parámetro de ancho depende de este valor de tipo. Para obtener más información, vea la documentación sobre WPF. |
diseño Una de las formas más rápidas de crear un diseño personalizado. Sin embargo, esta opción no admite código subyacente. Como resultado, si no es posible describir el diseño sin código, no puede usar esta opción y debe usar en su lugar la opción Definido por el usuario. Para obtener más información, consulte Código subyacente y XAML en WPF.
Aquí mostramos un ejemplo de un diseño de 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>
Definido por el usuario Esta opción le permite crear un control hospedado con código subyacente para obtener todas las características de .NET en la administración del diseño.
Para obtener más información sobre qué tipos de panel se pueden definir y usar en un panel definido por el usuario, consulte Tipos de panel.
Para obtener información acerca de cómo crear un diseño de panel personalizado, consulte Crear un diseño de panel personalizado.
Vea también
Uso de tipos de panel y diseños de panel personalizadosMétodos abreviados de teclado para paneles