

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.

# Configuración de campos dinámicos en el creador de interfaces de usuario sin código en Amazon Connect
<a name="no-code-ui-builder-properties-dynamic-fields"></a>

En este tema se explica cómo configurar campos dinámicos en los componentes para mostrar datos de tiempo de ejecución en lugar de valores codificados al crear interfaces de agente y cliente mediante la interfaz de usuario del creador sin código en Amazon Connect.

Puede haber situaciones en las que desee que los datos que se muestran a un agente o cliente se rellenen de forma dinámica en lugar de codificarlos. Por ejemplo, si va a crear una pantalla emergente, quizá quiera mostrar el nombre y el ID del perfil del cliente. Necesita que los datos sean dinámicos porque los valores de estos campos cambian de un contacto a otro.

Para rellenar un campo de componente de forma dinámica, haga lo siguiente:

1. Abra la pestaña de propiedades de dicho componente.

1. Seleccione el icono dinámico (el icono del rayo) que aparece junto al campo que quiere que sea dinámico.

Los campos más comunes que requieren valores dinámicos son:
+ El campo **Valor** para los campos de visualización.
+ El **DefaultValue**campo de las entradas del formulario.

Técnicamente, se puede determinar dinámicamente en tiempo de ejecución cualquier campo que esté visible y oculto para un agente. Por eso, todos los campos de la pestaña **Propiedades** se pueden configurar como dinámicos (el icono de un rayo).

Por ejemplo, observe el **AttributesBar**componente en la siguiente imagen. 

![Un componente de la barra de atributos, con el valor establecido en dinámico.](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png)

+ La etiqueta del atributo 1 se define estáticamente como **Nombre del cliente**.
+ El **Valor** del atributo se establece como dinámico (se selecciona el icono del rayo).

Con esta configuración, el valor de **AttributesBar**viene determinado por los datos que se transfieren al [Mostrar vista](show-view-block.md) bloque en tiempo de ejecución. 

Cuando un campo se establece como dinámico, su valor estático se sustituye por una referencia dinámica. Aparece una sección **Datos de muestra** debajo del campo. Esta sección se utiliza para definir los [datos de muestra](no-code-ui-builder-sample-data.md). 

La referencia dinámica refleja la estructura de datos que espera el bloque [Mostrar vista](show-view-block.md) al configurar los datos de tiempo de ejecución. Por ejemplo, considere el **valor** del atributo 1 del [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)componente, que se muestra en la siguiente imagen.

![El valor del atributo 1 del AttributesBar componente cuando es dinámico.](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png)

+  Cuando se establece en dinámico, el campo pasa a `$.AttributeBar_1.Attributes[0].Value` donde `AttributeBar_1` es el ID del componente.
+ Esto indica que, en el bloque [Mostrar vista](show-view-block.md), el campo `AttributeBar_1` debe recibir un objeto. 
+ El objeto contiene una matriz `Attributes` en la que se espera que el primer elemento (`[0]`) sea un objeto con un campo `Value`.

Puede editar las referencias dinámicas para mayor claridad o reutilizarlas. Las referencias dinámicas se pueden compartir entre varios campos y componentes de la vista. Por ejemplo, en la siguiente imagen del [AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)componente, actualizamos su referencia dinámica a`$.myAttributeValue`. El bloque [Mostrar vista](show-view-block.md) ahora tiene un campo `myAttributeValue` que espera una entrada de cadena.

![Las propiedades del AttributeBar componente, un valor dinámico.](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)


**importante**  
El tipo de referencia dinámica debe coincidir con el tipo de campo esperado. Por ejemplo, no puede usar una referencia dinámica basada en cadenas en un campo booleano. En la siguiente imagen se muestra un ejemplo de mensaje de error cuando la referencia dinámica no coincide.  

![El panel Personalizar con un mensaje de error porque la referencia dinámica no coincide con el tipo esperado en el campo.](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)


También tiene la opción de establecer todas las propiedades de un atributo en un componente como dinámico. En la siguiente imagen, todo lo relacionado con este atributo, incluida la etiqueta, se determina en el tiempo de ejecución en función de los valores transferidos al bloque [Mostrar vista](show-view-block.md). En este caso, **Nombre del cliente** ahora es un ejemplo de datos que puede utilizar para hacerse una idea de lo que verá el agente cuando utilice una guía. Sin embargo, el agente no puede ver este valor.

![El panel Personalización con Nombre del cliente como dato de muestra.](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png)


Para algunos componentes, por ejemplo [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes), también puede establecer todas las propiedades del componente como dinámicas. Por ejemplo, con el AttributeBar, puede configurar el icono dinámico (el rayo) para hacer que todos los atributos sean dinámicos. Los atributos vienen determinados por lo que se transfiere al bloque [Mostrar vista](show-view-block.md) en el tiempo de ejecución. 

![Todas las propiedades de AttributeBar están configuradas como dinámicas.](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)
