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. # Vistas: plantillas de interfaz de usuario para personalizar el espacio de trabajo de un agente en Amazon Connect Las *vistas* son plantillas de interfaz de usuario que puede utilizar para personalizar el espacio de trabajo de su agente. Por ejemplo, puede usar las vistas para mostrar los atributos de contacto a un agente, proporcionar formularios para introducir los códigos de disposición, proporcionar notas de llamadas y presentar páginas de interfaz de usuario para guiar a los agentes a través de las step-by-step guías. Amazon Connect incluye un conjunto de vistas a las que puede añadir el espacio de trabajo de su agente, y también puede crear sus propias vistas utilizando nuestro público APIs. Al configurar las vistas en flujos mediante el bloque [Mostrar vista](show-view-block.md), puede definir contenidos estáticos y dinámicos para cada vista. El contenido de una vista específica se compone de tres elementos clave: una plantilla, un esquema de entrada y acciones. **sugerencia** Para obtener la mejor experiencia de asignación de datos, recomendamos utilizar la opción **Establecer JSON** del bloque [Mostrar vista](show-view-block.md). Se puede hacer referencia a todos los espacios de nombres de los flujos en el bloque **Mostrar vista**, incluido `$.External`, por lo que podrá compartir datos de sistemas externos con su agente en cualquier vista que cree. Puede combinar datos de Amazon Connect y de otros orígenes para crear una interfaz de usuario consolidada para su agente. # Vistas personalizadas en el espacio de trabajo del agente de Amazon Connect Con APIs él puede crear sus propios recursos de visualización. El recurso View incluye CloudFormation y CloudTrail soporte para etiquetar. ## Ejemplo de la API de vistas **Descripción de vista** Esta vista anida dos tarjetas en un contenedor y coloca un botón de omisión a su derecha. **Comando de la CLI** ``` aws connect create-view --name CustomerManagedCardsNoContainer \ --status PUBLISHED --content file://view-content.json \ --instance-id $INSTANCE_ID --region $REGION ``` **view-content.json** ``` { "Template": "Actions": ["CardSelected", "Skip"] } ``` **Plantilla JSON (sin cadena)** ``` { "Head": { "Title": "CustomerManagedFormView", "Configuration": { "Layout": { "Columns": ["10", "2"] // Default column width for each component is 12, which is also the width of the entire view. } } }, "Body": [ { "_id": "card-container", "Type": "Container", "Props": {}, "Content": [ { "_id": "cafe_card", "Type": "Card", "Props": { "Id": "cafe-card", "Heading": "Cafe Card", "Icon": "Cafe", "Status": "Status Field", "Description": "This is the cafe card.", "Action": "CardSelected" // Note that these actions also appear in the view-content.json file. }, "Content": [] }, { "_id": "no_icon_card", "Type": "Card", "Props": { "Id": "NoIconCard", "Heading": "$.NoIconCardHeading", "Status": "Status Field", "Description": "This is the icon card.", "Action": "CardSelected" // Note that these actions also appear in the view-content.json file. }, "Content": [] } ] }, { "_id": "button", "Type": "Button", "Props": { "Action": "Skip" }, // Note that these actions also appear in the view-content.json file. "Content": ["Skip"] } ] } ``` ## La vista **Entradas** `$.NoIconCardHeading` indica que es necesaria una entrada para el campo `NoIconCardHeading` para renderizar la vista. Supongamos que `NoIconCardHeading` se establece en `No Icon Card`. **Apariencia** ![\[Imagen de la tarjeta de vista del espacio de trabajo de agente.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/view-resources-custom-the-view.png) ## Ejemplo de salida de vista Las vistas presentan dos datos principales: la `Action` realizada y los datos de `Output`. Cuando se utiliza una vista con el [bloque Mostrar vista](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html), `Action` representa una ramificación y los datos de `Output` se establecen al atributo de flujo `$.Views.ViewResultData`, como se menciona en la documentación del bloque Mostrar vista. **Escenario 1: elegir la tarjeta **Café**** ``` "Action": "CardSelected" "Output": { "Heading": "CafeCard", "Id": "CafeCard" } ``` **Escenario 2: elegir el botón **Omitir**** ``` "Action": "Skip" "Output": { "action": "Button" } ``` ## Ejemplo de salida de Vista de formulario Al utilizar la **vista administrada por AWS (vista de formulario)**, el resultado de los datos del formulario aparecerá debajo. *FormData* ``` { FormData: { email: "a@amazon.com" } } ``` Puede acceder a los datos del bloque Mostrar vista, por ejemplo `$.Views.ViewResultData.FormData.email`. Cuando se utiliza la **Vista personalizada (con el componente de formulario)**, el resultado de los datos del formulario aparece directamente debajo de la salida. ``` { email: "a@amazon.com" } ``` Puede acceder a los datos del bloque Mostrar vista; por ejemplo `$.Views.ViewResultData.email`. # Configurar vistas AWS administradas para el espacio de trabajo de un agente en Amazon Connect Amazon Connect 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. ![\[La vista de detalles, con el encabezado de página, la descripción y cuatro ejemplos con atributos.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/details-view-page-heading-sq.png) **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. ![\[La vista de lista, un elemento de lista con enlace y dos elementos sin enlaces.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/list-view-column-sq.png) **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. ![\[La vista de formulario con campos de ubicación y fecha como ejemplos.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/form-view-sq.png) **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. ![\[La vista de confirmación, una marca de verificación y un texto para confirmar el alquiler del vehículo.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/confirmation-view-check-sq.png) **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. ![\[Un conjunto de seis tarjetas.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/solve-view-sq.png) *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. ![\[Tarjeta abierta que muestra los detalles de una reserva.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/card-view-sq.png) **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:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. 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" } } ``` ------ # Cómo personalizar las vistas del espacio de trabajo del agente de Amazon Connect mediante HTML y JSX Puede personalizar el aspecto de los diseños de los recursos de Vista. Para ello, utilice HTML o JSX cuando pase parámetros de entrada al bloque [Mostrar vista](show-view-block.md). Complete los siguientes pasos para ver un ejemplo sencillo de cómo puede aprovechar HTML o JSX con un bloque [Mostrar vista](show-view-block.md). 1. Cree un flujo con un bloque [Mostrar vista](show-view-block.md). 1. Abra la página Propiedades del bloque [Mostrar vista](show-view-block.md). 1. En **Vista**, seleccione **Detalles** en la lista desplegable. 1. En la sección **Configuración**, elija **Establecer JSON**. 1. Copie y pegue el siguiente código JSON. Este código muestra cómo se procesan las expresiones HTML o JSX. **Ejemplo de HTML** ``` { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" } ``` **Ejemplo de JSX** ``` { "TemplateString": "Please provide an introduction to the customers. Ask them how their day is going Things to say: Hello, how are you today? My name is Bob, who am I speaking to?" } ```