Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
# Configurar vistas AWS administradas para el espacio de trabajo de un agente en Amazon Connect
Connect Customer incluye un conjunto de vistas a las que puede añadir el espacio de trabajo de su agente. Consulte lo siguiente para obtener detalles sobre cómo configurar las diferentes vistas AWS administradas.
------
#### [ Detail view ]
La **Vista de detalles** sirve para mostrar información al agente y proporcionarle una lista de acciones que puede llevar a cabo. Un uso común de la **Vista de detalles** es mostrar al agente una pantalla emergente al inicio de una llamada.
+ Las acciones de esta vista se pueden usar para permitir que un agente continúe con el siguiente paso de una step-by-step guía o se pueden usar para invocar flujos de trabajo completamente nuevos.
+ **Secciones** es el único componente obligatorio. Es donde puede configurar el cuerpo de la página que desea mostrar a su agente.
+ Esta vista admite componentes opcionales como el. **AttributeBar**
[Documentación](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all) interactiva para **Vista de detalles**
En la siguiente imagen se muestra un ejemplo de una **Vista de detalles**. Tiene un encabezado de página, una descripción y cuatro ejemplos.
**Secciones**
+ El contenido puede ser una cadena estática, una TemplateString o un par clave-valor. Puede ser un único punto de datos o una lista. Para obtener más información, consulte [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) o [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section).
**AttributeBar (Opcional)**
+ Opcional, si se proporciona, mostrará la barra de atributos en la parte superior de la vista.
+ Es una lista de objetos con las propiedades **obligatorias: etiqueta**, **valor** y propiedades opcionales **LinkType**ResourceId****, **copiable** y **URL**. Para obtener más información, consulte [Atributo](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**puede ser externo o conectar una aplicación, como una funda.
+ Cuando es *externo*, el usuario puede navegar a una nueva página del navegador, que está configurada con **Url**.
+ Si es *así, el* usuario puede acceder a un nuevo detalle del caso en el espacio de trabajo del agente, que está configurado con ResourceId.
+ **Copyable** permite a los usuarios copiarlo ResourceId seleccionándolo con su dispositivo de entrada.
**Back (opcional)**
+ Opcional, pero obligatorio si no se incluye ninguna acción. Si se proporciona, se mostrará el enlace de navegación hacia atrás.
+ Es un objeto con una *etiqueta* que controlará lo que se muestra en el texto del enlace.
**Heading (opcional)**
+ Opcional; si se proporciona, mostrará el texto como título.
**Description (opcional)**
+ Opcional; si se proporciona, mostrará la descripción debajo del título.
**Actions (opcional)**
+ Opcional. Si se proporciona, mostrará una lista de acciones en la parte inferior de la página.
**Ejemplo de entrada**
```
{
"AttributeBar": [
{"Label": "Example", "Value": "Attribute"},
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
],
"Back": {
"Label": "Back"
},
"Heading": "Hello world",
"Description": "This view is showing off the wonders of a detail page",
"Sections": [{
"TemplateString": "This is an intro paragraph"
}, "abc"],
"Actions": ["Do thing!", "Update thing 2!"],
}
```
**Ejemplo de resultados**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Action 2"
}
}
```
------
#### [ List view ]
La **vista de lista** sirve para mostrar la información como una lista de elementos con títulos y descripciones. Los elementos también pueden actuar como enlaces con acciones adjuntas. Opcionalmente, también es compatible con la navegación inversa estándar y el encabezado de contexto persistente.
[Documentación](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all) interactiva para **Vista de lista**
En la siguiente imagen se muestra un ejemplo de una vista de lista. Tiene una columna con tres elementos.
**Items**
+ Obligatorio, mostrará estos elementos como una lista.
+ Cada elemento puede tener un encabezado, una descripción, un icono y un identificador.
+ Todas las propiedades son opcionales.
+ Cuando se define el ID, la salida incluirá el valor como parte de la salida.
**AttributeBar (Opcional)**
+ Opcional, si se proporciona, mostrará la barra de atributos en la parte superior de la vista.
+ Es una lista de objetos con las propiedades **obligatorias: etiqueta**, **valor** y propiedades opcionales **LinkType**ResourceId****, **copiable** y **URL**. Para obtener más información, consulte [Atributo](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**puede ser externo o conectar una aplicación, como una funda.
+ Cuando es *externo*, el usuario puede navegar a una nueva página del navegador, que está configurada con **Url**.
+ Si es *así, el* usuario puede acceder a un nuevo detalle del caso en el espacio de trabajo del agente, que está configurado con ResourceId.
+ **Copyable** permite a los usuarios copiarlo ResourceId seleccionándolo con su dispositivo de entrada.
**Back (opcional)**
+ Opcional, pero obligatorio si no se incluye ninguna acción. Si se proporciona, se mostrará el enlace de navegación hacia atrás.
+ Es un objeto con una *etiqueta* que controlará lo que se muestra en el texto del enlace.
**Heading (opcional)**
+ Opcional; si se proporciona, mostrará el texto como título.
**SubHeading (Opcional)**
+ Opcional; si se proporciona, mostrará el texto como título de la lista.
**Ejemplo de datos de entrada**
```
{
"AttributeBar": [
{ "Label": "Example", "Value": "Attribute" },
{ "Label": "Example 2", "Value": "Attribute 2" },
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Back": {
"Label": "Back"
},
"Heading": "José may be contacting about...",
"SubHeading": "Optional List Title",
"Items": [
{
"Heading": "List item with link",
"Description": "Optional description here with no characters limit. We can just wrap the text.",
"Icon": "School",
"Id": "Select_Car"
},
{
"Heading": "List item not a link",
"Icon": "School",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item not a link and no image",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item no image and with link",
"Description": "Optional description here with no characters limit."
}
]
}
```
**Ejemplo de datos de salida**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Select_Car"
}
}
```
------
#### [ Form view ]
La **vista de formulario** le permite proporcionar a sus agentes campos de entrada para recopilar los datos necesarios y enviarlos a los sistemas de backend. Esta vista consta de varias *secciones* con un estilo de *sección* predefinido con un encabezado. El cuerpo consta de varios campos de entrada dispuestos en un formato de columna o cuadrícula.
[Documentación](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all) interactiva para **Vista de formulario**
En la siguiente imagen se muestra un ejemplo de vista de formulario para una reserva de alquiler de automóviles. Tiene campos de ubicación y fecha.
**Secciones**
+ Ubicación en la **Vista de formulario** donde se encuentran los campos de entrada y los campos de visualización.
+ **SectionProps**
+ **Heading**
+ Título de la sección
+ **Tipo**
+ Tipo de sección
+ FormSection (formularios que gestionan las entradas del usuario) o DataSection (muestran una lista de etiquetas y valores)
+ **Items**
+ Lista de datos basada en el tipo. Cuando `Type` es `DataSection`, los datos deben ser atributos. Si `Type` es `FormSection`, los datos deben ser componentes de formulario.
+ **isEditable**
+ Muestra el botón de edición en el encabezado cuando se proporciona cuando el tipo de sección es `DataSection`.
+ Booleano
**Wizard (opcional)**
+ Se muestra **ProgressTracker**en el lado izquierdo de la vista.
+ Cada elemento puede tener un encabezado, una descripción y un elemento opcional.
+ El encabezado es obligatorio
**Back (opcional)**
+ Es un objeto o una cadena con una etiqueta que controlará lo que se muestra en el texto del enlace.
**Next (opcional)**
+ Esta acción se utiliza cuando el paso no es el último.
+ Es un objeto (FormActionProps) o una cadena. Para obtener más información, consulte [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Cancelar (opcional)**
+ Esta acción se utiliza cuando el paso no es el primero.
+ Es un objeto (FormActionProps) o una cadena. Para obtener más información, consulte [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Previous (opcional)**
+ Esta acción se utiliza cuando el paso no es el primero.
+ Es un objeto (FormActionProps) o una cadena. Para obtener más información, consulte [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Edit (opcional)**
+ Esta acción se muestra cuando el tipo de sección es `DataSection`.
+ Es un objeto (FormActionProps) o una cadena. Para obtener más información, consulte [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**AttributeBar (Opcional)**
+ Opcional, si se proporciona, mostrará la barra de atributos en la parte superior de la vista.
+ Es una lista de objetos con las propiedades **obligatorias: etiqueta**, **valor** y propiedades opcionales **LinkType**ResourceId****, **copiable** y **URL**. Para obtener más información, consulte [Atributo](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**puede ser externo o conectar una aplicación, como una funda.
+ Cuando es *externo*, el usuario puede navegar a una nueva página del navegador, que está configurada con **Url**.
+ Si es *así, el* usuario puede acceder a un nuevo detalle del caso en el espacio de trabajo del agente, que está configurado con ResourceId.
+ **Copyable** permite a los usuarios copiarlo ResourceId seleccionándolo con su dispositivo de entrada.
**Heading (opcional)**
+ Cadena que aparece como el título de la página.
**SubHeading (Opcional)**
+ Mensaje secundario para la página.
**ErrorText (Opcional)**
+ Opcional, muestra los mensajes de error del servidor.
+ ErrorProps; Cadena
**Ejemplo de datos de entrada**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back Home"
},
"Next": {
"Label": "Confirm Reservation",
"Details": {
"endpoint": "awesomecustomer.com/submit",
}
},
"Cancel": {
"Label": "Cancel"
},
"Heading": "Modify Reservation",
"SubHeading": "Cadillac XT5",
"ErrorText": {
"Header": "Modify reservation failed",
"Content": "Internal Server Error, please try again"
},
"Sections": [{
"_id": "pickup",
"Type": "FormSection",
"Heading": "Pickup Details",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Type": "FormInput",
"Fluid": true,
"InputType": "text",
"Label": "Location",
"Name": "pickup-location",
"DefaultValue": "Seattle"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-10",
"Name": "pickup-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "13:00",
"Name": "pickup-time"
}]
}]
}, {
"_id": "dropoff",
"Heading": "Drop off details",
"Type": "FormSection",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Label": "Location",
"Type": "FormInput",
"Fluid": true,
"DefaultValue": "Lynnwood",
"Name": "dropoff-location"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-15",
"Name": "dropoff-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "01:00",
"Name": "dropoff-time"
}]
}]
}]
}
```
**Ejemplo de datos de salida**
```
{
Action: "Submit",
ViewResultData: {
FormData: {
"dropoff-day": "2022-10-15",
"dropoff-location": "Lynnwood",
"dropoff-time": "01:00",
"pickup-day": "2022-10-10",
"pickup-location": "Seattle",
"pickup-time": "13:00"
},
StepName:"Pickup and drop off"
}
}
```
------
#### [ Confirmation view ]
La **Vista de confirmación** es una página que se muestra a los usuarios una vez que se ha enviado un formulario o se ha completado una acción. En esta plantilla prediseñada, puede proporcionar un resumen de lo que ha sucedido, los próximos pasos y las instrucciones. La **Vista de confirmación** admite una barra de atributos persistente, un icono o imagen, un título y un subtítulo, además de un botón de navegación para volver al inicio.
[Documentación](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all) interactiva para **Vista de confirmación**
En la siguiente imagen se muestra un ejemplo de una confirmación.
**Next**
+ Obligatorio.
+ Botón de acción para la siguiente acción
+ Etiqueta: etiqueta de cadena para el botón de navegación.
**AttributeBar (Opcional)**
+ Opcional, si se proporciona, mostrará la barra de atributos en la parte superior de la vista.
+ Es una lista de objetos con las propiedades **obligatorias: etiqueta**, **valor** y propiedades opcionales **LinkType**ResourceId****, **copiable** y **URL**. Para obtener más información, consulte [Atributo](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**puede ser externo o conectar una aplicación, como una funda.
+ Cuando es *externo*, el usuario puede navegar a una nueva página del navegador, que está configurada con **Url**.
+ Si es *así, el* usuario puede acceder a un nuevo detalle del caso en el espacio de trabajo del agente, que está configurado con ResourceId.
+ **Copyable** permite a los usuarios copiarlo ResourceId seleccionándolo con su dispositivo de entrada.
**Heading (opcional)**
+ Cadena que aparece como el título de la página.
**SubHeading (Opcional)**
+ Mensaje secundario para la página.
**Graphic (opcional)**
+ Muestra una imagen
+ Objeto con la siguiente clave:
+ Include: booleano, si es true, el gráfico se incluirá en la página.
**Ejemplo de datos de entrada**
```
{
"AttributeBar": [
{ "Label": "Attribute1", "Value": "Value1" },
{ "Label": "Attribute2", "Value": "Value2" },
{ "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Next": {
"Label": "Go Home"
},
"Graphic": {
"Include": true
},
"Heading": "I have updated your car rental reservation for pickup on July 22.",
"SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?",
}
```
**Ejemplo de datos de salida**
```
{
"Action": "Next",
"ViewResultData": {
"Label": "Go Home"
}
}
```
------
#### [ Cards view ]
La **Vista de tarjetas** le permite guiar a su agente presentándole una lista de temas entre los que elegir tan pronto como acepte el contacto.
[Documentación](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all) interactiva para **Vista de tarjetas**
*Presente las tarjetas a sus agentes.* En la siguiente imagen se muestra un ejemplo de seis tarjetas que se presentan al agente: una para hacer una nueva reserva y las otras para revisar las reservas de los próximos viajes.
*Cuando los agentes eligen una carta, se muestra más información.* La siguiente imagen muestra una tarjeta abierta que presenta los detalles de una reserva.
**Secciones**
+ Es una lista de objetos con un resumen y un detalle. Debe proporcionarse para crear la tarjeta y el detalle.
+ Consta de resumen y detalle. Para obtener más información, consulte [Resumen y detalle](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all).
**AttributeBar (Opcional)**
+ Opcional, si se proporciona, mostrará la barra de atributos en la parte superior de la vista.
+ Es una lista de objetos con las propiedades **obligatorias: etiqueta**, **valor** y propiedades opcionales **LinkType**ResourceId****, **copiable** y **URL**. Para obtener más información, consulte [Atributo ](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**puede ser externo o conectar una aplicación, como una funda.
+ Cuando es *externo*, el usuario puede navegar a una nueva página del navegador, que está configurada con **Url**.
+ Si es *así, el* usuario puede acceder a un nuevo detalle del caso en el espacio de trabajo del agente, que está configurado con ResourceId.
+ **Copyable** permite a los usuarios copiarlo ResourceId seleccionándolo con su dispositivo de entrada.
**Heading (opcional)**
+ Cadena que aparece como el título de la página
**Back (opcional)**
+ Es un objeto o una cadena con una etiqueta que controlará lo que se muestra en el texto del enlace. Para obtener más información, consulte [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**NoMatchFound (Opcional)**
+ Es una cadena que se muestra en un botón que está debajo de Tarjetas. Para obtener más información, consulte [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Ejemplo de datos de entrada**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back"
},
"Heading": "Customer may be contacting about...",
"Cards": [{
"Summary": {
"Id": "lost_luggage",
"Icon": "plus",
"Heading": "Lost luggage claim"
},
"Detail": {
"Heading": "Lost luggage claim",
"Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes",
"Sections": {
"TemplateString": "Steps:- Customer provides incident information
- Customer provides receipts and agrees with amount
- Customer receives reimbursement
"
},
"Actions": [
"Start a new claim",
"Something else"
]
}
},
{
"Summary": {
"Id": "car_rental",
"Icon": "Car Side View",
"Heading": "Car rental - New York",
"Status": "Upcoming Sept 17, 2022"
},
"Detail": {
"Heading": "Car rental - New York",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "trip_reservation",
"Icon": "Suitcase",
"Heading": "Trip to Mexico",
"Status": "Upcoming Aug 15, 2022",
"Description": "Flying from New York to Cancun, Mexico"
},
"Detail": {
"Heading": "Trip to Mexico",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "fligh_reservation",
"Icon": "Airplane",
"Heading": "Flight to France",
"Status": "Upcoming Dec 5, 2022",
"Description": "Flying from Miami to Paris, France"
},
"Detail": {
"Heading": "Flight to France",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "flight_refund",
"Icon": "Wallet Closed",
"Heading": "Refund flight to Atlanta",
"Status": "Refunded July 10, 2022"
},
"Detail": {
"Heading": "Refund trip to Atlanta",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "book_experience",
"Icon": "Hot Air Balloon",
"Heading": "Book an experience",
"Description": "Top experience for european travellers"
},
"Detail": {
"Heading": "Book an experience",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
}],
"NoMatchFound": {
"Label": "Can't find match?"
}
}
```
**Ejemplo de datos de salida**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Update the trip"
}
}
```
------