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.
# Documentación del constructor
Los siguientes temas contienen información para ayudar a los usuarios de App Studio a crear, editar y publicar aplicaciones.
**Topics**
+ [Tutoriales](tutorials.md)
+ [Cómo crear tu aplicación de App Studio con IA generativa](generative-ai.md)
+ [Creación, edición y eliminación de aplicaciones](applications-create-edit-delete.md)
+ [Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md)
+ [Páginas y componentes: crea la interfaz de usuario de tu aplicación](pages-components-ux.md)
+ [Automatizaciones y acciones: defina la lógica empresarial de su aplicación](automations.md)
+ [Entidades y acciones de datos: configura el modelo de datos de tu aplicación](data.md)
+ [Parámetros de página y automatización](paramters.md)
+ [Uso JavaScript para escribir expresiones en App Studio](expressions.md)
+ [Dependencias de datos y consideraciones de tiempo](data-dependencies-timing-considerations.md)
+ [Creación de una aplicación con varios usuarios](builder-collaboration.md)
+ [Ver o actualizar la configuración de seguridad del contenido de tu aplicación](app-content-security-settings-csp.md)
# Tutoriales
**Topics**
+ [Cree una aplicación de resumen de texto de IA con Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interacción con Amazon Simple Storage Service con componentes y automatizaciones](automations-s3.md)
+ [Invocar funciones Lambda en una aplicación de App Studio](tutorial-lambda.md)
# Cree una aplicación de resumen de texto de IA con Amazon Bedrock
En este tutorial, creará una aplicación en App Studio que utiliza Amazon Bedrock para proporcionar resúmenes concisos de las entradas de texto de los usuarios finales. La aplicación contiene una interfaz de usuario sencilla en la que los usuarios pueden introducir cualquier texto que deseen resumir. Pueden ser notas de reuniones, contenido de artículos, resultados de investigaciones o cualquier otra información textual. Una vez que los usuarios introduzcan el texto, pueden pulsar un botón para enviarlo a Amazon Bedrock, que lo procesará con el modelo Claude 3 Sonnet y devolverá una versión resumida.
**Contents**
+ [Requisitos previos](#tutorial-conversational-bedrock-prerequisites)
+ [Paso 1: Crear y configurar un rol de IAM y un conector de App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Paso 2: Crear una aplicación](#tutorial-conversational-bedrock-steps-create-application)
+ [Paso 3: Crea y configura una automatización](#tutorial-conversational-bedrock-steps-create-automation)
+ [Paso 4: Crear páginas y componentes](#tutorial-conversational-bedrock-steps-user-interface)
+ [Cambie el nombre de la página predeterminada](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Añada componentes a la página](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configure los componentes de la página](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Paso 5: Publicar la aplicación en el entorno **de pruebas**](#tutorial-conversational-bedrock-steps-publish)
+ [(Opcional) Limpieza](#tutorial-conversational-bedrock-steps-cleanup)
## Requisitos previos
Antes de empezar, revise y complete los siguientes requisitos previos:
+ Acceso a AWS App Studio. Ten en cuenta que debes tener el rol de administrador para crear un conector en este tutorial.
+ Opcional: [AWS Conceptos de App Studio](concepts.md) revísalo y familiarízate con los conceptos importantes de App Studio. [Tutorial: Comience a crear desde una aplicación vacía](getting-started-tutorial-empty.md)
## Paso 1: Crear y configurar un rol de IAM y un conector de App Studio
Para proporcionar acceso a App Studio a los modelos de Amazon Bedrock, debe:
1. Activa los modelos de Amazon Bedrock que quieras usar en tu aplicación. Para este tutorial, utilizará **Claude 3 Sonnet**, así que asegúrese de habilitar ese modelo.
1. Cree un rol de IAM con los permisos adecuados para Amazon Bedrock.
1. Cree un conector de App Studio con la función de IAM que se utilizará en su aplicación.
Consulta las [Conéctese a Amazon Bedrock](connectors-bedrock.md) instrucciones detalladas y vuelve a este tutorial después de haber seguido los pasos y creado el conector.
## Paso 2: Crear una aplicación
Utilice el siguiente procedimiento para crear una aplicación vacía en App Studio que integrará en la aplicación de resumen de texto.
1. Inicia sesión en App Studio.
1. Ve al centro de creación y selecciona **\$1 Crear aplicación**.
1. Elija **Empezar desde cero**.
1. En el campo **Nombre de la aplicación**, proporciona un nombre para la aplicación, como**Text Summarizer**.
1. Si se te pide que selecciones fuentes de datos o un conector, selecciona **Omitir** para los fines de este tutorial.
1. Elija **Paso siguiente** para continuar.
1. (Opcional): mira el tutorial en vídeo para obtener una descripción general rápida de la creación de aplicaciones en App Studio.
1. Selecciona **Editar aplicación**, que te llevará al estudio de aplicaciones.
## Paso 3: Crea y configura una automatización
Usted define la lógica y el comportamiento de una aplicación de App Studio en *las automatizaciones.* Las automatizaciones constan de pasos individuales conocidos como *acciones*, *parámetros* que se utilizan para transferir datos a la acción desde otros recursos y un *resultado* que pueden utilizar otras automatizaciones o componentes. En este paso, creará una automatización que gestione la interacción con Amazon Bedrock con lo siguiente:
+ Entradas: un parámetro para pasar la entrada de texto del usuario a la automatización.
+ Acciones: una acción de **GenAI Prompt** que envía el texto introducido a Amazon Bedrock y devuelve el resumen del texto de salida.
+ Resultados: un resultado de automatización que consiste en el resumen procesado de Amazon Bedrock, que se puede utilizar en su aplicación.
**Para crear y configurar una automatización que envíe un mensaje a Amazon Bedrock y procese y devuelva un resumen**
1. Seleccione la pestaña **Automatizaciones** en la parte superior del lienzo.
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **InvokeBedrock** y luego presione **Entrar**.
1. Añada un parámetro a la automatización que se utilizará para pasar la entrada de texto del usuario a la automatización que se utilizará en la solicitud a Amazon Bedrock realizando los siguientes pasos:
1. En el lienzo, en el cuadro de parámetros, selecciona **\$1 Añadir**.
1. En **Name (Nombre)**, escriba **input**.
1. En **Descripción**, introduzca cualquier descripción, por ejemplo**Text to be sent to Amazon Bedrock**.
1. En **Tipo**, seleccione **Cadena**.
1. Seleccione **Añadir** para crear el parámetro.
1. Añada una acción de **GenAI Prompt** realizando los siguientes pasos:
1. **En el panel de la derecha, selecciona Acciones.**
1. Selecciona **GenAI Prompt** para añadir una acción.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Cambie el nombre de la acción a **PromptBedrock** seleccionando el icono del lápiz, introduciendo el nombre y pulsando Entrar.
1. En **Conector**, seleccione el conector que se creó en[Paso 1: Crear y configurar un rol de IAM y un conector de App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. En **Modelo**, elija el modelo de Amazon Bedrock que desee utilizar para procesar la solicitud. En este tutorial, elegirá **Claude 3.5 Sonnet**.
1. En la **solicitud de usuario**, escriba`{{params.input}}`. Representa el `input` parámetro que creó anteriormente y contendrá el texto introducido por los usuarios de la aplicación.
1. En la línea de **comandos** del sistema, introduzca las instrucciones de la línea de comandos del sistema que desee enviar a Amazon Bedrock. Para este tutorial, introduzca lo siguiente:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Elija la **configuración de la solicitud** para ampliarla y actualice los siguientes campos:
+ En **Temperatura**, ingresa`0`. La temperatura determina la aleatoriedad o la creatividad del resultado en una escala de 0 a 10. Cuanto más alto sea el número, más creativa será la respuesta.
+ En **Max Tokens**, ingresa `4096` para limitar la longitud de la respuesta.
1. La salida de esta automatización será el texto resumido; sin embargo, de forma predeterminada, las automatizaciones no crean salidas. Configure la automatización para crear una salida de automatización realizando los siguientes pasos:
1. En el menú de navegación de la izquierda, selecciona la **InvokeBedrock**automatización.
1. En el menú **Propiedades** de la derecha, en **Salida**, selecciona **\$1** Añadir.
1. En **Salida**, introduzca**\$1\$1results.PromptBedrock.text\$1\$1**. Esta expresión devuelve el contenido de la `processResults` acción.
## Paso 4: Crear páginas y componentes
En App Studio, cada página representa una pantalla de la interfaz de usuario (UI) de la aplicación con la que los usuarios interactuarán. Dentro de estas páginas, puedes agregar varios componentes, como tablas, formularios, botones y más, para crear el diseño y la funcionalidad deseados.
### Cambie el nombre de la página predeterminada
La aplicación de resumen de texto de este tutorial solo contendrá una página. Las aplicaciones recién creadas vienen con una página predeterminada, así que cambiarás el nombre de esa página en lugar de añadirla.
**Para cambiar el nombre de la página predeterminada**
1. En el menú de navegación de la barra superior, selecciona **Páginas**.
1. En el panel de la izquierda, selecciona **Página1** y elige el panel de **Propiedades** en el panel de la derecha.
1. **Elija el icono del lápiz, introduzca **TextSummarizationTool** y pulse Entrar.**
1. En la **etiqueta de navegación**, introduzca**TextSummarizationTool**.
### Añada componentes a la página
Para este tutorial, la aplicación de resumen de texto tiene una página que contiene los siguientes componentes:
+ Un componente **de entrada de texto** que los usuarios finales utilizan para introducir un mensaje para resumirlo.
+ Un componente de **botón** que se utiliza para enviar el mensaje a Amazon Bedrock.
+ Un componente de **área de texto** que muestra el resumen de Amazon Bedrock.
Añada un componente **de entrada de texto** a la página que los usuarios utilizarán para introducir un mensaje de texto para resumirlo.
**Para añadir un componente de entrada de texto**
1. En el panel de **componentes** de la derecha, localice el componente **de entrada de texto** y arrástrelo al lienzo.
1. Elija la entrada de texto en el lienzo para seleccionarla.
1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:
1. Selecciona el icono del lápiz para cambiarle el nombre a la entrada de texto. **inputPrompt**
1. En **Etiqueta**, ingresa**Prompt**.
1. En **Placeholder**, introduzca**Enter text to be summarized**.
Ahora, añada un componente **Button** que los usuarios elijan para enviar el mensaje a Amazon Bedrock.
**Para añadir un componente de botón**
1. En el panel de **componentes** de la derecha, localice el componente de **botón** y arrástrelo al lienzo.
1. Elija el botón en el lienzo para seleccionarlo.
1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:
1. Selecciona el icono del lápiz para cambiarle el nombre al botón. **sendButton**
1. En **Etiqueta del botón**, ingresa**Send**.
Ahora, añada un componente de **área de texto** que muestre el resumen devuelto por Amazon Bedrock.
**Para añadir un componente de área de texto**
1. En el panel de **componentes** de la derecha, localice el componente del **área de texto** y arrástrelo al lienzo.
1. Elija el área de texto en el lienzo para seleccionarla.
1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:
1. Selecciona el icono del lápiz para cambiarle el nombre al botón. **textSummary**
1. En **Etiqueta**, ingresa**Summary**.
### Configure los componentes de la página
Ahora que la aplicación contiene una página con componentes, el siguiente paso es configurar los componentes para que tengan el comportamiento adecuado. Para configurar un componente, como un botón, para que realice acciones cuando se interactúe con él, debe añadirle un *activador*. En este tutorial, en el caso de la aplicación, añadirá dos activadores al `sendButton` botón para hacer lo siguiente:
+ El primer disparador envía el texto del `textPrompt` componente a Amazon Bedrock para su análisis.
+ El segundo activador muestra el resumen devuelto por Amazon Bedrock en el `textSummary` componente.
**Para añadir un disparador que envíe el mensaje a Amazon Bedrock**
1. Elija el botón del lienzo para seleccionarlo.
1. En el panel de **propiedades** del lado derecho, en la sección **Activadores**, selecciona **\$1 Añadir**.
1. Selecciona **Invoke Automation.**
1. Elija el único **InvokeAutomationactivador** que se creó para configurarlo.
1. En **Nombre de la acción**, introduzca**invokeBedrockAutomation**.
1. En **Invoke Automation**, seleccione la **InvokeBedrock**automatización que se creó anteriormente.
1. En el cuadro de parámetros, en el parámetro **de entrada** que se creó anteriormente, introduzca**\$1\$1ui.inputPrompt.value\$1\$1**, que pasa el contenido al componente de entrada de `inputPrompt` texto.
1. Seleccione la flecha izquierda situada en la parte superior del panel para volver al menú de propiedades del componente.
Ahora que ha configurado un disparador que invoca la automatización para enviar una solicitud a Amazon Bedrock cuando se hace clic en el botón, el siguiente paso es configurar un segundo activador que muestre los resultados en el componente. `textSummary`
**Para añadir un disparador que muestre los resultados de Amazon Bedrock en el componente de área de texto**
1. En el panel de **propiedades** del lado derecho del botón, en la sección **Activadores**, selecciona **\$1** Añadir.
1. Seleccione **Ejecutar la acción del componente.**
1. Elija el activador **Runcomponentaction1** que se creó para configurarlo.
1. En **Nombre de la acción**, introduzca. **setTextSummary**
1. En **Componente**, seleccione el componente **TextSummary**.
1. En **Acción**, seleccione **Establecer valor**.
1. En **Definir valor** en, introduzca**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Paso 5: Publicar la aplicación en el entorno **de pruebas**
Por lo general, cuando se crea una aplicación, se recomienda previsualizarla para ver su aspecto y realizar las primeras pruebas de su funcionalidad. Sin embargo, dado que las aplicaciones no interactúan con los servicios externos en el entorno de vista previa, deberá publicar la aplicación en el entorno de pruebas para poder probar el envío de solicitudes y la recepción de respuestas de Amazon Bedrock.
**Para publicar su aplicación en el entorno de pruebas**
1. En la esquina superior derecha del creador de aplicaciones, selecciona **Publicar**.
1. Agrega una descripción de la versión para el entorno de pruebas.
1. Revise y seleccione la casilla de verificación relativa al SLA.
1. Elija **Iniciar**. La publicación puede tardar hasta 15 minutos.
1. (Opcional) Cuando estés listo, puedes dar acceso a otras personas seleccionando **Compartir** y siguiendo las instrucciones. Para obtener más información sobre cómo compartir aplicaciones de App Studio, consulte[Compartir las aplicaciones publicadas](application-share.md).
Tras probar la aplicación, vuelve a seleccionar **Publicar** para promocionarla en el entorno de producción. Tenga en cuenta que las aplicaciones del entorno de producción no están disponibles para los usuarios finales hasta que se compartan. Para obtener más información sobre los distintos entornos de aplicaciones, consulte[Entornos de aplicaciones](applications-publish.md#application-environments).
## (Opcional) Limpieza
Ya ha completado correctamente el tutorial y ha creado una aplicación de resumen de texto en App Studio con Amazon Bedrock. Puede seguir utilizando la aplicación o puede limpiar los recursos que se crearon en este tutorial. La siguiente lista contiene una lista de los recursos que se deben limpiar:
+ El conector Amazon Bedrock creado en App Studio. Para obtener más información, consulte [Visualización, edición y eliminación de conectores](viewing-deleting-connectors.md).
+ La aplicación de resumen de texto de App Studio. Para obtener más información, consulte [Eliminación de una aplicación de](applications-delete.md).
+ El rol de IAM creado en la consola de IAM. Para obtener más información, consulte [Eliminar roles o perfiles de instancia](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) en la Guía del *AWS Identity and Access Management usuario*.
+ Si ha solicitado acceso al modelo para usar Claude 3 Sonnet y desea revertir el acceso, consulte [Administrar el acceso a los modelos de bases de Amazon Bedrock en la Guía del usuario](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) de *Amazon Bedrock*.
# Interacción con Amazon Simple Storage Service con componentes y automatizaciones
Puede invocar varias operaciones de Amazon S3 desde una aplicación de App Studio. Por ejemplo, puede crear un panel de administración sencillo para gestionar los usuarios y los pedidos y mostrar el contenido multimedia de Amazon S3. Si bien puede invocar cualquier operación de Amazon S3 mediante la AWS acción **Invoke**, hay cuatro acciones específicas de Amazon S3 que puede añadir a las automatizaciones de su aplicación para realizar operaciones comunes en buckets y objetos de Amazon S3. Las cuatro acciones y sus operaciones son las siguientes:
+ **Poner objeto**: utiliza la `Amazon S3 PutObject` operación para añadir un objeto a un bucket de Amazon S3.
+ **Get Object**: utiliza la `Amazon S3 GetObject` operación para recuperar un objeto de un bucket de Amazon S3.
+ **Listar objetos**: utiliza la `Amazon S3 ListObjects` operación para enumerar los objetos de un bucket de Amazon S3.
+ **Eliminar objeto**: utiliza la `Amazon S3 DeleteObject` operación para eliminar un objeto de un bucket de Amazon S3.
Además de las acciones, hay un componente de **carga en S3** que puede añadir a las páginas de las aplicaciones. Los usuarios pueden usar este componente para elegir un archivo para cargar, y el componente requiere `Amazon S3 PutObject` cargar el archivo en el depósito y la carpeta configurados. En este tutorial se utilizará este componente en lugar de la acción de automatización independiente **Put Object**. (La acción independiente debe usarse en escenarios más complejos que impliquen una lógica o acciones adicionales que deban tomarse antes o después de la carga).
## Requisitos previos
En esta guía se supone que has completado el siguiente requisito previo:
1. Creé y configuré un bucket de Amazon S3, una función y una política de IAM y un conector de Amazon S3 para integrar correctamente Amazon S3 con App Studio. Para crear un conector, debe tener la función de administrador. Para obtener más información, consulte [Connect to Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Cree una aplicación vacía
Cree una aplicación vacía para utilizarla a lo largo de esta guía realizando los siguientes pasos.
**Para crear una aplicación vacía**
1. En el panel de navegación, elija **Mis aplicaciones**.
1. Seleccione **\$1 Crear aplicación**.
1. En el cuadro de diálogo **Crear aplicación**, asigne un nombre a la aplicación, elija **Empezar desde cero** y, a continuación, **Siguiente**.
1. En el cuadro de diálogo **Conectarse a datos existentes**, elija **Omitir** para crear la aplicación.
1. Seleccione **Editar aplicación** para ir al lienzo de su nueva aplicación, donde podrá usar componentes, automatizaciones y datos para configurar el aspecto y el funcionamiento de la aplicación.
## Crea páginas
Cree tres páginas en su aplicación para recopilar o mostrar información.
**Para crear páginas**
1. Si es necesario, selecciona la pestaña **Páginas** en la parte superior del lienzo.
1. En la barra de navegación de la izquierda, hay una sola página que se creó con tu aplicación. Selecciona **\$1 Añadir** dos veces para crear dos páginas más. El panel de navegación debe mostrar tres páginas en total.
1. Actualice el nombre de la página **Page1** realizando los siguientes pasos:
1. Elija el icono de puntos suspensivos y elija Propiedades de la **página.**
1. En el menú **Propiedades** de la derecha, selecciona el icono del lápiz para editar el nombre.
1. Escriba **FileList** y luego presione **Entrar**.
1. Repita los pasos anteriores para actualizar la segunda y la tercera página de la siguiente manera:
+ Cambie el nombre de la **página 2** a. **UploadFile**
+ **Cambie el nombre de Page3 a.** **FailUpload**
**Ahora, tu aplicación debería tener tres páginas denominadas, y **FileList**UploadFile**FailUpload******, que se muestran en el panel de páginas de la izquierda.**
A continuación, creará y configurará las automatizaciones que interactúan con Amazon S3.
## Cree y configure automatizaciones
Cree las automatizaciones de su aplicación que interactúan con Amazon S3. Utilice los siguientes procedimientos para crear las siguientes automatizaciones:
+ Una automatización de **GetFiles** que enumera los objetos de su bucket de Amazon S3, que se utilizará para rellenar un componente de tabla.
+ Una automatización de **DeleteFile** que elimina un objeto de su bucket de Amazon S3, que se utilizará para añadir un botón de eliminación a un componente de la tabla.
+ Una automatización de **ViewFile** que obtiene un objeto de su bucket de Amazon S3 y lo muestra, que se utilizará para mostrar más detalles sobre un único objeto seleccionado de un componente de la tabla.
### Cree una automatización `getFiles`
Cree una automatización que muestre una lista de los archivos de un bucket de Amazon S3 específico.
1. Elija la pestaña **Automatizaciones** en la parte superior del lienzo.
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **getFiles** y luego presione **Entrar**.
1. Para añadir una acción **de lista de objetos**, realice los siguientes pasos:
1. En el panel de la derecha, selecciona **Acciones**.
1. Seleccione **Listar objetos** para añadir una acción. La acción debe tener un nombre`ListObjects1`.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Para **Connector**, elija el conector Amazon S3 que creó a partir de los requisitos previos.
1. Para la **configuración**, introduzca el siguiente texto y *bucket\$1name* sustitúyalo por el bucket que creó en los requisitos previos:
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**nota**
Puede usar el `Prefix` campo para limitar la respuesta a los objetos que comiencen por la cadena especificada.
1. El resultado de esta automatización se utilizará para rellenar un componente de tabla con objetos de su bucket de Amazon S3. Sin embargo, de forma predeterminada, las automatizaciones no crean resultados. Configure la automatización para crear una salida de automatización mediante los siguientes pasos:
1. En el menú de navegación de la izquierda, selecciona la automatización de **GetFiles**.
1. En el menú **Propiedades** de la derecha, en Salida de **automatización, selecciona **\$1** Añadir salida**.
1. Para **Salida**, introduzca**\$1\$1results.ListObjects1.Contents\$1\$1**. Esta expresión devuelve el contenido de la acción y ahora se puede utilizar para rellenar un componente de la tabla.
### Crea una automatización `deleteFile`
Cree una automatización que elimine un objeto de un bucket de Amazon S3 específico.
1. **En el panel de **automatizaciones** de la izquierda, selecciona \$1 Añadir.**
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **deleteFile** y luego presione **Entrar**.
1. Añada un parámetro de automatización, que se utiliza para pasar datos a una automatización, realizando los siguientes pasos:
1. En el menú **Propiedades** de la derecha, en **Parámetros de automatización**, seleccione **\$1 Agregar**.
1. Seleccione el icono del lápiz para editar el parámetro de automatización. Actualice el nombre del parámetro a **fileName** y pulse **Entrar**.
1. Añada una acción de **eliminación de objeto** mediante los siguientes pasos:
1. En el panel de la derecha, selecciona **Acciones**.
1. Seleccione **Eliminar objeto** para añadir una acción. La acción debe tener un nombre`DeleteObject1`.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Para **Connector**, elija el conector Amazon S3 que creó a partir de los requisitos previos.
1. Para la **configuración**, introduzca el siguiente texto y *bucket\$1name* sustitúyalo por el bucket que creó en los requisitos previos:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Cree una automatización `viewFile`
Cree una automatización que recupere un único objeto de un bucket de Amazon S3 específico. Más adelante, configurará esta automatización con un componente de visor de archivos para mostrar el objeto.
1. En el panel de **automatizaciones** de la izquierda, selecciona **\$1** Añadir.
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **viewFile** y luego presione **Entrar**.
1. Añada un parámetro de automatización, que se utiliza para pasar datos a una automatización, realizando los siguientes pasos:
1. En el menú **Propiedades** de la derecha, en **Parámetros de automatización**, seleccione **\$1 Agregar**.
1. Seleccione el icono del lápiz para editar el parámetro de automatización. Actualice el nombre del parámetro a **fileName** y pulse **Entrar**.
1. Añada una acción **Obtener objeto** realizando los siguientes pasos:
1. En el panel de la derecha, selecciona **Acciones**.
1. Selecciona **Obtener objeto** para añadir una acción. La acción debe tener un nombre`GetObject1`.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Para **Connector**, elija el conector Amazon S3 que creó a partir de los requisitos previos.
1. Para la **configuración**, introduzca el siguiente texto y *bucket\$1name* sustitúyalo por el bucket que creó en los requisitos previos:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. De forma predeterminada, las automatizaciones no crean salidas. Configure la automatización para crear una salida de automatización mediante los siguientes pasos:
1. En el menú de navegación de la izquierda, selecciona la automatización **ViewFile**.
1. En el menú **Propiedades** de la derecha, en Salida de **automatización, elija **\$1** Añadir salida**.
1. Para **Salida**, introduzca**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. Esta expresión devuelve el contenido de la acción.
**nota**
Puede leer la respuesta de `S3 GetObject` de las siguientes maneras:
`transformToWebStream`: Devuelve una secuencia, que debe consumirse para recuperar los datos. Si se usa como salida de automatización, la automatización se encarga de ello y la salida se puede utilizar como fuente de datos de un componente de visor de imágenes o PDF. También se puede utilizar como entrada para otra operación, por ejemplo`S3 PutObject`.
`transformToString`: Devuelve los datos sin procesar de la automatización y debe usarse en una JavaScript acción si los archivos contienen contenido de texto, como datos JSON. Debe esperarse, por ejemplo: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Devuelve una matriz de enteros de 8 bits sin signo. Esta respuesta cumple el propósito de una matriz de bytes, que permite el almacenamiento y la manipulación de datos binarios. Debe esperarse, por ejemplo: `await results.GetObject1.Body.transformToByteArray();`
A continuación, añadirá componentes a las páginas que creó anteriormente y los configurará con sus automatizaciones para que los usuarios puedan usar su aplicación para ver y eliminar archivos.
## Agrega y configura los componentes de la página
Ahora que ha creado las automatizaciones que definen la lógica empresarial y la funcionalidad de su aplicación, creará los componentes y conectará ambos.
### Añada componentes a la página **FileList**
La **FileList**página que creó anteriormente se usará para mostrar una lista de archivos en el bucket de Amazon S3 configurado y más detalles sobre cualquier archivo que se elija de la lista. Para ello, debe hacer lo siguiente:
1. Cree un componente de tabla para mostrar la lista de archivos. Configurará las filas de la tabla para que se rellenen con el resultado de la automatización de **GetFiles** que creó anteriormente.
1. Cree un componente de visor de PDF para mostrar un solo PDF. Configurará el componente para ver un archivo seleccionado de la tabla, utilizando la automatización **ViewFile** que creó anteriormente para extraer el archivo de su depósito.
**Para añadir componentes a la página **FileList****
1. Seleccione la pestaña **Páginas** en la parte superior del lienzo.
1. En el panel de **páginas** de la izquierda, selecciona la **FileList**página.
1. En la página de **componentes** de la derecha, busca el componente **Tabla** y arrástralo hasta el centro del lienzo.
1. Elija el componente de tabla que acaba de añadir a la página.
1. **En el menú **Propiedades** de la derecha, selecciona el menú desplegable **Fuente** y selecciona Automatización.**
1. **Selecciona el menú desplegable **Automatización** y selecciona la automatización GetFiles.** La tabla utilizará la salida de la automatización de **GetFiles** como contenido.
1. Añada una columna para rellenarla con el nombre del archivo.
1. En el menú **Propiedades** de la derecha, junto a **Columnas**, selecciona **\$1 Añadir**.
1. Seleccione el icono de flecha situado a la derecha de la columna **Columna 1** que se acaba de añadir.
1. En **Etiqueta de columna**, cambie el nombre de la columna a. **Filename**
1. En **Valor**, introduzca **\$1\$1currentRow.Key\$1\$1**.
1. Seleccione el icono de flecha situado en la parte superior del panel para volver al panel principal de **Propiedades**.
1. Añada una acción de tabla para eliminar el archivo de una fila.
1. En el menú **Propiedades** de la derecha, junto a **Acciones**, selecciona **\$1 Añadir**.
1. En **Acciones**, cambie el nombre del **botón** a. **Delete**
1. Seleccione el icono de flecha situado a la derecha de la acción **Eliminar** cuyo nombre se acaba de cambiar.
1. En **Al hacer clic**, selecciona **\$1 Añadir acción** y selecciona **Invocar la automatización**.
1. Elija la acción que se agregó para configurarla.
1. En **Nombre de la función**, introduzca **DeleteRecord**.
1. En **Invoke automation**, seleccione**deleteFile**.
1. En el cuadro de texto del parámetro, introduzca**\$1\$1currentRow.Key\$1\$1**.
1. En **Valor**, introduzca **\$1\$1currentRow.Key\$1\$1**.
1. En el panel de la derecha, elija **Componentes** para ver el menú de componentes. Hay dos opciones para mostrar los archivos:
+ Un **visor de imágenes** para ver archivos con una `.jpg` extensión `.png``.jpeg`, o.
+ Un componente de **visor de PDF** para ver archivos PDF.
En este tutorial, añadirá y configurará el componente de **visor de PDF**.
1. Añada el componente de **visor de PDF**.
1. En la página de **componentes** de la derecha, busque el componente del **visor de PDF** y arrástrelo al lienzo, debajo del componente de la tabla.
1. Elija el componente del **visor de PDF** que se acaba de añadir.
1. **En el menú **Propiedades** de la derecha, selecciona el menú desplegable **Fuente** y selecciona Automatización.**
1. **Selecciona el menú desplegable **Automatización** y selecciona la automatización de ViewFile.** La tabla utilizará la salida de la automatización de **ViewFile** como contenido.
1. En el cuadro de texto del parámetro, introduzca**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. En el panel de la derecha, también hay un campo de **nombre de archivo**. El valor de este campo se utiliza como encabezado del componente del visor de PDF. Introduzca el mismo texto que en el paso anterior:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### Agregue componentes a la **UploadFile**página
La **UploadFile**página contendrá un selector de archivos que se puede utilizar para seleccionar y cargar un archivo en el bucket de Amazon S3 configurado. Añadirá el componente de **carga de S3** a la página, que los usuarios pueden utilizar para seleccionar y cargar un archivo.
1. En el panel de **páginas** de la izquierda, selecciona la **UploadFile**página.
1. En la página de **componentes** de la derecha, busca el componente de **carga de S3** y arrástralo hasta el centro del lienzo.
1. Elija el componente de carga de S3 que acaba de añadir a la página.
1. En el menú **Propiedades** de la derecha, configure el componente:
1. En el menú desplegable **Connector**, seleccione el conector Amazon S3 que se creó en los requisitos previos.
1. En **Bucket**, introduce el nombre de tu bucket de Amazon S3.
1. En **Nombre del archivo**, escriba **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
1. En **Tamaño máximo de archivo**, **5** introdúcelo en el cuadro de texto y asegúrate de que **MB** esté seleccionado en el menú desplegable.
1. En la sección **Activadores**, añade las acciones que se ejecutan después de que las cargas se realicen correctamente o no. Para ello, sigue estos pasos:
Para añadir una acción que se ejecute después de que las cargas se hayan realizado correctamente:
1. **En caso de éxito**, selecciona **\$1 Añadir acción** y selecciona **Navegar**.
1. Elija la acción que se agregó para configurarla.
1. En **Tipo de navegación**, elija **Página**.
1. **En Navegar hasta**, elija**FileList**.
1. Seleccione el icono de flecha situado en la parte superior del panel para volver al panel principal de **Propiedades**.
Para añadir una acción que se ejecute después de que las cargas no se realicen correctamente:
1. **En caso de error**, selecciona **\$1 Añadir acción** y selecciona **Navegar**.
1. Elija la acción que se agregó para configurarla.
1. En **Tipo de navegación**, elija **Página**.
1. **En Navegar hasta**, elija**FailUpload**.
1. Seleccione el icono de flecha situado en la parte superior del panel para volver al panel principal de **Propiedades**.
### Añada componentes a la **FailUpload**página
La **FailUpload**página es una página sencilla que contiene un cuadro de texto que informa a los usuarios de que se ha producido un error en la carga.
1. En el panel de **páginas** de la izquierda, selecciona la **FailUpload**página.
1. En la página de **componentes** de la derecha, busca el componente de **texto** y arrástralo al centro del lienzo.
1. Elige el componente de texto que acabas de añadir a la página.
1. En el menú **Propiedades** de la derecha, en **Valor**, introduzca**Failed to upload, try again**.
## Actualiza la configuración de seguridad de la aplicación
Todas las aplicaciones de App Studio tienen ajustes de seguridad de contenido que puedes usar para restringir contenido multimedia o recursos externos, o a qué dominios de Amazon S3 puedes cargar objetos. La configuración predeterminada es bloquear todos los dominios. Para cargar objetos a Amazon S3 desde su aplicación, debe actualizar la configuración para permitir los dominios a los que desea cargar objetos.
**Para permitir que los dominios carguen objetos en Amazon S3**
1. Seleccione la pestaña de **configuración de la aplicación**.
1. Seleccione la pestaña **Configuración de seguridad del contenido**.
1. En **Connect source**, selecciona **Permitir todas las conexiones**.
1. Seleccione **Save**.
## Próximos pasos: Obtenga una vista previa de la aplicación y publíquela para probarla
La aplicación ya está lista para ser probada. Para obtener más información sobre la vista previa y la publicación de aplicaciones, consulte[Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md).
# Invocar funciones Lambda en una aplicación de App Studio
En este tutorial, se muestra cómo conectar App Studio a Lambda e invocar funciones de Lambda desde las aplicaciones.
## Requisitos previos
En esta guía se supone que ha cumplido los siguientes requisitos previos:
1. Creó una aplicación de App Studio. Si no tiene una, puede crear una aplicación vacía para usarla en el tutorial. Para obtener más información, consulte [Creación de una aplicación de](applications-create.md).
**nota**
Si bien no necesita una función Lambda para seguir este tutorial y aprender a configurarla, puede resultarle útil disponer de una para asegurarse de que ha configurado correctamente la aplicación. [Este tutorial no contiene información sobre la creación de funciones Lambda. Para obtener más información, consulte la Guía del AWS Lambda desarrollador.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Crear un conector Lambda
Para usar las funciones de Lambda en tu aplicación de App Studio, debes usar un conector para conectar App Studio a Lambda y proporcionar acceso a tus funciones. Debe ser administrador para crear conectores en App Studio. Para obtener más información sobre la creación de conectores Lambda, incluidos los pasos para crear uno, consulte. [Connect to AWS Lambda](connectors-lambda.md)
## Cree y configure una automatización
Las automatizaciones se utilizan para definir la lógica de la aplicación y se componen de acciones. Para invocar una función Lambda en tu aplicación, primero debes agregar y configurar una acción *Invoke Lambda* a una automatización. Siga los siguientes pasos para crear una automatización y agregarle la acción *Invoke Lambda*.
1. Mientras editas la aplicación, selecciona la pestaña **Automatizaciones**.
1. Selecciona **\$1 Añadir automatización**.
1. En el menú **Acciones** de la derecha, selecciona **Invocar Lambda** para añadir el paso a la automatización.
1. Elija el nuevo paso de Lambda en el lienzo para ver y configurar sus propiedades.
1. En el menú **Propiedades** de la derecha, configure el paso realizando los siguientes pasos:
1. En **Connector**, seleccione el conector que se creó para conectar App Studio a las funciones de Lambda.
1. En **Nombre de función**, introduzca el nombre de la función Lambda.
1. En **Evento de función**, introduzca el evento que se va a pasar a la función Lambda. En la siguiente lista se proporcionan algunos ejemplos de casos de uso comunes:
+ Pasar el valor de un parámetro de automatización, como el nombre de un archivo u otra cadena: `varName: params.paramName`
+ Pasar el resultado de una acción anterior: `varName: results.actionName1.data[0].fieldName`
+ Si añade una acción de *invocar Lambda* dentro de *una* acción de bucle, puede enviar campos de cada elemento iterado de forma similar a los parámetros: `varName: currentItem.fieldName`
1. El campo de **salida simulado** se puede usar para proporcionar una salida simulada para probar la aplicación durante la vista previa, cuando los conectores no están activos.
## Configura un elemento de interfaz de usuario para ejecutar la automatización
Ahora que tiene una automatización configurada con una acción para invocar la función Lambda, puede configurar un elemento de interfaz de usuario para ejecutar la automatización. En este tutorial, creará un botón que ejecute la automatización al hacer clic en él.
**sugerencia**
También puede ejecutar automatizaciones desde otras automatizaciones con la acción *Invocar* automatización.
**Para ejecutar la automatización desde un botón**
1. Mientras editas tu aplicación, selecciona la pestaña **Páginas**.
1. En el menú de la derecha, selecciona el componente **Botón** para añadir un botón a la página.
1. Elija el nuevo botón para configurarlo.
1. En el menú de **propiedades** de la derecha, en **Disparadores**, selecciona **\$1 Añadir** y selecciona **Invocar** la automatización.
1. Elija el nuevo activador de invocación de la automatización para configurarlo.
1. En **Invoke automation**, seleccione la automatización que invoca la función Lambda y configure los parámetros que desee enviar a la automatización.
Ahora, cualquier usuario que elija este botón en su aplicación hará que se ejecute la automatización configurada.
## Próximos pasos: previsualice y publique la aplicación para probarla
La aplicación ya está lista para ser probada. Al obtener una vista previa de la aplicación en el entorno de desarrollo, los conectores no están activos, por lo que no puede probar la automatización durante la vista previa, ya que utiliza un conector para conectarse. AWS Lambda Para probar la funcionalidad de tu aplicación, que depende de los conectores, debes publicarla en el entorno de pruebas. Para obtener más información sobre la vista previa y la publicación de aplicaciones, consulte[Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md).
# Cómo crear tu aplicación de App Studio con IA generativa
AWS App Studio ofrece funciones de IA generativa integradas para acelerar el desarrollo y agilizar las tareas habituales. Puede aprovechar la IA generativa para generar y editar aplicaciones, modelos de datos, datos de muestra e incluso obtener ayuda contextual mientras crea aplicaciones.
## ¿Generar tu aplicación
Para empezar de forma acelerada, puedes generar aplicaciones completas utilizando indicaciones en lenguaje natural impulsadas por la IA. Esta capacidad le permite describir la funcionalidad deseada de la aplicación, y la IA creará automáticamente los modelos de datos, las interfaces de usuario, los flujos de trabajo y los conectores. Para obtener más información sobre cómo generar una aplicación con IA, consulte[Creación de una aplicación de](applications-create.md).
## Creación o edición de su aplicación
Mientras editas tu aplicación, puedes usar el chat para describir los cambios que deseas realizar y la aplicación se actualizará automáticamente. Puedes elegir entre los ejemplos de mensajes existentes o introducir tu propio mensaje. El chat se puede utilizar para añadir, editar y eliminar componentes compatibles, y también para crear y configurar automatizaciones y acciones. Use el siguiente procedimiento para usar la IA para editar o crear su aplicación.
**Para editar la aplicación con IA**
1. Si es necesario, edita la aplicación para ir al estudio de aplicaciones.
1. (Opcional) Seleccione la página o el componente que desee editar con AI.
1. Selecciona **Construir con IA** en la esquina inferior izquierda para abrir el chat.
1. Introduce los cambios que quieras realizar o elige uno de los ejemplos de instrucciones.
1. Revise los cambios que se van a realizar. Si desea que se realicen los cambios, elija **Confirmar**. De lo contrario, introduce otro mensaje.
1. Revise el resumen de los cambios.
## Generar sus modelos de datos
Puede generar automáticamente una entidad con campos, tipos de datos y acciones de datos en función del nombre de entidad proporcionado. Para obtener más información sobre la creación de entidades, incluida la creación de entidades mediante GenAi, consulte[Crear una entidad en una aplicación de App Studio](data-entities-create.md).
También puede actualizar una entidad existente de las siguientes maneras:
+ Añada más campos a una entidad. Para obtener más información, consulte [Añadir, editar o eliminar campos de entidad](data-entities-edit-fields.md).
+ Agregue acciones de datos a una entidad. Para obtener más información, consulte [Crear acciones de datos](data-entities-edit-data-actions.md#data-entities-data-action-add).
## Generar datos de muestra
Puede generar datos de muestra para sus entidades en función de los campos de la entidad. Esto resulta útil para probar la aplicación antes de conectar fuentes de datos externas o para probarla en el entorno de desarrollo, que no se comunica con las fuentes de datos externas. Para obtener más información, consulte [Añadir o eliminar datos de muestra](data-entities-edit-sample-data.md).
Una vez que publiques la aplicación en las fases de prueba o producción, tus conectores y fuentes de datos activos se utilizarán en esos entornos.
## Configurar acciones para los AWS servicios
Al integrarte con AWS servicios como Amazon Simple Email Service, puedes usar la IA para generar una configuración de ejemplo con campos rellenados previamente en función del servicio seleccionado. Para probarlo, en el menú **Propiedades** de una acción de automatización de **Invoke AWS**, expanda el campo **Configuración** seleccionando la flecha de doble cara. A continuación, elija **Generar un ejemplo** de configuración.
## Respuestas burlonas
Puede generar respuestas simuladas para las acciones de AWS servicio. Esto resulta útil para probar la aplicación en el entorno de desarrollo, que no se comunica con fuentes de datos externas.
## Pedir ayuda a la IA durante la construcción
En el estudio de aplicaciones, encontrarás el botón **Pedir ayuda a AI** en los recursos o propiedades compatibles. Utilícelo para obtener sugerencias contextuales, documentación y orientación relacionadas con la vista actual o el componente seleccionado. Haz preguntas generales sobre App Studio, las mejores prácticas de creación de aplicaciones o el caso de uso específico de tu aplicación para recibir información y recomendaciones personalizadas.
# Creación, edición y eliminación de aplicaciones
**Contents**
+ [Creación de una aplicación de](applications-create.md)
+ [Importación de aplicaciones](applications-import.md)
+ [Aplicaciones importables proporcionadas por App Studio](applications-import.md#app-catalog)
+ [Duplicación de aplicaciones](applications-duplicate.md)
+ [Edición o creación de una aplicación](applications-edit.md)
+ [Editar una versión de la aplicación publicada anteriormente](applications-edit-previously-published-version.md)
+ [Cambiar el nombre de una aplicación](applications-rename.md)
+ [Eliminación de una aplicación de](applications-delete.md)
# Creación de una aplicación de
Use el siguiente procedimiento para crear una aplicación en App Studio.
**Cómo crear una aplicación de**
1. En el panel de navegación, selecciona **Mis aplicaciones** en la sección **Crear** para acceder a una lista de tus aplicaciones.
1. Seleccione **\$1 Crear aplicación**.
1. En el cuadro de diálogo **Crear aplicación**, asigne un nombre a la aplicación y elija uno de los siguientes métodos de creación de aplicaciones:
+ **Generar una aplicación con IA**: elija esta opción para describir su aplicación en lenguaje natural y dejar que la IA genere la aplicación y sus recursos por usted.
+ **Empezar desde cero**: elige esta opción para empezar a crear desde una aplicación vacía.
1. Elija **Siguiente**.
1. Si has elegido **Generar una aplicación con IA**:
1. En el cuadro de diálogo **Conectarse a datos existentes**, añada cualquier fuente de datos existente a su aplicación. Para ello, seleccione el **conector** que proporciona a App Studio acceso a las fuentes de datos, seleccione **las tablas** y elija **Siguiente**. Añadir aquí las fuentes de datos ayuda a la IA a generar una aplicación optimizada para ti. Puedes omitir este paso y añadir fuentes de datos más adelante seleccionando **Omitir**.
1. Tras un breve retraso (unos minutos), accederás a la página **Generar tu aplicación mediante IA**, donde podrás describir la aplicación que deseas crear.
1. Puedes empezar a describir tu aplicación en el chat o puedes elegir y personalizar un ejemplo de mensaje proporcionado.
1. Una vez analizada la solicitud, revisa los requisitos y la descripción general de la aplicación. Usa el chat para solicitar cualquier cambio o selecciona **Comenzar** de nuevo para empezar desde un mensaje vacío.
1. Cuando estés listo, selecciona **Generar aplicación**.
1. Una vez generada, previsualice la aplicación en otra pestaña seleccionando **Vista previa de la aplicación**. Cuando estés listo para empezar a editar, puedes elegir **Editar aplicación**. Navega por las páginas, las automatizaciones y los datos de tu aplicación para familiarizarte con ella. Revisa cualquier error o advertencia en el panel de depuración inferior. Para obtener información sobre cómo generar una aplicación mediante IA, consulte[Tutorial: Generar una aplicación mediante IA](getting-started-tutorial-ai.md). Para obtener información general sobre cómo funciona la creación en App Studio, consulte[Cómo funciona AWS App Studio](how-it-works.md).
1. Si has elegido **Empezar desde cero**:
1. En el cuadro de diálogo **Conectarse a datos existentes**, añada cualquier fuente de datos existente a su aplicación. Para ello, seleccione el **conector** que proporciona a App Studio acceso a las fuentes de datos, seleccione **las tablas** y elija **Siguiente**. Puedes omitir este paso y añadir fuentes de datos más adelante seleccionando **Omitir**.
1. Una vez creada la aplicación, selecciona **Editar aplicación** para empezar a editarla. Para obtener más información sobre cómo crear a partir de una aplicación vacía, consulte[Tutorial: Comience a crear desde una aplicación vacía](getting-started-tutorial-empty.md). Para obtener información general sobre cómo funciona la compilación en App Studio, consulte[Cómo funciona AWS App Studio](how-it-works.md).
# Importación de aplicaciones
Puedes importar una copia de una aplicación exportada a tu instancia de App Studio. Puedes importar aplicaciones que se hayan exportado desde otras instancias de App Studio o aplicaciones desde un catálogo proporcionado por App Studio. Importar una aplicación del catálogo de aplicaciones de App Studio puede ayudarte a empezar a usar una aplicación con una funcionalidad similar, o ayudarte a aprender sobre la creación de aplicaciones en App Studio al explorar la aplicación importada.
Al importar una aplicación a la instancia, se crea una copia de la aplicación original en la instancia. Una vez creada la nueva aplicación, accederás al entorno de desarrollo de la aplicación, donde podrás obtener una vista previa de la misma y explorar sus funciones.
**aviso**
Cuando importas una aplicación, importas toda la lógica de la aplicación, lo que podría provocar un comportamiento no deseado o inesperado. Por ejemplo, podrían producirse consultas destructivas que eliminen datos de las bases de datos que se conecten a la aplicación. Recomendamos revisar minuciosamente la aplicación y su configuración, y probarla en activos que no sean de producción antes de conectarle los datos de producción.
**Para importar una aplicación**
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear** para acceder a una lista de sus aplicaciones.
1. Selecciona la flecha desplegable situada junto a **\$1 Crear aplicación**.
1. Selecciona **Importar aplicación**.
1. En el cuadro de diálogo **Importar aplicación**, en **Importar código**, introduzca el código de importación de la aplicación que desee importar. Para obtener una lista de las aplicaciones proporcionadas por App Studio que se pueden importar, incluidas las descripciones de las aplicaciones y los códigos de importación, consulte[Aplicaciones importables proporcionadas por App Studio](#app-catalog).
1. Selecciona **Importar** para importar la aplicación e ir al entorno de desarrollo de la aplicación importada para verla o editarla. Para obtener información sobre la creación de aplicaciones en App Studio, consulte [Cómo funciona AWS App Studio](how-it-works.md)
## Aplicaciones importables proporcionadas por App Studio
App Studio proporciona aplicaciones que se pueden importar a tu instancia para ayudarte a aprender sobre la creación de aplicaciones. Para ver cómo se implementan las funciones específicas de las aplicaciones en App Studio, puedes obtener una vista previa de las aplicaciones y, a continuación, examinar su configuración en el entorno de desarrollo.
La siguiente tabla contiene la lista de aplicaciones, sus códigos de importación y una breve descripción de las aplicaciones. Cada aplicación incluye una `README` página que contiene información sobre la aplicación que puede ver después de importarla.
| Nombre de la aplicación | Description (Descripción) | Código de importación |
| --- | --- | --- |
| **Encuesta de solicitud de botín** | Una aplicación interna de solicitud de regalos promocionales diseñada para que los empleados soliciten productos de marca de la empresa. Los empleados pueden seleccionar artículos y especificar tamaños y enviar su solicitud a través de un sencillo formulario. Esta aplicación gestiona todos los datos a través del almacenamiento integrado, lo que elimina la necesidad de conexiones externas. | Encuesta de solicitud de bote/EC4F5FAF-E2F8-42EE-AB8D-6723D8CA21B2 |
| **Seguimiento de Sprint** | Una aplicación de gestión de sprints que los equipos pueden utilizar para organizar y realizar un seguimiento del trabajo de desarrollo de software. Los usuarios pueden crear sprints, añadir tareas, asignar trabajo y supervisar el progreso mediante vistas específicas sobre los sprints, los seguimientos y las tareas. Esta aplicación gestiona todos los datos a través del almacenamiento integrado, lo que elimina la necesidad de conexiones externas. | Sprint Tracking/8F31E160-771F-48D7-87B0-374E285E2FBC |
| **Rastreador de sentimientos de Amazon Review** | Esta aplicación es una herramienta de análisis de los comentarios de los clientes que genera puntuaciones de opinión a partir de las reseñas de productos para ayudar a las empresas a comprender la satisfacción de los clientes. La aplicación incluye ejemplos de utilidades de generación de datos para realizar pruebas rápidas y requiere un conector Amazon Bedrock para obtener información basada en inteligencia artificial, al tiempo que mantiene todos los demás datos en el sistema de almacenamiento integrado. | Amazon Review Sentiment Tracker/60F0DAE4-F8E2-4C20-9583-FA456F5EBFAB |
| **Procesamiento de facturas y recibos** | Esta aplicación de procesamiento de recibos ahorra tiempo y reduce los errores al automatizar la entrada manual de datos y agilizar los flujos de trabajo de aprobación de documentos. La solución requiere conectores Amazon Textract, Amazon S3 y Amazon SES. Utiliza un Amazon Textract para analizar y extraer datos de los recibos almacenados en Amazon S3 y, a continuación, procesa y envía por correo electrónico la información extraída a los aprobadores mediante Amazon SES. | Procesamiento de facturas y recibos/98BDE3AE-E454-4B18-A1E6-6F23E8B2A4F1 |
| **Inspección y auditoría de inventario** | Una aplicación para gestionar las inspecciones de almacenes y el seguimiento de los equipos. Los usuarios pueden realizar evaluaciones de los pass/fail equipos por ubicación de la habitación, monitorear los niveles de inventario y ver el historial de inspecciones. La aplicación proporciona un sistema centralizado para rastrear tanto las inspecciones de las instalaciones como el estado del equipo. Esta aplicación gestiona todos los datos a través del almacenamiento integrado, lo que elimina la necesidad de conexiones externas. | Inspección y auditoría de inventario/CF570A06-1C5E-4DD7-9EA8-5C04723D687F |
| **Rastreo de adopción de productos** | Una aplicación integral para gestionar el desarrollo de productos que centraliza los comentarios de los clientes, las solicitudes de funciones y las notas de las reuniones con los clientes. Los equipos pueden realizar un seguimiento de las interacciones con los clientes, organizar los requisitos y generar informes basados en la inteligencia artificial para planificar una hoja de ruta trimestral. La aplicación incluye ejemplos de utilidades de datos y aprovecha Amazon Bedrock para obtener información sobre IA y Amazon Aurora PostgreSQL para la administración de datos. | Seguimiento de adopción del producto/9B3A4437-BB50-467F-AE9E-D108776B7CA1 |
| **Incrustación rápida** | Una aplicación de demostración que permite a los usuarios ver los análisis mientras trabajan con los datos subyacentes. La aplicación contiene dos métodos para incrustar los paneles de Amazon Quick en App Studio: un enfoque basado en API para usuarios registrados y anónimos (que requiere un conector Quick) y una integración de iFrame para los paneles públicos. | Quicksight Embedding/0cdc15FC-CA8B-41B7-869E-ED13C9072bc8 |
| **Fregadero de cocina** | Una aplicación de referencia que muestra consejos y prácticas recomendadas para el desarrollo avanzado de App Studio. Incluye ejemplos prácticos sobre la administración del estado, el manejo de datos CSV, la integración de las API del navegador y los patrones de interfaz de usuario que los desarrolladores pueden estudiar e implementar en sus propias aplicaciones. Ninguno de los ejemplos requiere conexiones externas. | Fregadero de cocina App Studio/1CFE6B2F-544C-4611-B82C-80EADC76A0C8 |
# Duplicación de aplicaciones
Los propietarios y copropietarios de las aplicaciones pueden duplicarlas para crear una copia exacta de la aplicación. Duplicar aplicaciones es útil si quieres conservar el estado actual con fines de prueba o usar la aplicación duplicada como punto de partida para crear una nueva aplicación.
**Para duplicar una aplicación**
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear**. Se abrirá una página que muestra una lista de aplicaciones a las que tiene acceso.
1. Seleccione el menú desplegable de la columna **Acciones** de la aplicación que desee duplicar.
1. Elige **Duplicar**. Si la opción **Duplicar** no está disponible, es probable que no seas propietario o copropietario de la aplicación.
1. Si lo desea, proporcione un nombre para la aplicación duplicada. El nombre predeterminado es *Current\$1App\$1Name COPY*.
1. Elige **Duplicar**.
# Edición o creación de una aplicación
Use el siguiente procedimiento para editar una aplicación en App Studio.
**Para editar (crear) una aplicación**
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear**. Se abrirá una página que muestra una lista de aplicaciones a las que tiene acceso.
1. En la columna **Acciones** de la aplicación que desee editar, seleccione **Editar**. Esto lo llevará al entorno de desarrollo, donde podrá usar componentes, automatizaciones y datos para configurar el aspecto y el funcionamiento de la aplicación. Para obtener información sobre la creación de aplicaciones, consulte[Cómo empezar a usar AWS App Studio](getting-started.md).
# Editar una versión de la aplicación publicada anteriormente
Usa el siguiente procedimiento para editar una versión publicada anteriormente de tu aplicación App Studio. Una vez que decidas editar la versión publicada anteriormente, puedes editar la aplicación en el entorno de desarrollo o publicarla en Pruebas y luego en Producción.
**aviso**
La versión publicada anteriormente reemplaza a la versión en curso de la aplicación en el entorno de desarrollo. Se perderán todos los cambios no publicados en tu aplicación.
La edición de una versión publicada anteriormente resulta útil en caso de que publiques accidentalmente cambios no deseados o que dañen la aplicación para tus usuarios y quieras seguir creando o editando desde la versión anterior de la aplicación.
**nota**
Si detectas problemas con una aplicación publicada y necesitas publicar inmediatamente una versión que ya estaba funcionando, o si deseas publicar una versión anterior pero conservar las últimas actualizaciones de la aplicación en el entorno de desarrollo, deberías deshacer la aplicación en su lugar. Para obtener más información, consulte [Volver a una versión publicada anteriormente](application-rollback-version.md).
**Para editar una versión de la aplicación publicada anteriormente**
1. Si es necesario, navega hasta el estudio de aplicaciones de tu aplicación.
1. Seleccione la flecha desplegable situada junto al botón **Publicar** y, a continuación, elija Centro de **publicación**.
1. Selecciona **Historial de versiones** para ver la lista de versiones de la aplicación publicadas anteriormente.
1. Busca la versión que deseas editar y selecciona **Editar**.
1. Revisa la información y selecciona **Revertir.**
1. La versión que eligió editar es ahora la versión actual en el entorno de desarrollo. Puede modificarla o publicarla en el entorno de pruebas tal cual seleccionando **Publicar**. Una vez publicado en Testing, puede volver a publicarlo en el entorno de producción si lo desea.
# Cambiar el nombre de una aplicación
Use el siguiente procedimiento para cambiar el nombre de una aplicación en App Studio. Puedes cambiar el nombre de una aplicación desde la lista de aplicaciones o desde el entorno de desarrollo mientras compilas la aplicación.
**Para cambiar el nombre de una aplicación**
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear**. Se abrirá una página que muestra una lista de aplicaciones a las que tiene acceso.
1. Puede cambiar el nombre de una aplicación desde esta lista o desde el entorno de desarrollo durante la edición.
+ Para cambiar el nombre de esta lista:
1. **Seleccione el menú desplegable de la columna **Acciones** de la aplicación a la que desee cambiar el nombre y, a continuación, seleccione Cambiar nombre.**
1. **Asigna un nombre nuevo a la aplicación y selecciona Cambiar nombre.**
+ Para cambiarle el nombre desde el entorno de desarrollo:
1. En la columna **Acciones** de la aplicación que desee editar, elija **Editar**.
1. En el entorno de desarrollo, elija el nombre de la aplicación y actualícelo; a continuación, pulse Entrar o navegue fuera del campo de texto para guardar los cambios.
# Eliminación de una aplicación de
Use el siguiente procedimiento para eliminar una aplicación en App Studio.
**Para eliminar una aplicación de**
1. En el panel de navegación, selecciona **Mis aplicaciones** en la sección **Crear**. Accederá a una página que muestra una lista de aplicaciones a las que tiene acceso.
1. Selecciona el menú desplegable de la columna **Acciones** de la aplicación que deseas eliminar.
1. Elija **Eliminar**.
1. En el cuadro de diálogo **Eliminar aplicaciones**, revise detenidamente la información sobre la eliminación de aplicaciones. Si desea eliminar la aplicación, elija **Eliminar**.
# Vista previa, publicación y uso compartido de aplicaciones
**Topics**
+ [Vista previa de las aplicaciones](applications-preview.md)
+ [Publicar aplicaciones](applications-publish.md)
+ [Compartir las aplicaciones publicadas](application-share.md)
+ [Volver a una versión publicada anteriormente](application-rollback-version.md)
+ [Exportación de aplicaciones](applications-export.md)
# Vista previa de las aplicaciones
Puedes previsualizar las aplicaciones en App Studio para ver cómo se mostrarán a los usuarios y, además, probar su funcionalidad utilizándola y comprobando los registros en un panel de depuración.
El entorno de vista previa de la aplicación no admite la visualización de datos en tiempo real ni la conexión con recursos externos mediante conectores, como las fuentes de datos. Para probar la funcionalidad en el entorno de vista previa, puede utilizar la salida simulada en las automatizaciones y datos de muestra en las entidades. Para ver la aplicación con datos en tiempo real, debe publicarla. Para obtener más información, consulte [Publicar aplicaciones](applications-publish.md).
El entorno de vista previa o de desarrollo no actualiza la aplicación publicada en los demás entornos. Si una aplicación no se ha publicado, los usuarios no podrán acceder a ella hasta que se publique y se comparta. Si una aplicación ya se ha publicado y compartido, los usuarios seguirán accediendo a la versión publicada y no a la versión utilizada en un entorno de vista previa.
**Para obtener una vista previa de la aplicación**
1. Si es necesario, navegue hasta el estudio de aplicaciones de la aplicación que desee previsualizar:
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear**.
1. Seleccione **Editar** para la aplicación.
1. Seleccione **Vista previa** para abrir el entorno de vista previa de la aplicación.
1. (Opcional) Amplíe el panel de depuración seleccionando su encabezado cerca de la parte inferior de la pantalla. Puede filtrar el panel por tipo de mensaje seleccionando el tipo de mensaje en la sección **Filtrar registros**. Para borrar los registros del panel, selecciona **Borrar consola**.
1. Mientras se encuentra en el entorno de vista previa, puede probar la aplicación navegando por sus páginas, utilizando sus componentes y eligiendo sus botones para iniciar las automatizaciones que transfieren datos. Como el entorno de vista previa no admite datos en tiempo real ni conexiones a fuentes externas, puedes ver ejemplos de los datos que se transfieren en el panel de depuración.
# Publicar aplicaciones
Cuando haya terminado de crear y configurar la aplicación, el siguiente paso es publicarla para probar las transferencias de datos o compartirla con los usuarios finales. Para entender cómo publicar aplicaciones en App Studio, es importante entender los entornos disponibles. App Studio ofrece tres entornos independientes, que se describen en la siguiente lista:
1. **Desarrollo**: donde se crea y se obtiene una vista previa de la aplicación. No es necesario publicar en el entorno de desarrollo, ya que la última versión de la aplicación se aloja allí automáticamente. En este entorno no hay datos en tiempo real ni servicios o recursos de terceros disponibles.
1. **Pruebas**: donde puede realizar pruebas exhaustivas de su aplicación. En el entorno de pruebas, puede conectarse a otros servicios, enviarlos y recibirlos.
1. **Producción**: el entorno operativo en vivo para el consumo de los usuarios finales.
Toda la creación de aplicaciones se lleva a cabo en el entorno de **desarrollo**. A continuación, publique en el entorno de **pruebas** para probar la transferencia de datos entre otros servicios y las pruebas de aceptación por parte del usuario (UAT) proporcionando una URL de acceso a los usuarios finales. Después, publique su aplicación en el entorno de **producción** para realizar las pruebas finales antes de compartirla con los usuarios. Para obtener más información sobre los entornos de aplicaciones, consulte[Entornos de aplicaciones](#application-environments).
Cuando publica una aplicación, no está disponible para los usuarios hasta que no se comparte. Esto le da la oportunidad de usar y probar la aplicación en los entornos de prueba y producción antes de que los usuarios puedan acceder a ella. Al publicar en producción una aplicación que ya se ha publicado y compartido anteriormente, se actualiza la versión que está disponible para los usuarios.
## Publicar aplicaciones
Utilice el siguiente procedimiento para publicar una aplicación de App Studio en el entorno de prueba o producción.
**Para publicar una aplicación en un entorno de prueba o producción**
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear**. Accederá a una página que muestra una lista de aplicaciones a las que tiene acceso.
1. Seleccione **Editar** para la aplicación que desee publicar.
1. Selecciona **Publicar** en la esquina superior derecha.
1. En el cuadro de diálogo **Publica tus actualizaciones**:
1. Revise la información sobre la publicación de una aplicación.
1. (Opcional) En **la descripción de la versión**, incluya una descripción de esta versión de la aplicación.
1. Seleccione la casilla para confirmar la información sobre el entorno.
1. Elija **Iniciar**. La aplicación puede tardar hasta 15 minutos en actualizarse en el entorno activo.
1. Para obtener información sobre la visualización de las aplicaciones en los entornos de prueba o producción, consulte[Visualización de las aplicaciones publicadas](#application-viewing-published).
**nota**
El uso de la aplicación en el entorno de pruebas o producción provocará una transferencia de datos en tiempo real, por ejemplo, la creación de registros en tablas de fuentes de datos que se hayan conectado mediante conectores.
Las aplicaciones publicadas que nunca se hayan compartido no estarán disponibles para los usuarios ni para otros creadores. Para que una aplicación esté disponible para los usuarios, debe compartirla después de publicarla. Para obtener más información, consulte [Compartir las aplicaciones publicadas](application-share.md).
## Visualización de las aplicaciones publicadas
Puede ver las aplicaciones publicadas en los entornos de prueba y producción para probarlas antes de compartirlas con los usuarios finales u otros desarrolladores.
**Para ver las aplicaciones publicadas en el entorno de prueba o producción**
1. Si es necesario, navegue hasta el estudio de aplicaciones de la aplicación que desee previsualizar:
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear**.
1. Seleccione **Editar** para la aplicación.
1. Selecciona la flecha desplegable situada junto a **Publicar** en la esquina superior derecha y selecciona Centro de **publicación**.
1. Desde el centro de publicación, puede ver los entornos en los que se publica su aplicación. Si la aplicación se publica en los entornos de prueba o producción, puede verla mediante el enlace **URL** de cada entorno.
**nota**
El uso de la aplicación en el entorno de prueba o producción provocará una transferencia de datos en tiempo real, por ejemplo, la creación de registros en tablas de fuentes de datos que se hayan conectado mediante conectores.
## Entornos de aplicaciones
AWS App Studio ofrece funciones de gestión del ciclo de vida de las aplicaciones (ALM) en tres entornos independientes: desarrollo, pruebas y producción. Esto facilita las prácticas recomendadas, como el mantenimiento de entornos separados, el control de versiones, el uso compartido y la supervisión durante todo el ciclo de vida de la aplicación.
### Entorno de desarrollo
El entorno de **desarrollo** es un entorno aislado en el que puede crear aplicaciones sin conectarse a ninguna fuente de datos o servicio activo mediante el estudio de aplicaciones y los datos de muestra. En el entorno de desarrollo, puede previsualizar la aplicación para verla y probarla sin comprometer los datos de producción.
Aunque tu aplicación no se conecta a otros servicios del entorno de desarrollo, puedes configurar distintos recursos en la aplicación para imitar las automatizaciones y los conectores de datos en tiempo real.
Hay un panel de depuración plegable que incluye errores y advertencias en la parte inferior del estudio de aplicaciones del entorno de desarrollo para ayudarte a inspeccionar y depurar la aplicación a medida que la compilas. Para obtener más información sobre la solución de problemas y la depuración de aplicaciones, consulte. [Solución de problemas y depuración de App Studio](troubleshooting-and-debugging.md)
### Entorno de pruebas
Una vez que se complete el desarrollo inicial de la aplicación, el siguiente paso es publicarla en el entorno de **pruebas**. Mientras se encuentra en el entorno de pruebas, tu aplicación puede conectarse a otros servicios, enviar datos y recibir datos de otros servicios. Por lo tanto, puedes usar este entorno para realizar pruebas exhaustivas, incluidas las pruebas de aceptación del usuario (UAT), proporcionando una URL de acceso a los usuarios finales.
**nota**
La publicación inicial en el entorno de pruebas puede tardar hasta 15 minutos.
La versión de tu aplicación publicada en el entorno de pruebas se eliminará tras 3 horas de inactividad del usuario final. Sin embargo, todas las versiones se conservan y se pueden restaurar desde la pestaña **Historial de versiones**.
Las principales características del entorno de pruebas son las siguientes:
+ Pruebas de integración con fuentes de datos en vivo y APIs
+ Las pruebas de aceptación del usuario (UAT) se facilitan mediante un acceso controlado
+ Entorno para recopilar comentarios y abordar problemas
+ Capacidad para inspeccionar y depurar las actividades tanto del lado del cliente como del servidor mediante consolas de navegador y herramientas para desarrolladores.
Para obtener más información sobre la solución de problemas y la depuración de aplicaciones, consulte. [Solución de problemas y depuración de App Studio](troubleshooting-and-debugging.md)
### Entorno de producción
Una vez que haya probado y solucionado los problemas, puede pasar la versión de la aplicación del entorno de pruebas al entorno de producción para utilizarla de forma operativa en tiempo real. Si bien el entorno de producción es el entorno operativo activo para el consumo de los usuarios finales, puede probar la versión publicada antes de compartirla con los usuarios.
La versión publicada en el entorno de producción se eliminará tras 14 días de inactividad por parte del usuario final. Sin embargo, todas las versiones se conservan y se pueden restaurar desde la pestaña **Historial de versiones**.
Las principales características del entorno de producción son las siguientes:
+ Entorno operativo en vivo para el consumo de los usuarios finales
+ Control de acceso granular basado en roles
+ Capacidades de control y reversión de versiones
+ Capacidad para inspeccionar y depurar únicamente las actividades del lado del cliente
+ Utiliza conectores activos, datos, automatizaciones y APIs
## Control de versiones y administración de versiones
App Studio ofrece funciones de control de versiones y administración de versiones a través de su sistema de control de versiones en el centro de **publicaciones**.
Capacidades clave de control de versiones:
+ La publicación en el entorno de pruebas genera nuevos números de versión (1.0, 2.0, 3.0...).
+ El número de versión no cambia cuando se pasa del entorno de pruebas al de producción.
+ Puedes volver a cualquier versión anterior desde el **historial de versiones**.
+ Las aplicaciones publicadas en el entorno de pruebas se pausan después de 3 horas de inactividad. **Las versiones se conservan y se pueden restaurar desde el historial de versiones.**
+ Las aplicaciones publicadas en el entorno de producción se eliminan tras 14 días de inactividad. Las versiones se conservan y se pueden restaurar desde el historial de **versiones**.
Este modelo de control de versiones permite una iteración rápida y, al mismo tiempo, mantiene la trazabilidad, las capacidades de reversión y un rendimiento óptimo durante todo el ciclo de desarrollo y prueba de las aplicaciones.
## Mantenimiento y operaciones
Es posible que App Studio tenga que volver a publicar automáticamente la aplicación para abordar determinadas tareas de mantenimiento y actividades operativas y para incorporar nuevas bibliotecas de software. No es necesario que tú, el creador, realices ninguna acción, pero es posible que los usuarios finales tengan que volver a iniciar sesión en la aplicación. En determinadas situaciones, es posible que necesitemos que vuelva a publicar su aplicación para incorporar nuevas funciones y bibliotecas que no podamos añadir automáticamente nosotros mismos. Deberás resolver cualquier error y revisar las advertencias antes de volver a publicarla.
# Compartir las aplicaciones publicadas
Cuando publica una aplicación que aún no se ha publicado, no estará disponible para los usuarios hasta que se comparta. Una vez que se haya compartido una aplicación publicada, estará disponible para los usuarios y no será necesario volver a compartirla si se publica otra versión.
**nota**
Esta sección trata sobre cómo compartir las aplicaciones publicadas con usuarios finales o evaluadores. Para obtener información sobre cómo invitar a otros usuarios a crear una aplicación, consulte[Creación de una aplicación con varios usuarios](builder-collaboration.md).
**Para compartir una aplicación publicada**
1. Acceda al cuadro de diálogo **Compartir** desde la lista de aplicaciones o desde el estudio de aplicaciones de su aplicación siguiendo las instrucciones siguientes:
+ Para acceder al cuadro de diálogo **Compartir** desde la lista de aplicaciones: en el panel de navegación, seleccione **Mis aplicaciones** en la sección **Crear**. Seleccione el menú desplegable de la columna **Acciones** de la aplicación que desee compartir y seleccione **Compartir**.
+ Para acceder al cuadro de diálogo **Compartir** desde el estudio de aplicaciones: desde el estudio de aplicaciones de tu aplicación, selecciona **Compartir** en el encabezado superior.
1. En el cuadro de diálogo **Compartir**, elija la pestaña del entorno que desee compartir. Si no ve las pestañas **Pruebas** o **Producción**, es posible que su aplicación no esté publicada en el entorno correspondiente. Para obtener más información sobre la publicación, consulte [Publicar aplicaciones](applications-publish.md).
1. En la pestaña correspondiente, selecciona grupos en el menú desplegable para compartir el entorno con ellos.
1. (Opcional) Asigne un rol a nivel de aplicación al grupo para probar o configurar la visibilidad condicional de la página. Para obtener más información, consulte [Configuración de la visibilidad de las páginas basada en roles](app-level-roles.md).
1. Elija **Compartir**.
1. (Opcional) Copia el enlace y compártelo con los usuarios. Solo los usuarios con los que se haya compartido la aplicación y el entorno pueden acceder a la aplicación en el entorno correspondiente.
# Volver a una versión publicada anteriormente
Usa el siguiente procedimiento para revertir el entorno de producción de tu aplicación de App Studio a una versión publicada anteriormente. Los usuarios finales de la aplicación se verán afectados y verán la versión revertida de la aplicación una vez que se haya implementado. Al revertir una aplicación, también se revierte el código del componente a la versión de la fecha de publicación anterior y afecta a toda la pila de implementación de la aplicación (código de usuario, estado de configuración del componente). Esto significa que cualquier actualización que App Studio haya realizado en el código del componente, como los cambios de campo u otros cambios de configuración, se revertirá para garantizar que la versión anterior de la aplicación funcione igual que cuando se publicó originalmente.
La versión en curso de la aplicación en el entorno de desarrollo no se ve afectada al revertir la versión publicada.
Hacer retroceder la versión publicada de una aplicación es útil si detectas problemas con una aplicación publicada y necesitas publicar inmediatamente una versión que funcionaba anteriormente, o si deseas publicar una versión anterior y conservar las últimas actualizaciones de la aplicación en el entorno de desarrollo.
**nota**
Si desea revertir el entorno de desarrollo de una aplicación a una versión publicada anteriormente, debe revertir la aplicación. Para obtener más información, consulte [Editar una versión de la aplicación publicada anteriormente](applications-edit-previously-published-version.md).
**Para revertir la versión del entorno de producción a una versión de aplicación publicada anteriormente**
1. Si es necesario, vaya al entorno de desarrollo de su aplicación editándola. Para obtener más información, consulte [Edición o creación de una aplicación](applications-edit.md).
1. Seleccione la flecha desplegable de versiones situada en la parte superior del mosaico del entorno de **producción** para ver las versiones disponibles para su reversión. El menú desplegable contiene las versiones publicadas en los últimos 30 días. Si este menú desplegable está deshabilitado, puede deberse a que ya se está publicando una aplicación y solo se puede publicar una vez al mismo tiempo.
1. Elige la versión a la que quieres volver.
1. Introduce un motivo para la reversión y selecciona **Revertir**. Se iniciará la publicación retrospectiva y, una vez completada, el entorno de producción de su aplicación se actualizará a la versión elegida.
**nota**
También puedes actualizar a una versión de la aplicación publicada anteriormente una vez que la hayas revertido.
# Exportación de aplicaciones
Puedes exportar una instantánea de tu aplicación para compartirla con otras instancias de App Studio. Al exportar una aplicación, se crea una instantánea desde el entorno de desarrollo de la aplicación y se genera un código de importación. Luego, el código de importación se puede usar para importar la aplicación a otras instancias de App Studio, donde se puede ver y crear.
Las aplicaciones exportadas se pueden importar a instancias de cualquier instancia Región de AWS compatible con App Studio.
**Para exportar una aplicación**
1. En el panel de navegación, elija **Mis aplicaciones** en la sección **Crear** para acceder a una lista de sus aplicaciones.
1. Seleccione el menú desplegable de la columna **Acciones** de la aplicación que desee exportar.
1. Seleccione **Exportar**.
1. El procedimiento para generar y compartir un código de importación varía en función de si ya se ha creado o no un código de importación para la aplicación.
+ Si no se ha creado un código de importación:
1. En **Permisos de importación de aplicaciones**, especifica qué instancias pueden importar la aplicación exportada. Puedes conceder permisos de importación a todas las instancias o añadir instancias específicas de App Studio introduciendo su instancia IDs. Separa varias instancias IDs con una coma.
Para encontrar el ID de tu instancia, ve a la configuración de la cuenta de la instancia. Para ello, selecciona **Configuración de la cuenta** en la consola de App Studio.
1. Selecciona **Generar código de importación**.
1. Copia y comparte el código de importación generado.
+ Si ya se ha creado un código de importación:
1. Para compartir la aplicación actualmente exportada, copia y comparte el código de importación existente. Para crear una nueva aplicación exportada con los cambios más recientes en la aplicación, selecciona **Generar código nuevo**. También puedes actualizar los permisos de importación si es necesario.
# Páginas y componentes: crea la interfaz de usuario de tu aplicación
**Topics**
+ [Administrar páginas](pages.md)
+ [Gestión de componentes](adding-editing-deleting-components.md)
+ [Configuración de la visibilidad de las páginas basada en roles](app-level-roles.md)
+ [Ordenar y organizar las páginas en la navegación de la aplicación](pages-order.md)
+ [Cambia los colores de tu aplicación con los temas de la aplicación](app-theme.md)
+ [Referencia de componentes](components-reference.md)
# Administrar páginas
Usa los siguientes procedimientos para crear, editar o eliminar páginas de tu AWS aplicación de App Studio.
Las **páginas** son contenedores de [componentes](concepts.md#concepts-component), que forman la interfaz de usuario de una aplicación en App Studio. Cada página representa una pantalla de la interfaz de usuario (UI) de la aplicación con la que los usuarios interactuarán. Las páginas se crean y editan en la pestaña **Páginas** del estudio de aplicaciones.
# Crear una página
Utilice el siguiente procedimiento para crear una página en una aplicación de App Studio. Para obtener información sobre cómo duplicar una página existente, consulte[Duplicar una página](pages-duplicate.md).
**Para crear una página**
1. Si es necesario, navegue hasta el entorno de desarrollo de su aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. En el menú de **páginas** de la izquierda, selecciona **\$1 Añadir**.
# Duplicar una página
Use el siguiente procedimiento para duplicar una página en una aplicación de App Studio.
**Para duplicar una página**
1. Si es necesario, vaya al entorno de desarrollo de su aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. **En el menú **Páginas** de la izquierda, selecciona el menú de puntos suspensivos situado junto al nombre de la página que quieres duplicar y selecciona Duplicar.** La página duplicada se añade directamente después de la página original.
# Visualización y edición de las propiedades de la página
Utilice el siguiente procedimiento para editar una página en una aplicación de App Studio. Puede editar propiedades como el nombre de la página, sus parámetros y su diseño.
**Para ver o editar las propiedades de la página**
1. Si es necesario, vaya al entorno de desarrollo de su aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. En el menú **Páginas** de la izquierda, selecciona el menú de puntos suspensivos situado junto al nombre de la página que quieres editar y selecciona Propiedades de la **página**. **Esto abre el menú Propiedades del lado derecho.**
1. Para editar el nombre de la página:
**nota**
****Caracteres de nombre de página válidos: **A-Z**, **a-z**, **0-9, \$1**, \$1****
1. **Selecciona el icono del lápiz situado junto al nombre en la parte superior del menú Propiedades.**
1. Introduzca el nuevo nombre de la página y pulse Entrar.
1. Para crear, editar o eliminar los parámetros de la página:
1. Para crear un parámetro de página, seleccione **\$1 Añadir nuevo** en la sección **Parámetros de página**.
1. Para editar el valor **clave o **descriptivo**** de un parámetro de página, elija el campo de entrada de la propiedad que desee cambiar e introduzca un nuevo valor. Los cambios se guardan a medida que los edita.
1. Para eliminar un parámetro de página, elija el icono de papelera del parámetro de página que desee eliminar.
1. Para añadir, editar o eliminar el logotipo o el encabezado de una página:
1. Para añadir el logotipo o el encabezado de una página, activa la opción correspondiente en la sección **Estilo**. Configura la fuente de la imagen y, si lo deseas, proporciona texto alternativo.
1. Para editar el logotipo o el encabezado de una página, actualiza los campos de la sección **Estilo**.
1. Para eliminar el logotipo o el encabezado de una página, desactiva la opción correspondiente en la sección **Estilo**.
1. Para editar el diseño de una página:
1. Actualice los campos de la sección **Diseño**.
# Eliminar una página
Use el siguiente procedimiento para eliminar una página de una aplicación en App Studio.
**Para eliminar una página**
1. Si es necesario, vaya al entorno de desarrollo de la aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. **En el menú **Páginas** de la izquierda, selecciona el menú de puntos suspensivos situado junto al nombre de la página que quieres eliminar y selecciona Eliminar.**
# Gestión de componentes
Usa los siguientes procedimientos para agregar, editar y eliminar componentes en o desde las páginas del estudio de aplicaciones de App Studio a fin de crear la interfaz de usuario deseada para tu aplicación.
# Añadir componentes a una página
Use el siguiente procedimiento para agregar un componente a una página en App Studio. Para obtener información sobre cómo duplicar un componente existente, consulte[Duplicación de componentes](duplicating-components.md).
1. Si es necesario, vaya al entorno de desarrollo de la aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. El panel de componentes se encuentra en el menú de la derecha y contiene los componentes disponibles.
1. Arrastre y suelte el componente deseado del panel sobre el lienzo. Como alternativa, puede hacer doble clic en el componente del panel para añadirlo automáticamente al centro de la página actual.
1. Ahora que ha añadido un componente, utilice el panel de **Propiedades** del lado derecho para ajustar su configuración, como la fuente de datos, el diseño y el comportamiento. Para obtener información detallada sobre la configuración de cada tipo de componente, consulte[Referencia de componentes](components-reference.md).
# Duplicación de componentes
Usa el siguiente procedimiento para duplicar un componente en una aplicación de App Studio. Los componentes duplicados contienen todas las automatizaciones o entidades vinculadas al componente original.
1. Si es necesario, navegue hasta el entorno de desarrollo de la aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. Hay dos formas de duplicar un componente:
+ En el menú **Páginas** del lado izquierdo, expanda la página que contiene el componente que desea duplicar. **Seleccione el menú de puntos suspensivos situado junto al nombre del componente que desee duplicar y seleccione Duplicar.**
+ Elija el componente que desee duplicar y elija el icono de duplicación.
El componente duplicado se añade directamente después del componente original.
**sugerencia**
Puede deshacer la duplicación de un componente, junto con muchas otras acciones del entorno de desarrollo, mediante los atajos de teclado CTRL\$1Z o CMD\$1Z.
# Visualización y edición de las propiedades de los componentes
1. Si es necesario, vaya al entorno de desarrollo de la aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. En el menú **Páginas** del lado izquierdo, expanda la página que contiene el componente y elija el componente que desee ver o editar. Como alternativa, puede elegir la página y, a continuación, elegir el componente en el lienzo.
1. El panel de **propiedades** del lado derecho muestra los ajustes configurables del componente seleccionado.
1. Explore las distintas propiedades y opciones disponibles y actualícelas según sea necesario para configurar el aspecto y el comportamiento del componente. Por ejemplo, es posible que desee cambiar la fuente de datos, configurar el diseño o habilitar funciones adicionales.
Para obtener información detallada sobre la configuración de cada tipo de componente, consulte[Referencia de componentes](components-reference.md).
# Eliminar componentes
1. Si es necesario, vaya al entorno de desarrollo de la aplicación editándola.
1. Navegue hasta la pestaña **Páginas**.
1. En el menú de **páginas** del lado izquierdo, elija el componente que desee eliminar para seleccionarlo.
1. En el menú de **Propiedades** del lado derecho, selecciona el icono de la papelera.
1. En el cuadro de diálogo de confirmación, elija **Eliminar**.
# Configuración de la visibilidad de las páginas basada en roles
Puede crear funciones en una aplicación de App Studio y configurar la visibilidad de las páginas en función de esas funciones. Por ejemplo, puedes crear funciones en función de las necesidades de los usuarios o de sus niveles de acceso (por ejemplo, de administrador, gerente o usuario) para aplicaciones que ofrecen funciones como la aprobación de proyectos o el procesamiento de reclamaciones, y hacer que determinadas páginas sean visibles para funciones específicas. En este ejemplo, los administradores pueden tener acceso total, los gerentes pueden tener acceso para ver los paneles de informes y los usuarios pueden tener acceso a las páginas de tareas con formularios de entrada.
Usa el siguiente procedimiento para configurar la visibilidad de las páginas basada en roles en tu aplicación App Studio.
1. Si es necesario, dirígete al estudio de aplicaciones de tu aplicación. En el menú de navegación de la izquierda, selecciona **Mis aplicaciones**, busca tu aplicación y selecciona **Editar**.
1. Cree roles a nivel de aplicación en el estudio de aplicaciones.
1. Selecciona la pestaña de **configuración de la aplicación** en la parte superior del estudio de aplicaciones.
1. Seleccione **\$1 Añadir rol**
1. En **Nombre del rol**, proporciona un nombre para identificar el rol. Te recomendamos usar un nombre que describa el nivel de acceso o las funciones del grupo, ya que lo usarás para configurar la visibilidad de la página.
1. Si lo desea, en **Descripción**, añada una descripción para el rol.
1. Repita estos pasos para crear tantos roles como necesite.
1. Configura la visibilidad de tus páginas
1. Selecciona la pestaña **Páginas** en la parte superior del estudio de aplicaciones.
1. En el menú **Páginas** de la izquierda, elija la página para la que desee configurar la visibilidad basada en roles.
1. **En el menú de la derecha, selecciona la pestaña Propiedades.**
1. En **Visibilidad**, desactive **Abrir para todos los usuarios finales**.
1. Mantenga **el rol** seleccionado para elegirlo de una lista de los roles que creó en el paso anterior. Seleccione **Personalizado** para escribir una JavaScript expresión para configuraciones de visibilidad más complejas.
1. Con el **rol** seleccionado, marca las casillas de los roles de la aplicación para los que estará visible la página.
1. Con la opción **Personalizar** seleccionada, introduce una JavaScript expresión que se resuelva en verdadera o falsa. Utilice el siguiente ejemplo para comprobar si el usuario actual tiene el rol de *administrador*:`{{currentUser.roles.includes('manager')}}`.
1. Ahora que su visibilidad está configurada, puede probar la visibilidad de la página previsualizando su aplicación.
1. Selecciona **Vista previa** para abrir una vista previa de la aplicación.
1. En la parte superior derecha de la vista previa, selecciona el menú **Previsualizar como** y marca las casillas de los roles que quieres probar. Las páginas visibles deben reflejar los roles seleccionados.
1. Ahora, asigne grupos a los roles de aplicación de una aplicación publicada. Las asignaciones de grupos y roles se deben configurar por separado para cada entorno. Para obtener más información sobre los entornos de aplicaciones, consulte[Entornos de aplicaciones](applications-publish.md#application-environments).
**nota**
Su aplicación debe publicarse en los entornos de prueba o producción para asignar grupos de App Studio a las funciones que ha creado y configurado. Si es necesario, publica tu aplicación para asignar grupos a las funciones. Para obtener más información sobre la publicación, consulte [Publicar aplicaciones](applications-publish.md).
1. En la parte superior derecha del estudio de aplicaciones, selecciona **Compartir**.
1. Elija la pestaña para el entorno en el que desee configurar la visibilidad de la página.
1. Seleccione el cuadro de entrada **Buscar grupos** y elija el grupo con el que desea compartir la versión de la aplicación. Puede introducir texto para buscar grupos.
1. En el menú desplegable, elija las funciones que desee asignar al grupo. Puedes elegir **Sin rol** para compartir la versión de la aplicación y no asignar un rol al grupo. Solo las páginas que estén visibles para todos los usuarios estarán visibles para los grupos sin ningún rol.
1. Elija **Compartir**. Repita estos pasos para añadir tantos grupos como necesite.
# Ordenar y organizar las páginas en la navegación de la aplicación
En este tema se incluye información sobre cómo reordenar y organizar las páginas en las aplicaciones de App Studio. Hay dos áreas del producto en las que se muestran las páginas de la aplicación: en el menú de **páginas** de la izquierda mientras se edita la aplicación en el estudio de aplicaciones, y en la barra de navegación de la izquierda para ver una vista previa de la aplicación publicada.
## Ordenar las páginas en el menú **Páginas** de la izquierda mientras se edita una aplicación
Al editar una aplicación en el estudio de aplicaciones, las páginas se ordenan por tiempo de creación en el menú **Páginas** de la izquierda. No puedes reordenar las páginas en este menú.
## Ordenar, mostrar u ocultar páginas en la navegación de una vista previa o de una aplicación publicada
Puedes editar los siguientes ajustes de la navegación de la izquierda de una aplicación publicada o de una vista previa:
+ La visibilidad de toda la navegación
+ La visibilidad de páginas específicas en la navegación
+ El orden de las páginas en la navegación
**Para editar la navegación de la izquierda de una vista previa o de una aplicación publicada**
1. Si es necesario, dirígete al estudio de aplicaciones de tu aplicación para editarla.
1. En el menú de **páginas** del lado izquierdo, selecciona **Encabezado y navegación**.
1. En el menú de **navegación y encabezado** del lado derecho, consulta o edita lo siguiente:
1. Para ocultar o mostrar la navegación en la aplicación, usa el botón de **navegación de la aplicación**.
1. Para ocultar páginas de la navegación de la aplicación, arrastra las páginas a la sección **Páginas desvinculadas**. ****
1. Para reordenar las páginas en la navegación de la aplicación, arrástrelas hasta el orden deseado en la sección **Páginas enlazadas**.
# Cambia los colores de tu aplicación con los temas de la aplicación
Usa el siguiente procedimiento para actualizar los colores de tu aplicación configurando el tema de la aplicación.
1. Si es necesario, dirígete al estudio de aplicaciones de tu aplicación para editarla.
1. En el estudio de aplicaciones, dirígete a la pestaña **Páginas**.
1. En la barra de navegación de la izquierda, selecciona **Tema de la aplicación** para abrir los ajustes del tema de la aplicación de la derecha.
1. En el **tema base**, selecciona el **modo claro o el modo** **oscuro**.
1. Para añadir colores personalizados a la aplicación, activa la opción **Personalizar** y actualiza los siguientes ajustes:
1. En **Color principal**, elige el color que se aplica a determinados componentes y a la navegación de la aplicación. Puedes elegir un color con el selector de colores o con el código RGB, HSL o HEX.
**nota**
App Studio se asegurará automáticamente de que tus colores estén accesibles. Por ejemplo, si eliges un color claro en el modo claro, se actualizará para que sea más accesible.
1. En **Color del encabezado**, elige el color que se aplica al encabezado de la aplicación. Puedes elegir un color con el selector de colores o con el código RGB, HSL o HEX.
1. Selecciona **los temas predeterminados** para verlos y elige entre los temas predefinidos, o selecciona **Aleatorizar** para generar un color principal y de encabezado aleatorio.
1. Selecciona **Guardar cambios** para actualizar el tema de la aplicación.
# Referencia de componentes
En este tema se detalla cada uno de los componentes de App Studio y sus propiedades, y se incluyen ejemplos de configuración.
## Propiedades comunes de los componentes
En esta sección se describen las propiedades y funciones generales que se comparten entre varios componentes del estudio de aplicaciones. Los detalles de implementación específicos y los casos de uso de cada tipo de propiedad pueden variar en función del componente, pero el concepto general de estas propiedades sigue siendo el mismo en todo App Studio.
### Name
Se genera un nombre predeterminado para cada componente; sin embargo, puedes editarlo para cambiarlo por un nombre único para cada componente. Utilizará este nombre para hacer referencia al componente y a sus datos desde otros componentes o expresiones de la misma página. Limitación: no incluya espacios en el nombre del componente; solo puede tener letras, números, guiones bajos y signos de dólar. Ejemplos: `userNameInput`, `ordersTable`, `metricCard1`.
### Valor principal, valor secundario y valor
Muchos componentes del estudio de aplicaciones proporcionan campos para especificar valores o expresiones que determinan el contenido o los datos que se muestran en el componente. Estos campos suelen etiquetarse como `Primary value``Secondary value`, o simplemente`Value`, según el tipo y la finalidad del componente.
El `Primary value` campo se utiliza normalmente para definir el valor principal, el punto de datos o el contenido que debe mostrarse de forma destacada en el componente.
El `Secondary value` campo, cuando está disponible, se usa para mostrar un valor o información adicional o de respaldo junto con el valor principal.
El `Value` campo le permite especificar el valor o la expresión que debe mostrarse en el componente.
Estos campos admiten tanto la entrada de texto estático como las expresiones dinámicas. Al usar expresiones, puede hacer referencia a datos de otros componentes, fuentes de datos o variables de su aplicación, lo que permite una visualización de contenido dinámica y basada en datos.
#### Sintaxis de expresiones
La sintaxis para introducir expresiones en estos campos sigue un patrón coherente:
```
{{expression}}
```
Dónde *expression* hay una expresión válida que dé como resultado el valor o los datos deseados que desea mostrar.
##### Ejemplo: texto estático
+ Valor principal: puede introducir un número o valor estático directamente, como `"123"` o`"$1,999.99"`.
+ Valor secundario: puede introducir una etiqueta de texto estático, como `"Goal"` o`"Projected Revenue"`.
+ Valor: puede introducir una cadena estática, como `"since last month"` o`"Total Quantity"`.
##### Ejemplos: Expresiones
+ `Hello, {{currentUser.firstName}}`: Muestra un saludo con el nombre del usuario que ha iniciado sesión actualmente.
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: Muestra condicionalmente un título de panel diferente en función del rol del usuario.
+ `{{ui.componentName.data?.[0]?.fieldName}}`: recupera el valor del `fieldName` campo del primer elemento de los datos del componente con el ID. `componentName`
+ `{{ui.componentName.value * 100}}`: Realiza un cálculo del valor del componente con el ID`componentName`.
+ `{{ui.componentName.value + ' items'}}`: Concatena el valor del componente con el ID `componentName` y la cadena. `' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: recupera el número de pedido de la primera fila de datos del componente. `ordersTable`
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: calcula los ingresos proyectados aumentando los ingresos totales de la primera fila de datos del `salesMetrics` componente en un 15%.
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: Concatena el nombre y los apellidos de los datos del componente. `customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: formatea la fecha del pedido del `orderDetails` componente en una cadena de fecha más legible.
+ `{{ui.productList.data?.length}}`: Muestra el número total de productos de los datos conectados al `productList` componente.
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: calcula el importe del descuento en función del porcentaje de descuento y del total del pedido.
+ `{{ui.cartItemCount.value + ' items in cart'}}`: Muestra el número de artículos del carrito de compras, junto con la etiqueta`items in cart`.
Con estos campos de expresión, puede crear contenido dinámico y basado en datos en su aplicación, lo que le permitirá mostrar información adaptada al contexto del usuario o al estado de la aplicación. Esto permite experiencias de usuario más personalizadas e interactivas.
### Etiqueta
La propiedad **Label** le permite especificar una leyenda o un título para el componente. Esta etiqueta suele mostrarse junto o encima del componente, lo que ayuda a los usuarios a entender su propósito.
Puede utilizar tanto texto estático como expresiones para definir la etiqueta.
#### Ejemplo: texto estático
Si introduce el texto «Nombre» en el campo Etiqueta, el componente mostrará «Nombre» como etiqueta.
#### Ejemplo: Expresiones
##### Ejemplo: tienda minorista
El siguiente ejemplo personaliza la etiqueta para cada usuario, lo que hace que la interfaz se adapte mejor a cada persona:
```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```
##### Ejemplo: gestión de proyectos de SaaS
El siguiente ejemplo extrae datos del proyecto seleccionado para proporcionar etiquetas específicas para el contexto, lo que ayuda a los usuarios a mantenerse orientados dentro de la aplicación:
```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```
##### Ejemplo: clínica sanitaria
El siguiente ejemplo hace referencia al perfil del usuario actual y a la información del médico, lo que proporciona una experiencia más personalizada a los pacientes.
```
Dr. {{ui.doctorProfileTable.data.firstName}}
{{ui.doctorProfileTable.data.lastName}}
```
### Placeholder
La propiedad Placeholder permite especificar un texto de sugerencia o guía que se mostrará en el componente cuando esté vacío. Esto puede ayudar a los usuarios a entender el formato de entrada esperado o proporcionar un contexto adicional.
Puede utilizar tanto texto estático como expresiones para definir el marcador de posición.
#### Ejemplo: texto estático
Si introduce el texto `Enter your name` en el campo de **marcador** de posición, el componente se mostrará `Enter your name` como texto de marcador de posición.
#### Ejemplo: Expresiones
##### Ejemplo: servicios financieros
`Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`Estos ejemplos extraen datos de la cuenta seleccionada para mostrar las indicaciones pertinentes, lo que hace que la interfaz sea intuitiva para los clientes de la banca.
##### Ejemplo: comercio electrónico
`Enter the coupon code for {{ui.cartTable.data.currency}} total`Aquí, el marcador de posición se actualiza de forma dinámica en función del contenido del carrito del usuario, lo que proporciona una experiencia de compra perfecta.
##### Ejemplo: clínica de salud
`Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`Al utilizar una expresión que hace referencia a la edad del paciente, la aplicación puede crear un marcador de posición más personalizado y útil.
### origen
La propiedad **Source** le permite seleccionar la fuente de datos de un componente. Tras la selección, puede elegir entre los siguientes tipos de fuentes de datos:`entity`,`expression`, o`automation`.
#### Entidad
Al seleccionar **Entidad** como fuente de datos, podrá conectar el componente a una entidad o modelo de datos existente en la aplicación. Esto resulta útil cuando tiene una estructura de datos o un esquema bien definido que desea aprovechar en toda la aplicación.
Cuándo usar la fuente de datos de la entidad:
+ Cuando tiene un modelo de datos o una entidad que contiene la información que desea mostrar en el componente (por ejemplo, una entidad de «Productos» con campos como «Nombre», «Descripción» o «Precio»).
+ Cuando necesita obtener datos de forma dinámica de una base de datos, una API u otra fuente de datos externa y presentarlos en el componente.
+ Cuando desee aprovechar las relaciones y asociaciones definidas en el modelo de datos de su aplicación.
##### Seleccionar una consulta sobre una entidad
A veces, es posible que desee conectar un componente a una consulta específica que recupere datos de una entidad, en lugar de la entidad completa. En la fuente de datos de la entidad, tiene la opción de elegir entre las consultas existentes o crear una nueva.
Al seleccionar una consulta, puede:
+ Filtrar los datos que se muestran en el componente en función de criterios específicos.
+ Pase los parámetros a la consulta para filtrar u ordenar los datos de forma dinámica.
+ Aproveche las combinaciones complejas, las agregaciones u otras técnicas de manipulación de datos definidas en la consulta.
Por ejemplo, si tiene una `Customers` entidad en su aplicación con campos como `Name``Email`, y`PhoneNumber`. Puede conectar un componente de tabla a esta entidad y elegir una acción de `ActiveCustomers` datos predefinida que filtre a los clientes en función de su estado. Esto le permite mostrar solo los clientes activos en la tabla, en lugar de toda la base de datos de clientes.
##### Añadir parámetros a una fuente de datos de una entidad
Al utilizar una entidad como fuente de datos, también puede añadir parámetros al componente. Estos parámetros se pueden usar para filtrar, ordenar o transformar los datos que se muestran en el componente.
Por ejemplo, si tiene una `Products` entidad con campos como `Name``Description`,`Price`, y`Category`. Puede añadir un parámetro denominado `category` a un componente de la tabla que muestre la lista de productos. Cuando los usuarios seleccionan una categoría de un menú desplegable, la tabla se actualizará automáticamente para mostrar solo los productos que pertenecen a la categoría seleccionada, utilizando la `{{params.category}}` expresión de la acción de datos.
#### Expression
Seleccione **Expresión** como fuente de datos para introducir expresiones o cálculos personalizados a fin de generar los datos del componente de forma dinámica. Esto resulta útil cuando necesita realizar transformaciones, combinar datos de varias fuentes o generar datos en función de una lógica empresarial específica.
Cuándo usar la fuente de datos de **Expression**:
+ Cuando necesite calcular o derivar datos que no estén directamente disponibles en su modelo de datos (por ejemplo, calcular el valor total del pedido en función de la cantidad y el precio).
+ Cuando desee combinar datos de varias entidades o fuentes de datos para crear una vista compuesta (por ejemplo, mostrar el historial de pedidos de un cliente junto con su información de contacto).
+ Cuando necesite generar datos en función de reglas o condiciones específicas (por ejemplo, mostrar una lista de «productos recomendados» basada en el historial de navegación del usuario).
Por ejemplo, si tienes un *Metrics* componente que necesita mostrar los ingresos totales del mes actual, puedes usar una expresión como la siguiente para calcular y mostrar los ingresos mensuales:
```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```
##### Automatización
Seleccione **Automatización** como fuente de datos para conectar el componente a una automatización o flujo de trabajo existente en la aplicación. Esto resulta útil cuando los datos o la funcionalidad del componente se generan o actualizan como parte de un proceso o flujo de trabajo específico.
Cuándo usar la fuente de datos de **automatización**:
+ Cuando los datos que se muestran en el componente son el resultado de una automatización o un flujo de trabajo específicos (por ejemplo, una tabla de «aprobaciones pendientes» que se actualiza como parte de un proceso de aprobación).
+ Cuando desee activar acciones o actualizaciones en el componente en función de los eventos o condiciones de una automatización (por ejemplo, actualizar una métrica con las últimas cifras de ventas de un SKU).
+ Cuando necesitas integrar el componente con otros servicios o sistemas de tu aplicación mediante una automatización (por ejemplo, obtener datos de una API de terceros y mostrarlos en una tabla).
Por ejemplo, si tienes un componente de flujo gradual que guía a los usuarios a través del proceso de solicitud de empleo. El componente Stepflow se puede conectar a una automatización que se encarga de la presentación de las solicitudes de empleo, la verificación de antecedentes y la generación de ofertas. A medida que la automatización avanza en estos pasos, el componente Stepflow puede actualizarse dinámicamente para reflejar el estado actual de la solicitud.
Al seleccionar cuidadosamente la fuente de datos adecuada para cada componente, puede asegurarse de que la interfaz de usuario de su aplicación cuente con los datos y la lógica correctos, proporcionando una experiencia fluida y atractiva para sus usuarios.
### Visible si
Utilice la propiedad **Visible if** para mostrar u ocultar componentes o elementos en función de condiciones o valores de datos específicos. Esto resulta útil cuando se quiere controlar de forma dinámica la visibilidad de determinadas partes de la interfaz de usuario de la aplicación.
La propiedad **Visible if** usa la siguiente sintaxis:
```
{{expression ? true : false}}
```
o
```
{{expression}}
```
Dónde *expression* es una expresión booleana que se evalúa como o. `true` `false`
Si la expresión se evalúa como`true`, el componente estará visible. Si la expresión se evalúa como`false`, el componente se ocultará. La expresión puede hacer referencia a valores de otros componentes, fuentes de datos o variables de la aplicación.
#### Visible si: ejemplos de expresiones
##### Ejemplo: mostrar u ocultar un campo de entrada de contraseña en función de una entrada de correo electrónico
Imagine que tiene un formulario de inicio de sesión con un campo de entrada de correo electrónico y un campo de entrada de contraseña. Desea mostrar el campo de introducción de la contraseña solo si el usuario ha introducido una dirección de correo electrónico. Puede usar la siguiente expresión Visible if:
```
{{ui.emailInput.value !== ""}}
```
Esta expresión comprueba si el valor del `emailInput` componente no es una cadena vacía. Si el usuario ha introducido una dirección de correo electrónico, la expresión se evaluará como `true` tal y aparecerá el campo de introducción de la contraseña. Si el campo de correo electrónico está vacío, la expresión se evalúa como tal y el campo de introducción de la contraseña se ocultará. `false`
##### Ejemplo: mostrar campos de formulario adicionales en función de una selección desplegable
Supongamos que tienes un formulario en el que los usuarios pueden seleccionar una categoría de una lista desplegable. Según la categoría seleccionada, querrá mostrar u ocultar campos de formulario adicionales para recopilar información más específica.
Por ejemplo, si el usuario selecciona la *Products* categoría, puede utilizar la siguiente expresión para mostrar un *Product Details* campo adicional:
```
{{ui.categoryDropdown.value === "Products"}}
```
Si el usuario selecciona las *Consulting* categorías *Services* o, puede utilizar esta expresión para mostrar un conjunto diferente de campos adicionales:
```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```
##### Ejemplos: Otros
Para hacer que el componente sea visible si el valor del `textInput1` componente no es una cadena vacía:
```
{{ui.textInput1.value === "" ? false : true}}
```
Para que el componente esté siempre visible:
```
{{true}}
```
Para hacer que el componente sea visible si el valor del `emailInput` componente no es una cadena vacía:
```
{{ui.emailInput.value !== ""}}
```
### Desactivado si
La función **Desactivado si** permite activar o desactivar un componente de forma condicional en función de condiciones o valores de datos específicos. Esto se consigue mediante el uso de la propiedad **Disabled if**, que acepta una expresión booleana que determina si el componente debe activarse o desactivarse.
La propiedad **Disabled if** utiliza la siguiente sintaxis:
```
{{expression ? true : false}}
```
o
```
{{expression}}
```
#### Se deshabilita si: ejemplos de expresiones
##### Ejemplo: deshabilitar un botón de envío en función de la validación de un formulario
Si tiene un formulario con varios campos de entrada y desea deshabilitar el botón de envío hasta que todos los campos obligatorios se hayan rellenado correctamente, puede utilizar la siguiente expresión **Inhabilitado si**:
```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```
Esta expresión comprueba si alguno de los campos de entrada obligatorios (`nameInput`,`emailInput`,`passwordInput`) está vacío. Si alguno de los campos está vacío, la expresión se evalúa como tal `true` y el botón de envío se deshabilitará. Una vez rellenados todos los campos obligatorios, la expresión se evaluará y se activará el botón de envío. `false`
Al usar estos tipos de expresiones condicionales en las propiedades **Visible if** y **Disabled ff**, puede crear interfaces de usuario dinámicas y adaptables que se adapten a las entradas de los usuarios, proporcionando una experiencia más ágil y relevante para los usuarios de su aplicación.
¿Dónde *expression* está una expresión booleana que se evalúa como verdadera o falsa?
Ejemplo:
```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```
#### Diseños de contenedores
Las propiedades de diseño determinan cómo se organizan y colocan el contenido o los elementos de un componente. Hay varias opciones de diseño disponibles, cada una representada por un icono:
+ **Diseño de columnas**: este diseño organiza el contenido o los elementos verticalmente, en una sola columna.
+ **Diseño de dos columnas**: este diseño divide el componente en dos columnas de igual ancho, lo que le permite colocar el contenido o los elementos uno al lado del otro.
+ **Diseño de filas**: este diseño organiza el contenido o los elementos horizontalmente, en una sola fila.
##### Orientation (Orientación)
+ **Horizontal**: este diseño organiza el contenido o los elementos horizontalmente, en una sola fila.
+ **Vertical**: este diseño organiza el contenido o los elementos verticalmente, en una sola columna.
+ **Empaquetado en línea**: este diseño organiza el contenido o los elementos horizontalmente, pero pasa a la siguiente línea si los elementos superan el ancho disponible.
##### Alineación
+ **Izquierda**: alinea el contenido o los elementos con el lado izquierdo del componente.
+ **Centro**: centra el contenido o los elementos horizontalmente dentro del componente.
+ **Derecha**: alinea el contenido o los elementos con el lado derecho del componente.
##### Ancho
La propiedad **Ancho** especifica el tamaño horizontal del componente. Puede introducir un valor porcentual entre el 0% y el 100%, que represente la anchura del componente en relación con su contenedor principal o con el espacio disponible.
##### Alto
La propiedad **Altura** especifica el tamaño vertical del componente. El valor «auto» ajusta la altura del componente automáticamente en función de su contenido o del espacio disponible.
##### Espacio intermedio
La propiedad **Space between** determina el espaciado o el espacio entre el contenido o los elementos del componente. Puede seleccionar un valor entre 0 px (sin espaciado) y 64 px, con incrementos de 4 px (p. ej., 4 px, 8 px, 12 px, etc.).
##### Rellenado
La propiedad **Padding** controla el espacio entre el contenido o los elementos y los bordes del componente. Puede seleccionar un valor entre 0 px (sin relleno) y 64 px, con incrementos de 4 px (p. ej., 4 px, 8 px, 12 px, etc.).
##### Introducción
El **fondo** activa o desactiva un color o estilo de fondo para el componente.
Estas propiedades de diseño proporcionan flexibilidad a la hora de organizar y colocar el contenido dentro de un componente, así como de controlar el tamaño, el espaciado y el aspecto visual del propio componente.
## Componentes de datos
En esta sección se describen los distintos componentes de datos disponibles en el estudio de aplicaciones, incluidos los componentes de **tabla**, **detalle**, **métrica**, **formulario** y **repetidor**. Estos componentes se utilizan para mostrar, recopilar y manipular datos dentro de la aplicación.
### Tabla
El componente **Tabla** muestra los datos en formato tabular, con filas y columnas. Se utiliza para presentar datos estructurados, como listas de elementos o registros de una base de datos, de easy-to-read forma organizada y organizada.
#### Propiedades de la tabla
El componente **Tabla** comparte varias propiedades comunes con otros componentes, como `Name``Source`, y`Actions`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
Además de las propiedades comunes, el componente **Table** tiene propiedades y opciones de configuración específicas, entre las que se incluyen `Columns``Search and export`, y`Expressions`.
##### Columnas
En esta sección, puede definir las columnas que se mostrarán en la tabla. Cada columna se puede configurar con las siguientes propiedades:
+ **Formato**: el tipo de datos del campo, por ejemplo: texto, número, fecha.
+ **Etiqueta de columna**: el texto del encabezado de la columna.
+ **Valor**: el campo de la fuente de datos que debe mostrarse en esta columna.
Este campo le permite especificar el valor o la expresión que debe mostrarse en las celdas de la columna. Puede utilizar expresiones para hacer referencia a los datos de la fuente conectada o de otros componentes.
Ejemplo: `{{currentRow.title}}` - Esta expresión mostrará el valor del *title* campo de la fila actual en las celdas de la columna.
+ **Habilitar la clasificación**: esta opción le permite habilitar o deshabilitar la funcionalidad de clasificación para la columna específica. Cuando está habilitada, los usuarios pueden ordenar los datos de la tabla en función de los valores de esta columna.
##### Busca y exporta
El componente **Tabla** proporciona las siguientes opciones para activar o desactivar las funciones de búsqueda y exportación:
+ **Mostrar búsqueda** Cuando está habilitada, esta opción agrega un campo de entrada de búsqueda a la tabla, lo que permite a los usuarios buscar y filtrar los datos mostrados.
+ **Mostrar exportación** Cuando está habilitada, esta opción agrega una opción de exportación a la tabla, lo que permite a los usuarios descargar los datos de la tabla en varios formatos, por ejemplo: CSV.
**nota**
De forma predeterminada, la funcionalidad de búsqueda se limita a los datos que se han cargado en la tabla. Para utilizar la búsqueda de forma exhaustiva, tendrá que cargar todas las páginas de datos.
##### Filas por página
Puede especificar el número de filas que se mostrarán por página de la tabla. A continuación, los usuarios pueden navegar entre las páginas para ver el conjunto de datos completo.
##### Límite de captura previa
Especifique el número máximo de registros que se van a recuperar previamente en cada solicitud de consulta. El máximo es 3000.
##### Acciones
En la sección **Acciones**, configure las siguientes propiedades:
+ **Ubicación de la acción**: cuando se **activa la opción Fijar a la derecha**, cualquier acción que se añada siempre se mostrará a la derecha de la tabla, independientemente de si el usuario se desplaza por ella.
+ **Acciones**: añade botones de acción a la tabla. Puede configurar estos botones para que realicen acciones específicas cuando un usuario haga clic en ellos, como:
+ Ejecuta una acción componente
+ Navegue a una página diferente
+ Invoca una acción de datos
+ Ejecute de forma personalizada JavaScript
+ Invoca una automatización
##### Expressions
El componente **Tabla** proporciona varias áreas para usar expresiones y capacidades de acción a nivel de fila que permiten personalizar y mejorar la funcionalidad e interactividad de la tabla. Permiten hacer referencia a los datos de la tabla y mostrarlos de forma dinámica. Al aprovechar estos campos de expresión, puede crear columnas dinámicas, pasar datos a acciones de nivel de fila y hacer referencia a datos de tablas de otros componentes o expresiones de su aplicación.
##### Ejemplos: hacer referencia a valores de fila
`{{currentRow.columnName}}`o `{{currentRow["Column Name"]}}` Estas expresiones permiten hacer referencia al valor de una columna específica para la fila actual que se está renderizando. Sustituya *columnName* o *Column Name* por el nombre real de la columna a la que desee hacer referencia.
Ejemplos:
+ `{{currentRow.productName}}`Muestra el nombre del producto de la fila actual.
+ `{{currentRow["Supplier Name"]}}`Muestra el nombre del proveedor de la fila actual, donde está el encabezado de la columna*Supplier Name*.
+ `{{currentRow.orderDate}}`Muestra la fecha del pedido de la fila actual.
##### Ejemplos: hacer referencia a la fila seleccionada
`{{ui.table1.selectedRow["columnName"]}}`Esta expresión le permite hacer referencia al valor de una columna específica para la fila actualmente seleccionada en la tabla con el ID*table1*. *table1*Sustitúyalo por el identificador real del componente de la tabla y *columnName* por el nombre de la columna a la que quieres hacer referencia.
Ejemplos:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`Muestra el importe total de la fila actualmente seleccionada en la tabla con el identificador*ordersTable*.
+ `{{ui.customersTable.selectedRow["email"]}}`Muestra la dirección de correo electrónico de la fila actualmente seleccionada en la tabla con el ID*customersTable*.
+ `{{ui.employeesTable.selectedRow["department"]}}`Muestra el departamento de la fila actualmente seleccionada en la tabla con el ID*employeesTable*.
##### Ejemplos: creación de columnas personalizadas
Puede añadir columnas personalizadas a una tabla en función de los datos devueltos por la acción, automatización o expresión de datos subyacentes. Puede usar valores y JavaScript expresiones de columnas existentes para crear columnas nuevas.
Ejemplos:
+ `{{currentRow.quantity * currentRow.unitPrice}}`Crea una nueva columna que muestra el precio total multiplicando las columnas de cantidad y precio unitario.
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Crea una nueva columna que muestra la fecha del pedido en un formato más legible.
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Crea una nueva columna con el nombre completo y la dirección de correo electrónico de cada fila.
##### Ejemplos: Personalización de los valores de visualización de las columnas:
Puede personalizar el valor de visualización de un campo dentro de una columna de la tabla configurando el `Value` campo de la asignación de columnas. Esto le permite aplicar un formato personalizado o transformaciones a los datos mostrados.
Ejemplos:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Muestra los emojis de estrellas en función del valor de valoración de cada fila.
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Muestra el valor de la categoría con cada palabra en mayúscula para cada fila.
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: muestra un emoji circular coloreado y un texto en función del valor de estado de cada fila.
##### Acciones de botones a nivel de fila
`{{currentRow.columnName}}`o bien, `{{currentRow["Column Name"]}}` puede usar estas expresiones para transmitir el contexto de la fila a la que se hace referencia dentro de una acción a nivel de fila, como navegar a otra página con los datos de la fila seleccionada o activar una automatización con los datos de la fila.
Ejemplos:
+ Si tienes un botón de edición en la columna de acciones de la fila, puedes pasarlo `{{currentRow.orderId}}` como parámetro para navegar a una página de edición de pedidos con el identificador del pedido seleccionado.
+ Si tienes un botón de eliminación en la columna de acciones de la fila, puedes pasar `{{currentRow.customerName}}` a una automatización que envíe un correo electrónico de confirmación al cliente antes de eliminar su pedido.
+ Si tienes un botón para ver los detalles en la columna de acciones de la fila, puedes pasar `{{currentRow.employeeId}}` a una automatización que registre al empleado que ha visto los detalles del pedido.
Al aprovechar estos campos de expresión y las capacidades de acción a nivel de fila, puede crear tablas interactivas y altamente personalizadas que muestran y manipulan los datos en función de sus requisitos específicos. Además, puede conectar las acciones a nivel de fila con otros componentes o automatizaciones de su aplicación, lo que permite un flujo de datos y una funcionalidad fluidos.
### Detalle
El componente **Detalle** está diseñado para mostrar información detallada sobre un registro o elemento específico. Proporciona un espacio dedicado para presentar datos completos relacionados con una sola entidad o fila, lo que lo hace ideal para mostrar detalles detallados o facilitar las tareas de entrada y edición de datos.
#### Propiedades de detalle
El componente **Detalle** comparte varias propiedades comunes con otros componentes`Name`, como`Source`, y`Actions`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
El componente **Detalle** también tiene propiedades y opciones de configuración específicas, que incluyen `Fields``Layout`, y`Expressions`.
#### Diseño
La sección **Diseño** le permite personalizar la disposición y la presentación de los campos del componente **Detalle**. Puede configurar opciones como:
+ **Número de columnas**: especifique el número de columnas en las que se mostrarán los campos.
+ Orden de **campos**: arrastre y suelte los campos para reordenar su apariencia.
+ **Espaciado y alineación**: ajuste el espaciado y la alineación de los campos dentro del componente.
#### Expresiones y ejemplos
El componente **Detalle** proporciona varios campos de expresión que permiten hacer referencia a los datos del componente y mostrarlos de forma dinámica. Estas expresiones le permiten crear componentes de **detalle** personalizados e interactivos que se conectan sin problemas con los datos y la lógica de la aplicación.
##### Ejemplo: hacer referencia a datos
`{{ui.details.data[0]?.["colName"]}}`: Esta expresión le permite hacer referencia al valor de la columna denominada «colName» para el primer elemento (índice 0) de la matriz de datos conectada al componente **Detail** con el identificador «details». Sustituya «colName» por el nombre real de la columna a la que desee hacer referencia. Por ejemplo, la siguiente expresión mostrará el valor de la columna «CustomerName» del primer elemento de la matriz de datos conectada al componente «details»:
```
{{ui.details.data[0]?.["customerName"]}}
```
**nota**
Esta expresión resulta útil cuando el componente **Detalle** está en la misma página que la tabla a la que se hace referencia y desea mostrar los datos de la primera fila de la tabla en el componente **Detalle**.
##### Ejemplo: representación condicional
`{{ui.table1.selectedRow["colName"]}}`: Esta expresión vuelve a ser verdadera si la fila seleccionada de la tabla con el ID *table1* contiene datos para la columna nombrada*colName*. Se puede utilizar para mostrar u ocultar de forma condicional el componente de **detalle** en función de si la fila seleccionada de la tabla está vacía o no.
Ejemplo:
Puede utilizar esta expresión en la `Visible if` propiedad del componente **Detalle** para mostrarla u ocultarla de forma condicional en función de la fila seleccionada de la tabla.
```
{{ui.table1.selectedRow["customerName"]}}
```
Si esta expresión se evalúa como verdadera (la fila seleccionada en el *table1* componente tiene un valor para la *customerName* columna), el componente **Detalle** estará visible. Si la expresión se evalúa como falsa (es decir, la fila seleccionada está vacía o no tiene un valor para «CustomerName»), **el** componente Detail se ocultará.
##### Ejemplo: visualización condicional
`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: Esta expresión muestra condicionalmente un emoji en función del valor de un componente o campo de datos.
Desglose:
+ `ui.Component.value`: Hace referencia al valor de un componente con el ID*Component*.
+ `=== "green"`: Comprueba si el valor del componente es igual a la cadena «verde».
+ `? "🟢"`: Si la condición es verdadera, muestra el emoji del círculo verde.
+ `: ui.Component.value === "yellow" ? "🟡"`: Si la primera condición es falsa, comprueba si el valor del componente es igual a la cadena «amarilla».
+ `? "🟡"`: Si la segunda condición es verdadera, muestra el emoji cuadrado amarillo.
+ `: ui.detail1.data?.[0]?.CustomerStatus`: Si ambas condiciones son falsas, hace referencia al valor CustomerStatus «» del primer elemento de la matriz de datos conectada al componente Detail con el identificador «detail1".
Esta expresión se puede utilizar para mostrar un emoji o un valor específico en función del valor de un componente o campo de datos del componente **Detalle**.
### Métricas
El componente **Métricas** es un elemento visual que muestra métricas o puntos de datos clave en un formato similar al de una tarjeta. Está diseñado para proporcionar una forma concisa y visualmente atractiva de presentar información importante o indicadores de rendimiento.
#### Propiedades de las métricas
El componente **Metrics** comparte varias propiedades comunes con otros componentes`Name`, como`Source`, y`Actions`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
#### Tendencia
La función de tendencias de las métricas le permite mostrar un indicador visual del rendimiento o del cambio a lo largo del tiempo de la métrica que se muestra.
##### Valor de tendencia
Este campo le permite especificar el valor o la expresión que se debe utilizar para determinar la dirección y la magnitud de la tendencia. Normalmente, se trata de un valor que representa el cambio o el rendimiento durante un período de tiempo específico.
Ejemplo:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```
Esta expresión recupera el valor de los month-over-month ingresos del primer elemento de los datos conectados a las métricas de «SalesMetrics».
##### Tendencia positiva
Este campo le permite introducir una expresión que defina la condición de una tendencia positiva. La expresión debe dar como resultado verdadera o falsa.
Ejemplo:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```
Esta expresión comprueba si el valor de month-over-month los ingresos es superior a 0, lo que indica una tendencia positiva.
##### Tendencia negativa
Este campo le permite introducir una expresión que defina la condición de una tendencia negativa. La expresión debe dar como resultado verdadera o falsa.
Ejemplo:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```
Esta expresión comprueba si el valor de month-over-month los ingresos es inferior a 0, lo que indica una tendencia negativa.
##### Barra de colores
Esta opción permite activar o desactivar la visualización de una barra de color para indicar visualmente el estado de la tendencia.
##### Ejemplos de barras de colores:
##### Ejemplo: tendencia de las métricas de ventas
+ **Valor de tendencia**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **Tendencia positiva**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **Tendencia negativa**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **Barra de colores**: habilitada
##### Ejemplo: tendencia de las métricas de inventario
+ **Valor de tendencia**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tendencia positiva**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tendencia negativa**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Barra de colores: habilitada**
##### Ejemplo: tendencia de satisfacción del cliente
+ **Valor de tendencia**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **Tendencia positiva**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **Tendencia negativa**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **Barra de colores**: habilitada
Al configurar estas propiedades relacionadas con las tendencias, puede crear componentes de **métricas** que proporcionen una representación visual del rendimiento o del cambio a lo largo del tiempo de la métrica que se muestra.
Al aprovechar estas expresiones, puede crear componentes de métricas altamente personalizados e interactivos que hagan referencia a los datos y los muestren de forma dinámica, lo que le permitirá mostrar las métricas clave, los indicadores de rendimiento y las visualizaciones basadas en datos dentro de su aplicación.
#### Ejemplos de expresiones de métricas
En el panel de propiedades, puede introducir expresiones para mostrar el título, el valor principal, el valor secundario y el título del valor para mostrar un valor de forma dinámica.
##### Ejemplo: hacer referencia al valor principal
`{{ui.metric1.primaryValue}}`: Esta expresión te permite hacer referencia al valor principal del componente de **métricas** con el ID *metric1* de otros componentes o expresiones de la misma página.
Ejemplo: `{{ui.salesMetrics.primaryValue}}` mostrará el valor principal del componente *salesMetrics* **Metrics**.
##### Ejemplo: hacer referencia a un valor secundario
`{{ui.metric1.secondaryValue}}`: Esta expresión te permite hacer referencia al valor secundario del componente **Metrics** con el ID *metric1* de otros componentes o expresiones de la misma página.
Ejemplo: `{{ui.revenueMetrics.secondaryValue}}` mostrará el valor secundario del componente *revenueMetrics* **Metrics**.
##### Ejemplo: hacer referencia a datos
`{{ui.metric1.data}}`: Esta expresión le permite hacer referencia a los datos del componente **Metrics** con el ID *metric1* de otros componentes o expresiones de la misma página.
Ejemplo: `{{ui.kpiMetrics.data}}` hará referencia a los datos conectados al componente *kpiMetrics* **Metrics**.
##### Ejemplo: mostrar valores de datos específicos:
`{{ui.metric1.data?.[0]?.id}}`: Esta expresión es un ejemplo de cómo mostrar una información específica de los datos conectados al componente de **métricas** con el ID*metric1*. Resulta útil cuando se quiere mostrar una propiedad específica del primer elemento de los datos.
Desglose:
+ `ui.metric1`: Hace referencia al componente de **métricas** con el ID*metric1*.
+ `data`: Hace referencia a la información o al conjunto de datos conectado a ese componente.
+ `?.[0]`: Hace referencia al primer elemento o entrada de ese conjunto de datos.
+ `?.id`: Muestra el *id* valor o identificador del primer elemento o entrada.
Ejemplo: `{{ui.orderMetrics.data?.[0]?.orderId}}` mostrará el *orderId* valor del primer elemento de los datos conectados al componente de *orderMetrics* **métricas**.
##### Ejemplo: mostrar la longitud de los datos
`{{ui.metric1.data?.length}}`: Esta expresión muestra cómo mostrar la longitud (número de elementos) de los datos conectados al componente **Metrics** con el ID*metric1*. Resulta útil cuando se quiere mostrar el número de elementos de los datos.
Desglose:
+ `ui.metric1.data`: Hace referencia al conjunto de datos conectado al componente.
+ `?.length`: Accede al recuento total o al número de elementos o entradas de ese conjunto de datos.
Ejemplo: `{{ui.productMetrics.data?.length}}` mostrará el número de elementos de los datos conectados al componente de *productMetrics* **métricas**.
### Repetidor
El componente **Repeater** es un componente dinámico que permite generar y mostrar un conjunto de elementos en función de una fuente de datos proporcionada. Está diseñado para facilitar la creación de listas, cuadrículas o patrones repetitivos en la interfaz de usuario de la aplicación. Algunos ejemplos de casos de uso incluyen:
+ Mostrar una tarjeta para cada usuario de una cuenta
+ Mostrar una lista de productos que incluye imágenes y un botón para añadirlos al carrito
+ Muestra una lista de archivos a los que el usuario puede acceder
El componente **Repeater** se diferencia del componente **Table** por su rico contenido. Un componente **de tabla** tiene un formato de fila y columna estricto. El **repetidor** puede mostrar sus datos de forma más flexible.
#### Propiedades del repetidor
El componente **Repeater** comparte varias propiedades comunes con otros componentes, como `Name``Source`, y. `Actions` Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
Además de las propiedades comunes, el componente **Repeater** tiene las siguientes propiedades y opciones de configuración adicionales.
#### Plantilla de artículo
La **plantilla de elementos** es un contenedor en el que puede definir la estructura y los componentes que se repetirán para cada elemento de la fuente de datos. Puede arrastrar y soltar otros componentes en este contenedor, como **texto**, **imagen**, **botón** o cualquier otro componente que necesite para representar cada elemento.
Dentro de la **plantilla de elemento**, puede hacer referencia a propiedades o valores del elemento actual mediante expresiones del formato`{{currentItem.propertyName}}`.
Por ejemplo, si la fuente de datos contiene una `itemName` propiedad, puede utilizarla `{{currentItem.itemName}}` para mostrar los nombres de los elementos actuales.
#### Diseño
La sección de **diseño** le permite configurar la disposición de los elementos repetidos dentro del componente repetidor.
##### Orientation (Orientación)
+ **Lista**: organiza los elementos repetidos verticalmente en una sola columna.
+ **Cuadrícula**: organiza los elementos repetidos en un diseño de cuadrícula con varias columnas.
##### Filas por página
Especifique el número de filas que se van a mostrar por página en el diseño de lista. Se proporciona paginación para los elementos que sobrepasen el número de filas especificado.
##### Columnas y filas por página (cuadrícula)
+ **Columnas**: especifique el número de columnas en el diseño de cuadrícula.
+ **Filas por página**: especifique el número de filas que se van a mostrar por página en el diseño de cuadrícula. Se proporciona paginación para los elementos que sobrepasen las dimensiones de cuadrícula especificadas.
#### Expresiones y ejemplos
El componente **Repeater** proporciona varios campos de expresión que permiten hacer referencia a los datos del componente y mostrarlos de forma dinámica. Estas expresiones le permiten crear componentes **repetidores** personalizados e interactivos que se conectan sin problemas con los datos y la lógica de su aplicación.
##### Ejemplo: hacer referencia a elementos
+ `{{currentItem.propertyName}}`: haga referencia a propiedades o valores del elemento actual dentro de la **plantilla de elementos**.
+ `{{ui.repeaterID[index]}}`: Haga referencia a un elemento específico del componente repetidor por su índice.
##### Ejemplo: renderizar una lista de productos
+ **Fuente**: seleccione la *Products* entidad como fuente de datos.
+ **Plantilla de artículo**: añada un componente de **contenedor** con un componente de **texto** en su interior para mostrar el nombre del producto (`{{currentItem.productName}}`) y un componente de **imagen** para mostrar la imagen del producto (`{{currentItem.productImageUrl}}`).
+ **Diseño**: `Orientation` configúrelo `List` y `Rows per Page` ajústelo como desee.
##### Ejemplo: generar una cuadrícula de avatares de usuario
+ **Fuente**: utilice una expresión para generar una matriz de datos de usuario (por ejemplo,`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`).
+ **Plantilla de elemento**: añada un componente de **imagen** y establezca su `Source` propiedad en`{{currentItem.avatarUrl}}`.
+ **Diseño**: `Orientation` defina el valor`Grid`, especifique el número de `Columns` y y`Rows per Page`, a continuación, ajuste el `Space Between` y `Padding` según sea necesario.
Al utilizar el `Repeater` componente, puede crear interfaces de usuario dinámicas y basadas en datos, lo que agiliza el proceso de renderización de conjuntos de elementos y reduce la necesidad de repetirlas manualmente o codificarlas de forma rígida.
### Formulario
El componente Form está diseñado para capturar las entradas de los usuarios y facilitar las tareas de entrada de datos dentro de la aplicación. Proporciona un diseño estructurado para mostrar los campos de entrada, los menús desplegables, las casillas de verificación y otros controles de formulario, lo que permite a los usuarios introducir o modificar datos sin problemas. Puede anidar otros componentes dentro de un componente de formulario, como una tabla.
#### Propiedades del formulario
El componente **Form** comparte varias propiedades comunes con otros componentes`Name`, como`Source`, y`Actions`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
#### Generar formulario
La función **Generar formulario** facilita la creación rápida de campos de formulario al rellenarlos automáticamente en función de una fuente de datos seleccionada. Esto puede ahorrar tiempo y esfuerzo a la hora de crear formularios que necesiten mostrar una gran cantidad de campos.
**Para usar la función **Generar formulario**:**
1. En las propiedades del componente de **formulario**, busque la sección **Generar formulario**.
1. Seleccione la fuente de datos que desee utilizar para generar los campos del formulario. Puede ser una entidad, un flujo de trabajo o cualquier otra fuente de datos disponible en la aplicación.
1. Los campos del formulario se generarán automáticamente en función de la fuente de datos seleccionada, incluidas las etiquetas de los campos, los tipos y las asignaciones de datos.
1. Revise los campos generados y realice las personalizaciones necesarias, como agregar reglas de validación o cambiar el orden de los campos.
1. Cuando esté satisfecho con la configuración del formulario, seleccione **Enviar** para aplicar los campos generados al componente del **formulario**.
La función **Generar formulario** es especialmente útil cuando la aplicación tiene un modelo de datos o un conjunto de entidades bien definidos para los que necesita capturar las entradas de los usuarios. Al generar automáticamente los campos del formulario, puede ahorrar tiempo y garantizar la coherencia en todos los formularios de su solicitud.
Tras utilizar la función **Generar formulario**, puede personalizar aún más el diseño, las acciones y las expresiones del componente del **formulario** para adaptarlo a sus requisitos específicos.
#### Expresiones y ejemplos
Al igual que otros componentes, puede utilizar expresiones para hacer referencia a los datos del componente **Form** y mostrarlos. Por ejemplo:
+ `{{ui.userForm.data.email}}`: hace referencia al valor del `email` campo de la fuente de datos conectada al componente del **formulario** con el ID`userForm`.
**nota**
Consulte [Propiedades comunes de los componentes](#common-properties) para ver más ejemplos de expresiones de las propiedades comunes.
Al configurar estas propiedades y aprovechar las expresiones, puede crear componentes de formulario personalizados e interactivos que se integren perfectamente con las fuentes de datos y la lógica de su aplicación. Estos componentes se pueden utilizar para capturar las entradas de los usuarios, mostrar los datos rellenados previamente y activar acciones en función de los envíos de los formularios o de las interacciones de los usuarios.
### Stepflow
El componente **Stepflow** está diseñado para guiar a los usuarios a través de procesos o flujos de trabajo de varios pasos dentro de su aplicación. Proporciona una interfaz estructurada e intuitiva para presentar una secuencia de pasos, cada uno con su propio conjunto de entradas, validaciones y acciones.
El componente Stepflow comparte varias propiedades comunes con otros componentes, como`Name`, y`Source`. `Actions` Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
El componente **Stepflow** tiene propiedades y opciones de configuración adicionales, como `Step Navigation``Validation`, y`Expressions`.
## Componentes de IA
### Generación AI
El componente **Gen AI** es un contenedor de agrupamiento que se utiliza para agrupar los componentes y la lógica que los acompaña para editarlos fácilmente con IA mediante el chat del estudio de aplicaciones. Cuando utilices el chat para crear componentes, se agruparán en un contenedor **Gen AI**. Para obtener información sobre la edición o el uso de este componente, consulte[Creación o edición de su aplicación](generative-ai.md#generative-ai-build-app).
## Componentes numéricos y de texto
### Entrada de texto
El componente **de entrada de texto** permite a los usuarios introducir y enviar datos de texto dentro de la aplicación. Proporciona una forma sencilla e intuitiva de capturar las entradas de los usuarios, como nombres, direcciones o cualquier otra información textual.
+ `{{ui.inputTextID.value}}`: devuelve el valor proporcionado en el campo de entrada.
+ `{{ui.inputTextID.isValid}}`: Devuelve la validez del valor proporcionado en el campo de entrada.
### Texto
El componente de **texto** se utiliza para mostrar información textual dentro de la aplicación. Se puede usar para mostrar texto estático, valores dinámicos o contenido generado a partir de expresiones.
### Área de texto
El componente de **área de texto** está diseñado para capturar la entrada de texto de varias líneas por parte de los usuarios. Proporciona un área de campo de entrada más grande para que los usuarios introduzcan entradas de texto más largas, como descripciones, notas o comentarios.
+ `{{ui.textAreaID.value}}`: devuelve el valor proporcionado en el área de texto.
+ `{{ui.textAreaID.isValid}}`: Devuelve la validez del valor proporcionado en el área de texto.
### Correo electrónico
El componente **Correo electrónico** es un campo de entrada especializado diseñado para capturar las direcciones de correo electrónico de los usuarios. Puede aplicar reglas de validación específicas para garantizar que el valor ingresado cumpla con el formato de correo electrónico correcto.
+ `{{ui.emailID.value}}`: Devuelve el valor proporcionado en el campo de entrada del correo electrónico.
+ `{{ui.emailID.isValid}}`: Devuelve la validez del valor proporcionado en el campo de entrada del correo electrónico.
### Contraseña
El componente **Contraseña** es un campo de entrada diseñado específicamente para que los usuarios introduzcan información confidencial, como contraseñas o códigos PIN. Enmascara los caracteres introducidos para mantener la privacidad y la seguridad.
+ `{{ui.passwordID.value}}`: Devuelve el valor proporcionado en el campo de entrada de la contraseña.
+ `{{ui.passwordID.isValid}}`: Devuelve la validez del valor proporcionado en el campo de entrada de la contraseña.
### Search
El componente **de búsqueda** proporciona a los usuarios un campo de entrada específico para realizar consultas de búsqueda o introducir términos de búsqueda dentro de los datos rellenados en la aplicación.
+ `{{ui.searchID.value}}`: devuelve el valor proporcionado en el campo de búsqueda.
### Teléfono
El componente **Teléfono** es un campo de entrada diseñado para capturar números de teléfono u otra información de contacto de los usuarios. Puede incluir reglas de validación y opciones de formato específicas para garantizar que el valor introducido tenga el formato de número de teléfono correcto.
+ `{{ui.phoneID.value}}`: devuelve el valor proporcionado en el campo de entrada del teléfono.
+ `{{ui.phoneID.isValid}}`: Devuelve la validez del valor proporcionado en el campo de entrada del teléfono.
### Número
El componente **numérico** es un campo de entrada diseñado específicamente para que los usuarios introduzcan valores numéricos. Puede aplicar reglas de validación para garantizar que el valor introducido sea un número válido dentro de un rango o formato específico.
+ `{{ui.numberID.value}}`: Devuelve el valor proporcionado en el campo de entrada numérica.
+ `{{ui.numberID.isValid}}`: Devuelve la validez del valor proporcionado en el campo de entrada numérica.
### Currency (Divisa)
El componente **Moneda** es un campo de entrada especializado para capturar valores o importes monetarios. Puede incluir opciones de formato para mostrar símbolos de divisas y separadores decimales y aplicar reglas de validación específicas para las entradas de divisas.
+ `{{ui.currencyID.value}}`: devuelve el valor proporcionado en el campo de entrada de divisas.
+ `{{ui.currencyID.isValid}}`: Devuelve la validez del valor proporcionado en el campo de entrada de moneda.
### Par de detalles
El componente **Detail pair** se utiliza para mostrar pares clave-valor o pares de información relacionada en un formato estructurado y legible. Se suele utilizar para presentar detalles o metadatos asociados a un elemento o entidad específicos.
## Componentes de selección
### Switch
El componente **Switch** es un control de interfaz de usuario que permite a los usuarios alternar entre dos estados u opciones, comoon/off, true/false, or enabled/disabled. Proporciona una representación visual del estado actual y permite a los usuarios cambiarlo con un solo clic o toque.
### Cambie de grupo
El componente del **grupo de conmutadores** es un conjunto de controles de conmutador individuales que permiten a los usuarios seleccionar una o más opciones de un conjunto predefinido. Proporciona una representación visual de las opciones seleccionadas y no seleccionadas, lo que facilita a los usuarios la comprensión de las opciones disponibles y la interacción con ellas.
#### Cambie los campos de expresión de grupo
+ `{{ui.switchGroupID.value}}`: devuelve una matriz de cadenas que contiene el valor de cada conmutador activado por el usuario de la aplicación.
### Grupo de casillas de verificación
El componente del **grupo de casillas de verificación** presenta a los usuarios un grupo de casillas de verificación, lo que les permite seleccionar varias opciones simultáneamente. Resulta útil cuando se quiere ofrecer a los usuarios la posibilidad de elegir uno o más elementos de una lista de opciones.
#### Las casillas de verificación agrupan campos de expresión
+ `{{ui.checkboxGroupID.value}}`: devuelve una matriz de cadenas que contiene el valor de cada casilla de verificación seleccionada por el usuario de la aplicación.
### Grupo de radios
El componente del **grupo de radios** es un conjunto de botones de radio que permiten a los usuarios seleccionar una sola opción entre varias opciones que se excluyen mutuamente. Garantiza que solo se pueda seleccionar una opción a la vez, lo que proporciona a los usuarios una forma clara e inequívoca de realizar una selección.
#### Campos de expresión de grupos de radio
Los siguientes campos se pueden utilizar en las expresiones.
+ `{{ui.radioGroupID.value}}`: Devuelve el valor del botón de radio seleccionado por el usuario de la aplicación.
### Selección única
El componente de **selección única** presenta a los usuarios una lista de opciones entre las que pueden seleccionar un único elemento. Se suele utilizar en situaciones en las que los usuarios necesitan elegir entre un conjunto predefinido de opciones, como seleccionar una categoría, una ubicación o una preferencia.
#### Campos de expresión de selección única
+ `{{ui.singleSelectID.value}}`: devuelve el valor del elemento de la lista seleccionado por el usuario de la aplicación.
### Selección múltiple
El componente de **selección múltiple** es similar al componente de **selección única**, pero permite a los usuarios seleccionar varias opciones simultáneamente de una lista de opciones. Resulta útil cuando los usuarios necesitan realizar varias selecciones de un conjunto predefinido de opciones, como seleccionar varias etiquetas, intereses o preferencias.
#### Campos de expresión de selección múltiple
+ `{{ui.multiSelectID.value}}`: devuelve una matriz de cadenas que contiene el valor de cada elemento de la lista seleccionado por el usuario de la aplicación.
## Botones y componentes de navegación
El estudio de aplicaciones proporciona una variedad de botones y componentes de navegación que permiten a los usuarios activar acciones y navegar dentro de la aplicación.
### Componentes de botones
Los componentes de los botones disponibles son:
+ Button
+ Botón perfilado
+ Botón de icono
+ Botón de texto
Estos componentes del botón comparten las siguientes propiedades comunes:
#### Contenidos
+ **Etiqueta del botón**: el texto que se mostrará en el botón.
#### Tipo
+ **Botón**: un botón estándar.
+ **Delineado**: botón con un estilo delineado.
+ **Icono**: botón con un icono.
+ **Texto**: botón de solo texto.
#### Tamaño
El tamaño del botón. Los posibles valores son `Small`, `Medium` y `Large`.
#### Icono
Puede seleccionar entre una variedad de iconos para que se muestren en el botón, entre los que se incluyen:
+ Sobre cerrado
+ Bell
+ Persona
+ Menú de hamburguesas
+ Search
+ Información en un círculo
+ Engranaje
+ Chevron a la izquierda
+ Chevron a la derecha
+ Puntos horizontales
+ Papelera
+ Edición
+ Check
+ Cerrar
+ Inicio
+ Plus
#### Desencadenadores
Al hacer clic en el botón, puede configurar una o más acciones para que se activen. Los tipos de acciones disponibles son:
+ **Básica**
+ Ejecutar acción de componente: ejecuta una acción específica dentro de un componente.
+ Navegar: navega a otra página o vista.
+ Invocar una acción de datos: activa una acción relacionada con los datos, como crear, actualizar o eliminar un registro.
+ **Advanced (Avanzado)**
+ JavaScript: ejecuta código personalizado JavaScript .
+ Invoke Automation: inicia una automatización o un flujo de trabajo existente.
#### JavaScript propiedades del botón de acción
Seleccione el tipo de `JavaScript` acción para ejecutar el JavaScript código personalizado al hacer clic en el botón.
##### Código fuente
En el `Source code` campo, puede introducir su JavaScript expresión o función. Por ejemplo:
```
return "Hello World";
```
Esto simplemente devolverá la cadena `Hello World` al hacer clic en el botón.
##### Condición: Ejecute si
También puede proporcionar una expresión booleana que determine si la JavaScript acción debe ejecutarse o no. Utiliza la siguiente sintaxis:
```
{{ui.textinput1.value !== ""}}
```
En este ejemplo, la JavaScript acción solo se ejecutará si el valor del `textinput1` componente no es una cadena vacía.
Con estas opciones de activación avanzadas, puede crear comportamientos de botones altamente personalizados que se integren directamente con la lógica y los datos de la aplicación. Esto le permite ampliar la funcionalidad integrada de los botones y adaptar la experiencia del usuario a sus requisitos específicos.
**nota**
Pruebe siempre minuciosamente sus JavaScript acciones para asegurarse de que funcionan según lo esperado.
### Hiperenlace
El componente **Hyperlink** proporciona un enlace en el que se puede hacer clic para navegar a las rutas de aplicaciones externas URLs o internas.
#### Propiedades del hipervínculo
##### Contenidos
+ **Etiqueta de hipervínculo**: el texto que se mostrará como etiqueta de hipervínculo.
##### URL
La URL de destino del hipervínculo, que puede ser un sitio web externo o una ruta de aplicación interna.
##### Desencadenadores
Al hacer clic en el hipervínculo, puede configurar una o más acciones para que se activen. Los tipos de acciones disponibles son los mismos que los de los componentes del botón.
## Componentes de fecha y hora
### Date
El componente **Fecha** permite a los usuarios seleccionar e introducir fechas.
El componente **Date** comparte varias propiedades comunes con otros componentes`Name`, como`Source`, y`Validation`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
Además de las propiedades comunes, el componente **Date** tiene las siguientes propiedades específicas:
#### Propiedades de fecha
##### Formato
+ **YYYY/MM/DD**, **DD/MM/YYYY**,, **YYYY/MM/DD**YYYY/DD/MM****, **MM/DD**, **DD/MM**: formato en el que debe mostrarse la fecha.
##### Valor
+ **AAAA-MM-DD**: formato en el que se almacena internamente el valor de la fecha.
##### Fecha mínima
+ **AAAA-MM-DD**: La fecha mínima que se puede seleccionar.
**nota**
Este valor debe coincidir con el formato de. `YYYY-MM-DD`
##### Fecha máxima
+ **AAAA-MM-DD**: la fecha máxima que se puede seleccionar.
**nota**
Este valor debe coincidir con el formato de. `YYYY-MM-DD`
##### Tipo de calendario
+ **1 mes**, **2 meses**: el tipo de interfaz de usuario del calendario que se mostrará.
##### Fechas deshabilitadas
+ **Fuente**: la fuente de datos de las fechas que deberían deshabilitarse. Por ejemplo: Ninguno, Expresión.
+ **Fechas deshabilitadas**: expresión que determina qué fechas deben deshabilitarse, como:
+ `{{currentRow.column}}`: desactiva las fechas que coinciden con lo que evalúa esta expresión.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: Desactiva las fechas anteriores al 1 de enero de 2023
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Desactiva los fines de semana.
##### Comportamiento
+ **Visible si**: una expresión que determina la visibilidad del componente **Date**.
+ **Inhabilitar si**: una expresión que determina si el componente **Date** debe deshabilitarse.
#### Validación
La sección de **validación** le permite definir reglas y restricciones adicionales para la entrada de fechas. Al configurar estas reglas de validación, puede asegurarse de que los valores de fecha introducidos por los usuarios cumplan con los requisitos específicos de su aplicación. Puede añadir los siguientes tipos de validaciones:
+ **Obligatorio**: esta opción garantiza que el usuario deba introducir un valor de fecha antes de enviar el formulario.
+ **Personalizado**: puede crear reglas de validación personalizadas mediante JavaScript expresiones. Por ejemplo:
```
{{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
```
Esta expresión comprueba si la fecha introducida es anterior al 1 de enero de 2023. Si la condición es verdadera, la validación fallará.
También puede proporcionar un mensaje de validación personalizado para que se muestre cuando no se cumpla la validación:
```
"Validation not met. The date must be on or after January 1, 2023."
```
Al configurar estas reglas de validación, puede asegurarse de que los valores de fecha introducidos por los usuarios cumplan con los requisitos específicos de su aplicación.
#### Expresiones y ejemplos
El componente **Date** proporciona el siguiente campo de expresión:
+ `{{ui.dateID.value}}`: devuelve el valor de fecha introducido por el usuario en el formato`YYYY-MM-DD`.
### Time
El componente **Hora** permite a los usuarios seleccionar e introducir valores de hora. Al configurar las distintas propiedades del componente **Time**, puede crear campos de entrada de tiempo que cumplan con los requisitos específicos de su aplicación, como restringir el rango de tiempo seleccionable, deshabilitar determinados horarios y controlar la visibilidad e interactividad del componente.
#### Propiedades de tiempo
El componente **Time** comparte varias propiedades comunes con otros componentes, como `Name``Source`, y`Validation`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
Además de las propiedades comunes, el componente **Time** tiene las siguientes propiedades específicas:
##### Intervalos de tiempo
+ **5 minutos**, **10 minutos**, **15 minutos**, **20 minutos**, **25 minutos**, **30 minutos**, **60 minutos**: intervalos disponibles para seleccionar la hora.
##### Valor
+ **HH:MM AA**: formato en el que se almacena internamente el valor de la hora.
**nota**
Este valor debe coincidir con el formato de. `HH:MM AA`
##### Placeholder
+ **Configuración del calendario**: el texto del marcador de posición que se muestra cuando el campo de hora está vacío.
##### Tiempo mínimo
+ **HH:MM AA**: El tiempo mínimo que se puede seleccionar.
**nota**
Este valor debe coincidir con el formato de. `HH:MM AA`
##### Tiempo máximo
+ **HH:MM AA**: El tiempo máximo que se puede seleccionar.
**nota**
Este valor debe coincidir con el formato de. `HH:MM AA`
##### Horarios desactivados
+ **Fuente**: la fuente de datos de las horas que deberían estar deshabilitadas (p. ej., Ninguna, Expresión).
+ **Tiempos inhabilitados**: expresión que determina qué horas deben deshabilitarse, por ejemplo`{{currentRow.column}}`.
##### Configuración de horas deshabilitada
Puede usar la sección **Horarios desactivados** para especificar qué valores de tiempo no deberían estar disponibles para su selección.
##### origen
+ **Ninguna**: no hay ninguna hora desactivada.
+ **Expresión**: puede usar una JavaScript expresión para determinar qué horas deben deshabilitarse, por ejemplo`{{currentRow.column}}`.
##### Expresión de ejemplo:
```
{{currentRow.column === "Lunch Break"}}
```
Esta expresión se deshabilitaría en cualquier momento en el que la columna «Pausa para comer» sea verdadera para la fila actual.
Al configurar estas reglas de validación y deshabilitar las expresiones horarias, puede asegurarse de que los valores horarios introducidos por los usuarios cumplen los requisitos específicos de su aplicación.
##### Comportamiento
+ **Visible si**: una expresión que determina la visibilidad del componente Time.
+ **Inhabilitar si**: una expresión que determina si el componente Time debe deshabilitarse.
##### Validación
+ **Obligatorio**: una opción que garantiza que el usuario debe introducir un valor de tiempo antes de enviar el formulario.
+ **Personalizado**: permite crear reglas de validación personalizadas mediante JavaScript expresiones.
**Mensaje de validación personalizado**: el mensaje que se mostrará cuando no se cumpla la validación personalizada.
Por ejemplo:
```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```
Esta expresión comprueba si la hora ingresada es a las 9:00 a.m. o a las 9:30 a.m. Si la condición es verdadera, la validación fallará.
También puede proporcionar un mensaje de validación personalizado para que se muestre cuando no se cumpla la validación:
```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```
#### Expresiones y ejemplos
El componente Time proporciona el siguiente campo de expresión:
+ `{{ui.timeID.value}}`: Devuelve el valor de tiempo introducido por el usuario en el formato HH:MM AA.
##### Ejemplo: valor de tiempo
+ `{{ui.timeID.value}}`: Devuelve el valor de tiempo introducido por el usuario en el formato`HH:MM AA`.
##### Ejemplo: comparación de tiempos
+ `{{ui.timeInput.value > "10:00 AM"}}`: Comprueba si el valor de la hora es superior a las 10:00 a.m.
+ `{{ui.timeInput.value < "05:00 pM"}}`: Comprueba si el valor de la hora es inferior a las 17:00.
### Rango de fechas
El componente **Intervalo de fechas** permite a los usuarios seleccionar e introducir un intervalo de fechas. Al configurar las distintas propiedades del componente Rango de fechas, puede crear campos de entrada de rango de fechas que cumplan con los requisitos específicos de su aplicación, como restringir el rango de fechas seleccionable, deshabilitar determinadas fechas y controlar la visibilidad e interactividad del componente.
#### Propiedades del intervalo de fechas
El componente **Rango de fechas** comparte varias propiedades comunes con otros componentes`Name`, como`Source`, y`Validation`. Para obtener más información sobre estas propiedades, consulte[Propiedades comunes de los componentes](#common-properties).
Además de las propiedades comunes, el componente **Date Range** tiene las siguientes propiedades específicas:
##### Formato
+ **MM/DD/YYYY**: el formato en el que debe mostrarse el intervalo de fechas.
##### Fecha de inicio
+ **AAAA-MM-DD**: fecha mínima que se puede seleccionar como inicio del intervalo.
**nota**
Este valor debe coincidir con el formato de. `YYYY-MM-DD`
##### Fecha de finalización
+ **AAAA-MM-DD**: fecha máxima que se puede seleccionar como final del intervalo.
**nota**
Este valor debe coincidir con el formato de. `YYYY-MM-DD`
##### Placeholder
+ **Configuración del calendario**: el texto del marcador de posición que se muestra cuando el campo del intervalo de fechas está vacío.
##### Fecha mínima
+ **AAAA-MM-DD**: La fecha mínima que se puede seleccionar.
**nota**
Este valor debe coincidir con el formato de. `YYYY-MM-DD`
##### Fecha máxima
+ **AAAA-MM-DD**: la fecha máxima que se puede seleccionar.
**nota**
Este valor debe coincidir con el formato de. `YYYY-MM-DD`
##### Tipo de calendario
+ **1 mes**: el tipo de interfaz de usuario del calendario que se mostrará. Por ejemplo, un mes.
+ **2 meses**: el tipo de interfaz de usuario del calendario que se mostrará. Por ejemplo, dos meses.
##### Días obligatorios seleccionados
+ **0**: el número de días obligatorios que se deben seleccionar dentro del intervalo de fechas.
##### Fechas deshabilitadas
+ **Fuente**: la fuente de datos de las fechas que deberían estar deshabilitadas (p. ej., Ninguna, Expresión, Entidad o Automatización).
+ **Fechas deshabilitadas**: una expresión que determina qué fechas deben deshabilitarse, por ejemplo`{{currentRow.column}}`.
##### Validación
La sección de **validación** le permite definir reglas y restricciones adicionales para la entrada del intervalo de fechas.
#### Expresiones y ejemplos
El componente **Date Range** proporciona los siguientes campos de expresión:
+ `{{ui.dateRangeID.startDate}}`: devuelve la fecha de inicio del rango seleccionado en el formato`YYYY-MM-DD`.
+ `{{ui.dateRangeID.endDate}}`: devuelve la fecha de finalización del rango seleccionado en el formato`YYYY-MM-DD`.
##### Ejemplo: calcular la diferencia de fechas
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Calcula el número de días entre las fechas de inicio y finalización.
##### Ejemplo: visibilidad condicional basada en el rango de fechas
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Comprueba si el intervalo de fechas seleccionado está fuera del año 2023.
##### Ejemplo: fechas deshabilitadas en función de los datos de las filas actuales
+ `{{currentRow.isHoliday}}`Desactiva las fechas en las que la columna «IsHoliday» de la fila actual es verdadera.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Desactiva las fechas anteriores al 1 de enero de 2023 en función de la «columna de fecha» de la fila actual.
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Desactiva los fines de semana en función de la «columna de fecha» de la fila actual.
##### Validación personalizada
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Comprueba si la fecha de inicio es posterior a la fecha de finalización, lo que provocaría un error en la validación personalizada.
## Componentes multimedia
El estudio de aplicaciones proporciona varios componentes para incrustar y mostrar varios tipos de medios en la aplicación.
### iFrame incrustado
El componente de **incrustación de iFrame** le permite incrustar contenido web externo o aplicaciones dentro de su aplicación mediante un iFrame.
#### Propiedades de incrustación de iFrame
##### URL
**nota**
La fuente del contenido multimedia que se muestra en este componente debe estar permitida en la configuración de seguridad del contenido de la aplicación. Para obtener más información, consulte [Ver o actualizar la configuración de seguridad del contenido de tu aplicación](app-content-security-settings-csp.md).
La URL del contenido o la aplicación externos que desea incrustar.
##### Diseño
+ **Ancho**: el ancho del iFrame, especificado como un porcentaje (%) o un valor de píxel fijo (por ejemplo, 300 px).
+ **Altura**: la altura del iFrame, especificada como un porcentaje (%) o un valor de píxel fijo.
### Carga en S3
El componente de **carga de S3** permite a los usuarios cargar archivos a un bucket de Amazon S3. Al configurar el componente **S3 Upload**, puede permitir a los usuarios cargar archivos fácilmente al almacenamiento Amazon S3 de su aplicación y, a continuación, aprovechar la información de los archivos cargados en la lógica y la interfaz de usuario de la aplicación.
**nota**
Recuerde asegurarse de que cuentan con los permisos necesarios y las configuraciones de bucket de Amazon S3 para cumplir con los requisitos de carga y almacenamiento de archivos de su aplicación.
#### Propiedades de carga de S3
##### Configuración de S3
+ **Conector**: seleccione el conector Amazon S3 preconfigurado que se utilizará para la carga de archivos.
+ **Depósito**: el depósito de Amazon S3 en el que se subirán los archivos.
+ **Carpeta**: la carpeta del bucket de Amazon S3 en la que se almacenarán los archivos.
+ **Nombre del archivo**: la convención de nomenclatura de los archivos cargados.
##### Configuración de carga de archivos
+ **Etiqueta**: la etiqueta o las instrucciones que se muestran sobre el área de carga de archivos.
+ **Descripción**: instrucciones o información adicionales sobre la carga del archivo.
+ **Tipo de archivo**: el tipo de archivos que se pueden cargar. Por ejemplo: imagen, documento o vídeo.
+ **Tamaño**: el tamaño máximo de los archivos individuales que se pueden cargar.
+ **Etiqueta del botón**: el texto que se muestra en el botón de selección de archivos.
+ **Estilo del botón**: el estilo del botón de selección de archivos. Por ejemplo, contorneado o relleno.
+ **Tamaño del botón**: el tamaño del botón de selección de archivos.
##### Validación
+ **Número máximo de archivos**: el número máximo de archivos que se pueden cargar a la vez.
+ **Tamaño máximo de archivo**: el tamaño máximo permitido para cada archivo individual.
##### Desencadenadores
+ **En caso de éxito**: las acciones se activarán cuando la carga de un archivo se realice correctamente.
+ **En caso de error**: se activarán acciones cuando se produzca un error al cargar un archivo.
#### S3: carga campos de expresión
El componente de **carga de S3** proporciona los siguientes campos de expresión:
+ `{{ui.s3uploadID.files}}`: Devuelve una matriz de los archivos que se han cargado.
+ `{{ui.s3uploadID.files[0]?.size}}`: Devuelve el tamaño del archivo en el índice designado.
+ `{{ui.s3uploadID.files[0]?.type}}`: Devuelve el tipo de archivo en el índice designado.
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: Devuelve el nombre del archivo, sin sufijo de extensión, en el índice designado.
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: devuelve el nombre del archivo con su sufijo de extensión en el índice designado.
#### Expresiones y ejemplos
##### Ejemplo: acceder a los archivos subidos
+ `{{ui.s3uploadID.files.length}}`: devuelve el número de archivos que se han cargado.
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: Devuelve una lista separada por comas de los nombres de los archivos que se han cargado.
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: Devuelve una matriz de solo los archivos de imagen que se han cargado.
##### Ejemplo: validar las cargas de archivos
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: Comprueba si alguno de los archivos subidos supera los 5 MB de tamaño.
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: Comprueba si todos los archivos subidos son imágenes PNG.
+ `{{ui.s3uploadID.files.length > 3}}`: Comprueba si se han subido más de 3 archivos.
##### Ejemplo: activar acciones
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: Muestra un mensaje de confirmación si se ha cargado al menos un archivo.
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: Activa una automatización del procesamiento de vídeo si se ha cargado algún archivo de vídeo.
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: Recupera URLs los archivos cargados, que se pueden utilizar para mostrarlos o procesarlos posteriormente.
Estas expresiones le permiten acceder a los archivos cargados, validar las cargas de archivos y activar acciones en función de los resultados de la carga de archivos. Al utilizar estas expresiones, puede crear un comportamiento más dinámico e inteligente en la funcionalidad de carga de archivos de su aplicación.
**nota**
*s3uploadID*Sustitúyalo por el ID del componente de **carga de S3**.
### Componente de visor de PDF
El componente de **visor de PDF** permite a los usuarios ver los documentos PDF de la aplicación e interactuar con ellos. App Studio admite estos diferentes tipos de entrada para la fuente PDF. El componente de **visualización de PDF** proporciona flexibilidad a la hora de integrar los documentos PDF en la aplicación, ya sea desde una URL estática, un URI de datos en línea o contenido generado de forma dinámica.
#### Propiedades del visor de PDF
##### origen
**nota**
La fuente del contenido multimedia que se muestra en este componente debe estar permitida en la configuración de seguridad del contenido de la aplicación. Para obtener más información, consulte [Ver o actualizar la configuración de seguridad del contenido de tu aplicación](app-content-security-settings-csp.md).
El origen del documento PDF, que puede ser una expresión, una entidad, una URL o una automatización.
##### Expression
Utilice una expresión para generar dinámicamente la fuente PDF.
##### Entidad
Conecte el componente del **visor de PDF** a una entidad de datos que contenga el documento PDF.
##### URL
Especifique la URL del documento PDF.
##### URL
Puede introducir una URL que apunte al documento PDF que desea mostrar. Puede ser una URL web pública o una URL de tu propia aplicación.
Ejemplo: `https://example.com/document.pdf`
##### URI de datos
Un **URI de datos** es una forma compacta de incluir archivos de datos pequeños (como imágenes o PDFs) en línea dentro de la aplicación. El documento PDF está codificado como una cadena en base64 y se incluye directamente en la configuración del componente.
##### Blob o ArrayBuffer
También puede proporcionar el documento PDF como un blob u ArrayBuffer objeto, lo que le permite generar o recuperar dinámicamente los datos PDF de varias fuentes dentro de su aplicación.
##### Automatización
Conecte el componente del **visor de PDF** a una automatización que proporcione el documento PDF.
##### Acciones
+ **Descargar**: añade un botón o enlace que permite a los usuarios descargar el documento PDF.
##### Diseño
+ **Ancho**: el ancho del visor de PDF, especificado como un porcentaje (%) o un valor de píxel fijo (por ejemplo, 600 px).
+ **Altura**: la altura del visor de PDF, especificada como un valor de píxel fijo.
### Visor de imágenes
El componente del **visor de imágenes** permite a los usuarios ver los archivos de imagen de la aplicación e interactuar con ellos.
#### Propiedades del visor de imágenes
##### origen
**nota**
La fuente del contenido multimedia que se muestra en este componente debe estar permitida en la configuración de seguridad del contenido de la aplicación. Para obtener más información, consulte [Ver o actualizar la configuración de seguridad del contenido de tu aplicación](app-content-security-settings-csp.md).
+ **Entidad**: Conecta el componente del **visor de imágenes** a una entidad de datos que contenga el archivo de imagen.
+ **URL**: especifique la URL del archivo de imagen.
+ **Expresión**: utilice una expresión para generar dinámicamente la fuente de la imagen.
+ **Automatización**: Conecta el componente del **visor de imágenes** a una automatización que proporcione el archivo de imagen.
##### Texto alternativo
La descripción en texto alternativo de la imagen, que se utiliza con fines de accesibilidad.
##### Diseño
+ **Ajuste de imagen**: determina cómo se debe cambiar el tamaño de la imagen y cómo se debe mostrar dentro del componente. Por ejemplo: `Contain`, `Cover` o `Fill`.
+ **Ancho**: el ancho del componente del **visor de imágenes**, especificado como un porcentaje (%) o un valor de píxel fijo (por ejemplo, 300 píxeles).
+ **Altura**: la altura del componente del **visor de imágenes**, especificada como un valor de píxel fijo.
+ **Fondo**: permite establecer una imagen o un color de fondo para el componente del **visor de imágenes**.
# Automatizaciones y acciones: defina la lógica empresarial de su aplicación
**Las automatizaciones** son la forma de definir la lógica empresarial de la aplicación. Los componentes principales de una automatización son: los activadores que inician la automatización, una secuencia de una o más acciones, los parámetros de entrada que se utilizan para pasar los datos a la automatización y una salida.
**Topics**
+ [Conceptos de automatización](automations-concepts.md)
+ [Crear, editar y eliminar automatizaciones](automations-create-edit-delete.md)
+ [Añadir, editar y eliminar acciones de automatización](automations-actions-add-edit-delete.md)
+ [Referencia de acciones de Automation](automations-actions-reference.md)
# Conceptos de automatización
Estos son algunos conceptos y términos que debes conocer al definir y configurar la lógica empresarial de tu aplicación mediante las automatizaciones de App Studio.
## Automatizaciones
**Las automatizaciones** son la forma de definir la lógica empresarial de la aplicación. Los componentes principales de una automatización son: los activadores que inician la automatización, una secuencia de una o más acciones, los parámetros de entrada que se utilizan para pasar los datos a la automatización y una salida.
## Acciones
Una acción de automatización, comúnmente denominada **acción**, es un paso lógico individual que constituye una automatización. Cada acción realiza una tarea específica, ya sea enviar un correo electrónico, crear un registro de datos, invocar una función Lambda o realizar una llamada. APIs Las acciones se añaden a las automatizaciones desde la biblioteca de acciones y se pueden agrupar en sentencias condicionales o bucles.
## Parámetros de entrada de automatización
Los **parámetros de entrada de la automatización** son valores de entrada dinámicos que se pueden pasar de los componentes a las automatizaciones para que sean flexibles y reutilizables. Piense en los parámetros como variables para su automatización. En lugar de codificar los valores en una automatización, puede definir los parámetros y proporcionar valores diferentes cuando sea necesario. Los parámetros le permiten usar la misma automatización con diferentes entradas cada vez que se ejecuta.
## Salida simulada
Algunas acciones interactúan con recursos o servicios externos mediante conectores. Al utilizar el entorno de vista previa, las aplicaciones no interactúan con los servicios externos. Para probar las acciones que utilizan conectores en el entorno de vista previa, puede utilizar una **salida simulada** para simular el comportamiento y la salida del conector. La salida simulada se configura utilizando JavaScript y el resultado se almacena en los resultados de una acción, del mismo modo que la respuesta del conector se almacena en una aplicación publicada.
Al usar la simulación, puedes usar el entorno de previsualización para probar varios escenarios y su impacto en otras acciones mediante la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin llamar al servicio externo a través de conectores.
## Salida de automatización
Una **salida de automatización** se utiliza para pasar valores de una automatización a otros recursos de una aplicación, como componentes u otras automatizaciones. Los resultados de la automatización se configuran como expresiones, y la expresión puede devolver un valor estático o un valor dinámico calculado a partir de los parámetros y las acciones de la automatización. De forma predeterminada, las automatizaciones no devuelven ningún dato, incluidos los resultados de las acciones de la automatización.
Un par de ejemplos de cómo se pueden utilizar los resultados de la automatización:
+ Puede configurar una salida de automatización para que devuelva una matriz y pasarla para rellenar un componente de datos.
+ Puede usar una automatización para calcular un valor y pasar ese valor a varias otras automatizaciones como una forma de centralizar y reutilizar la lógica empresarial.
## Desencadenadores
Un **disparador** determina cuándo y en qué condiciones se ejecutará una automatización. Algunos ejemplos de activadores son `On click` los botones y `On select` las entradas de texto. El tipo de componente determina la lista de activadores disponibles para ese componente. Los activadores se añaden a [los componentes](concepts.md#concepts-component) y se configuran en el estudio de aplicaciones.
# Crear, editar y eliminar automatizaciones
**Contents**
+ [Crear una automatización](#automations-create)
+ [Visualización o edición de las propiedades de automatización](#automations-edit)
+ [Eliminar una automatización](#automations-delete)
## Crear una automatización
Utilice el siguiente procedimiento para crear una automatización en una aplicación de App Studio. Una vez creada, la automatización debe configurarse editando sus propiedades y añadiéndole acciones.
**Para crear una automatización**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija la pestaña **Automatizaciones**.
1. Si no tiene automatizaciones, seleccione **\$1 Añadir automatización** en el lienzo. **De lo contrario, en el menú de **automatizaciones** de la izquierda, selecciona \$1 Añadir.**
1. Se creará una nueva automatización y podrá empezar a editar sus propiedades o a añadir y configurar acciones para definir la lógica empresarial de su aplicación.
## Visualización o edición de las propiedades de automatización
Utilice el siguiente procedimiento para ver o editar las propiedades de automatización.
**Para ver o editar las propiedades de automatización**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija la pestaña **Automatizaciones**.
1. **En el menú de **Automatizaciones** de la izquierda, seleccione la automatización cuyas propiedades desee ver o editar para abrir el menú de Propiedades de la derecha.**
1. En el menú **Propiedades**, puede ver las siguientes propiedades:
+ **Identificador de automatización**: el nombre exclusivo de la automatización. Para editarlo, introduzca un nuevo identificador en el campo de texto.
+ **Parámetros** de automatización: los parámetros de automatización se utilizan para transferir valores dinámicos desde la interfaz de usuario de la aplicación a las acciones de automatización y datos. Para añadir un parámetro, selecciona **\$1 Añadir**. Elija el icono del lápiz para cambiar el nombre, la descripción o el tipo del parámetro. Para eliminar un parámetro, selecciona el icono de la papelera.
**sugerencia**
También puede añadir parámetros de automatización directamente desde el lienzo.
+ **Salida de automatización**: la salida de automatización se utiliza para configurar a qué datos de la automatización se puede hacer referencia en otras automatizaciones o componentes. De forma predeterminada, las automatizaciones no crean una salida. Para añadir una salida de automatización, seleccione **\$1 Añadir**. Para eliminar la salida, selecciona el icono de la papelera.
1. Para definir lo que hace una automatización, añada y configure acciones. Para obtener más información sobre las acciones, consulte [Añadir, editar y eliminar acciones de automatización](automations-actions-add-edit-delete.md) y[Referencia de acciones de Automation](automations-actions-reference.md).
## Eliminar una automatización
Usa el siguiente procedimiento para eliminar una automatización en una aplicación de App Studio.
**Para eliminar una automatización**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija la pestaña **Automatizaciones**.
1. **En el menú de **automatizaciones** de la izquierda, selecciona el menú de puntos suspensivos de la automatización que deseas eliminar y selecciona Eliminar.** Como alternativa, puedes elegir el icono de la papelera en el menú de **propiedades** del lado derecho de la automatización.
1. En el cuadro de diálogo de confirmación, elija **Eliminar**.
# Añadir, editar y eliminar acciones de automatización
Una acción de automatización, comúnmente denominada **acción**, es un paso lógico individual que constituye una automatización. Cada acción realiza una tarea específica, ya sea enviar un correo electrónico, crear un registro de datos, invocar una función Lambda o realizar una llamada. APIs Las acciones se añaden a las automatizaciones desde la biblioteca de acciones y se pueden agrupar en sentencias condicionales o bucles.
**Contents**
+ [Añadir una acción de automatización](#automations-actions-add)
+ [Visualización y edición de las propiedades de las acciones de automatización](#automations-actions-edit)
+ [Eliminar una acción de automatización](#automations-actions-delete)
## Añadir una acción de automatización
Usa el siguiente procedimiento para agregar una acción a una automatización en una aplicación de App Studio.
**Para añadir una acción de automatización**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija la pestaña **Automatizaciones**.
1. En el menú de **automatizaciones** de la izquierda, selecciona la automatización a la que quieres añadir una acción.
1. En el menú de **acciones** de la derecha, selecciona la acción que deseas añadir o arrastra y suelta la acción en el lienzo. Una vez creada la acción, puede seleccionarla para configurar las propiedades de la acción y definir su funcionalidad. Para obtener más información sobre las propiedades de la acción y su configuración, consulte[Referencia de acciones de Automation](automations-actions-reference.md).
## Visualización y edición de las propiedades de las acciones de automatización
Utilice el siguiente procedimiento para ver o editar las propiedades de una acción de automatización en una aplicación de App Studio.
**Para ver o editar las propiedades de una acción de automatización**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija la pestaña **Automatizaciones**.
1. En el menú de **automatizaciones** de la izquierda, elija la acción cuyas propiedades desee ver o editar. Como alternativa, puede elegir la acción en el lienzo al ver la automatización que la contiene.
1. Puede ver o editar las propiedades de la acción en el menú **Propiedades** del lado derecho. Las propiedades de una acción son diferentes para cada tipo de acción. Para obtener más información sobre las propiedades de la acción y su configuración, consulte[Referencia de acciones de Automation](automations-actions-reference.md).
## Eliminar una acción de automatización
Usa el siguiente procedimiento para eliminar una acción de una automatización en una aplicación de App Studio.
**Para eliminar una acción de automatización**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija la pestaña **Automatizaciones**.
1. En el menú de **automatizaciones** de la izquierda, selecciona la automatización que contiene la acción que deseas eliminar.
1. **En el lienzo, selecciona el icono de papelera de la acción que deseas eliminar y selecciona Eliminar.**
# Referencia de acciones de Automation
La siguiente es la documentación de referencia para las acciones de automatización utilizadas en App Studio.
Una acción de automatización, comúnmente denominada **acción**, es un paso lógico individual que constituye una automatización. Cada acción realiza una tarea específica, ya sea enviar un correo electrónico, crear un registro de datos, invocar una función Lambda o realizar una llamada. APIs Las acciones se añaden a las automatizaciones desde la biblioteca de acciones y se pueden agrupar en sentencias condicionales o bucles.
Para obtener información sobre la creación y configuración de automatizaciones y sus acciones, consulte los temas de. [Automatizaciones y acciones: defina la lógica empresarial de su aplicación](automations.md)
## Invoque la API
Invoca una solicitud de API REST HTTP. Los desarrolladores pueden usar esta acción para enviar solicitudes desde App Studio a otros sistemas o servicios con APIs. Por ejemplo, puedes usarla para conectarte a sistemas de terceros o aplicaciones propias para acceder a datos empresariales importantes, o para invocar puntos de conexión de API a los que no se pueda acceder mediante acciones específicas de App Studio.
Para obtener más información sobre REST APIs, consulta [¿Qué es](https://aws.amazon.com/what-is/restful-api/) una API? RESTful .
### Propiedades
#### Connector
El **conector** que se utilizará para las solicitudes de API realizadas mediante esta acción. El menú desplegable de conectores solo contiene conectores de los siguientes tipos: `API Connector` y`OpenAPI Connector`. Según cómo esté configurado el conector, puede contener información importante, como credenciales y encabezados predeterminados o parámetros de consulta.
Para obtener más información sobre los conectores de API, incluida una comparación entre su uso `API Connector` y`OpenAPI Connector`, consulte[Conéctese a servicios de terceros](add-connector-third-party.md).
#### Propiedades de configuración de la solicitud de API
Seleccione **Configurar la solicitud de API** en el panel de propiedades para abrir el cuadro de diálogo de configuración de la solicitud. Si se selecciona un **conector de API**, el cuadro de diálogo incluirá la información del conector.
**Método:** el método de la llamada a la API. Los valores posibles son los siguientes:
+ `DELETE`: elimina un recurso especificado.
+ `GET`: Recupera información o datos.
+ `HEAD`: Recupera solo los encabezados de una respuesta sin el cuerpo.
+ `POST`: Envía los datos para su procesamiento.
+ `PUSH`: Envía los datos para su procesamiento.
+ `PATCH`: actualiza parcialmente un recurso especificado.
**Ruta:** la ruta relativa al recurso.
**Encabezados:** todos los encabezados en forma de pares clave-valor que se envíen con la solicitud de API. Si se selecciona un conector, los encabezados configurados se añadirán automáticamente y no se podrán eliminar. Los encabezados configurados no se pueden editar, pero puede anularlos añadiendo otro encabezado con el mismo nombre.
**Parámetros de consulta:** cualquier parámetro de consulta en forma de pares clave-valor que se envíe con la solicitud de API. Si se selecciona un conector, sus parámetros de consulta configurados se añadirán automáticamente y no se podrán editar ni eliminar.
**Cuerpo:** información que se enviará con la solicitud de API en formato JSON. No hay cuerpo para `GET` las solicitudes.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Invoca AWS
Invoca una operación desde un AWS servicio. Se trata de una acción general para llamar a AWS servicios u operaciones y se debe utilizar si no hay una acción específica para el AWS servicio u operación deseado.
### Propiedades
#### Servicio
El AWS servicio que contiene la operación que se va a ejecutar.
#### Operación
La operación que se va a ejecutar.
#### Connector
El conector que se utilizará para las operaciones ejecutadas por esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
La entrada JSON que se utilizará al ejecutar la operación especificada. Para obtener más información sobre la configuración de las entradas para AWS las operaciones, consulte la [AWS SDK para JavaScript](https://docs.aws.amazon.com/sdk-for-javascript).
## Invocación de Lambda
Invoca una función Lambda existente.
### Propiedades
#### Connector
El conector que se utilizará para las funciones Lambda ejecutadas por esta acción. El conector configurado debe configurarse con las credenciales adecuadas para acceder a la función Lambda y otra información de configuración, como la AWS región que contiene la función Lambda. Para obtener más información sobre la configuración de un conector para Lambda, consulte. [Paso 3: Crear un conector Lambda](connectors-lambda.md#connectors-lambda-create-connector)
#### Nombre de la función
Nombre de la función Lambda que se va a ejecutar. Tenga en cuenta que este es el nombre de la función y no el ARN (Amazon Resource Name) de la función.
#### Evento de función
Pares clave-valor que se transferirán a la función Lambda como carga útil del evento.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Loop
Ejecuta acciones anidadas repetidamente para recorrer una lista de elementos, un elemento a la vez. Por ejemplo, añada la [Crear registro](#automations-actions-reference-create-record) acción a una acción de bucle para crear varios registros.
La acción de bucle se puede anidar dentro de otros bucles o acciones de condición. Las acciones del bucle se ejecutan secuencialmente y no en paralelo. Solo se puede acceder a los resultados de cada acción del bucle desde las acciones posteriores de la misma iteración del bucle. No se puede acceder a ellos fuera del bucle ni en diferentes iteraciones del bucle.
### Propiedades
#### origen
La lista de elementos por los que recorrer en iteración, un elemento a la vez. El origen puede ser el resultado de una acción anterior o una lista estática de cadenas, números u objetos que puede proporcionar mediante una JavaScript expresión.
##### Ejemplos
La siguiente lista contiene ejemplos de entradas de origen.
+ Resultados de una acción anterior: `{{results.actionName.data}}`
+ Una lista de números: `{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ Una lista de cadenas: `{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ Un valor calculado: `{{params.actionName.split("\n")}}`
#### Nombre del artículo actual
El nombre de la variable que se puede usar para hacer referencia al elemento actual que se está iterando. El nombre del elemento actual se puede configurar para que pueda anidar dos o más bucles y acceder a las variables de cada bucle. Por ejemplo, si recorre países y ciudades con dos bucles, puede configurar y hacer referencia `currentCountry` a y. `currentCity`
## Condición
Ejecuta acciones en función del resultado de una o más condiciones lógicas específicas que se evalúan al ejecutar la automatización. La acción de condición se compone de los siguientes componentes:
+ Un campo de *condición*, que se utiliza para proporcionar una JavaScript expresión que se evalúa como `true` o`false`.
+ Una *rama verdadera*, que contiene acciones que se ejecutan si la condición se evalúa como tal. `true`
+ Una *rama falsa*, que contiene acciones que se ejecutan si la condición se evalúa así. `false`
Añada acciones a las ramas verdadera y falsa arrastrándolas hasta la acción de la condición.
### Propiedades
#### Condición
La JavaScript expresión que se evaluará cuando se ejecute la acción.
## Crear registro
Crea un registro en una entidad de App Studio existente.
### Propiedades
#### Entidad
La entidad en la que se va a crear un registro. Una vez seleccionada una entidad, se deben agregar valores a los campos de la entidad para que se cree el registro. Los tipos de campos y si los campos son obligatorios u opcionales se definen en la entidad.
## Actualizar el registro
Actualiza un registro existente en una entidad de App Studio.
### Propiedades
#### Entidad
La entidad que contiene los registros que se van a actualizar.
#### Condiciones
El criterio que define qué registros actualiza la acción. Puede agrupar las condiciones para crear una declaración lógica. Puede combinar grupos o condiciones con `OR` declaraciones `AND` o.
#### Fields
Los campos que se van a actualizar en los registros especificados por las condiciones.
#### Valores
Los valores que se van a actualizar en los campos especificados.
## Eliminar registro
Elimina un registro de una entidad de App Studio.
### Propiedades
#### Entidad
La entidad que contiene los registros que se van a eliminar.
#### Condiciones
El criterio que define qué registros se eliminan mediante la acción. Puede agrupar condiciones para crear una sentencia lógica. Puede combinar grupos o condiciones con `OR` sentencias `AND` o.
## Invoca una acción de datos
Ejecuta una acción de datos con parámetros opcionales.
### Propiedades
#### Acción de datos
La acción de datos que ejecutará la acción.
#### Parameters
Parámetros de la acción de datos que utilizará la acción de datos. Los parámetros de acción de datos se utilizan para enviar valores que se utilizan como entradas para las acciones de datos. Los parámetros de acción de datos se pueden añadir al configurar la acción de automatización, pero se deben editar en la pestaña **Datos**.
#### Configuración avanzada
La `Invoke data action` acción contiene los siguientes ajustes avanzados:
+ **Tamaño de página:** el número máximo de registros que se pueden buscar en cada consulta. El valor predeterminado es 500 y el valor máximo es 3000.
+ Símbolo de **paginación:** el identificador que se utiliza para obtener registros adicionales de una consulta. Por ejemplo, si `Page size` se establece en 500, pero hay más de 500 registros, al pasar el token de paginación a una consulta posterior se obtendrán los 500 siguientes. El token no estará definido si no existen más registros o páginas.
## Amazon S3: Poner objeto
Utiliza la `Amazon S3 PutObject` operación para añadir un objeto identificado por una clave (ruta de archivo) a un bucket de Amazon S3 específico.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
Las opciones necesarias que se van a utilizar en el `PutObject` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon S3 PutObject` operación, consulte la *referencia [PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)de la API de Amazon Simple Storage Service*.
+ **Bucket:** el nombre del bucket de Amazon S3 en el que se va a colocar un objeto.
+ **Clave:** el nombre exclusivo del objeto que se va a colocar en el bucket de Amazon S3.
+ **Cuerpo:** el contenido del objeto que se va a colocar en el bucket de Amazon S3.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon S3: Eliminar objeto
Utiliza la `Amazon S3 DeleteObject` operación para eliminar un objeto identificado por una clave (ruta de archivo) de un bucket de Amazon S3 específico.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
Las opciones necesarias que se van a utilizar en el `DeleteObject` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon S3 DeleteObject` operación, consulte la *referencia [DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)de la API de Amazon Simple Storage Service*.
+ **Bucket:** nombre del bucket de Amazon S3 del que se va a eliminar un objeto.
+ **Clave:** el nombre exclusivo del objeto que se va a eliminar del bucket de Amazon S3.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon S3: Obtener objeto
Utiliza la `Amazon S3 GetObject` operación para recuperar un objeto identificado por una clave (ruta de archivo) de un bucket de Amazon S3 específico.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
Las opciones necesarias que se van a utilizar en el `GetObject` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon S3 GetObject` operación, consulte la *referencia [GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)de la API de Amazon Simple Storage Service*.
+ **Bucket:** el nombre del bucket de Amazon S3 del que se va a recuperar un objeto.
+ **Clave:** el nombre exclusivo del objeto que se va a recuperar del bucket de Amazon S3.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon S3: Lista de objetos
Utiliza la `Amazon S3 ListObjects` operación para enumerar los objetos de un bucket de Amazon S3 específico.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
Las opciones necesarias que se van a utilizar en el `ListObjects` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon S3 ListObjects` operación, consulte la *referencia [ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)de la API de Amazon Simple Storage Service*.
+ **Bucket:** el nombre del bucket de Amazon S3 desde el que se van a enumerar los objetos.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon Textract: analiza el documento
Utiliza la `Amazon Textract AnalyzeDocument` operación para analizar las relaciones entre los elementos detectados en un documento de entrada.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
El contenido de la solicitud que se va a utilizar en el `AnalyzeDocument` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon Textract AnalyzeDocument` operación, consulte [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)la Guía para *desarrolladores de Amazon Textract*.
+ **Document/S3Object/Bucket:** nombre del bucket de Amazon S3. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga de S3**.
+ **Documento/S3Object/Nombre:** el nombre del archivo del documento de entrada. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga S3**.
+ **Documento/S3Object/Versión:** Si el bucket de Amazon S3 tiene habilitado el control de versiones, puede especificar la versión del objeto. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de carga de **S3**.
+ **FeatureTypes:** una lista de los tipos de análisis que se van a realizar. Los valores válidos son: `TABLES`, `FORMS`, `QUERIES`, `SIGNATURES` y `LAYOUT`.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon Textract: analiza los gastos
Utiliza la `Amazon Textract AnalyzeExpense` operación para analizar un documento de entrada en busca de relaciones financieras entre el texto.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
El contenido de la solicitud que se va a utilizar en el `AnalyzeExpense` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon Textract AnalyzeExpense` operación, consulte [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)la Guía para *desarrolladores de Amazon Textract*.
+ **Document/S3Object/Bucket:** nombre del bucket de Amazon S3. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga de S3**.
+ **Documento/S3Object/Nombre:** el nombre del archivo del documento de entrada. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga S3**.
+ **Documento/S3Object/Versión:** Si el bucket de Amazon S3 tiene habilitado el control de versiones, puede especificar la versión del objeto. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de carga de **S3**.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon Textract: analiza el ID
Utiliza la `Amazon Textract AnalyzeID` operación para analizar un documento de identidad en busca de información relevante.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
El contenido de la solicitud que se va a utilizar en el `AnalyzeID` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon Textract AnalyzeID` operación, consulte [AnalyzeID](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html) en la Guía para desarrolladores de *Amazon Textract*.
+ **Document/S3Object/Bucket:** nombre del bucket de Amazon S3. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga de S3**.
+ **Documento/S3Object/Nombre:** el nombre del archivo del documento de entrada. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga S3**.
+ **Documento/S3Object/Versión:** Si el bucket de Amazon S3 tiene habilitado el control de versiones, puede especificar la versión del objeto. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de carga de **S3**.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon Textract: detecta el texto del documento
Utiliza la `Amazon Textract DetectDocumentText` operación para detectar líneas de texto y las palabras que componen una línea de texto en un documento de entrada.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones ejecutadas por esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
El contenido de la solicitud que se va a utilizar en el `DetectDocumentText` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon Textract DetectDocumentText` operación, consulte [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)la Guía para *desarrolladores de Amazon Textract*.
+ **Document/S3Object/Bucket:** nombre del bucket de Amazon S3. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga de S3**.
+ **Documento/S3Object/Nombre:** el nombre del archivo del documento de entrada. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de **carga S3**.
+ **Documento/S3Object/Versión:** Si el bucket de Amazon S3 tiene habilitado el control de versiones, puede especificar la versión del objeto. Este parámetro se puede dejar vacío si se pasa un archivo a la acción con el componente de carga de **S3**.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon Bedrock: GenAI Prompt
Utiliza la InvokeModel operación [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) para ejecutar la inferencia mediante los parámetros de solicitud e inferencia proporcionados en las propiedades de la acción. La acción puede generar texto, imágenes e incrustaciones.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. Para utilizar esta acción correctamente, el conector debe estar configurado con **Amazon Bedrock Runtime** como servicio. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Modelo
El modelo básico que utilizará Amazon Bedrock para procesar la solicitud. Para obtener más información sobre los modelos de Amazon Bedrock, consulte la [información sobre los modelos de Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html) en la Guía del usuario de *Amazon Bedrock*.
#### Tipo de entrada
El tipo de entrada que se envía al modelo Amazon Bedrock. Los valores posibles son **texto**, **documento** e **imagen**. Si un tipo de entrada no está disponible para su selección, es probable que el modelo configurado no lo admita.
#### Mensaje de usuario
El mensaje que se debe enviar al modelo Amazon Bedrock para que se procese y genere una respuesta. Puede introducir texto estático o pasar una entrada de otra parte de la aplicación, por ejemplo, de un componente mediante parámetros, de una acción anterior de la automatización o de otra automatización. Los siguientes ejemplos muestran cómo transferir un valor de un componente o de una acción anterior:
+ Para pasar un valor de un componente mediante parámetros: `{{params.paramName}}`
+ Para pasar un valor de una acción anterior: `{{results.actionName}}`
#### Indicador del sistema (modelos Claude)
El mensaje del sistema que utilizará el modelo Amazon Bedrock al procesar la solicitud. El indicador del sistema se utiliza para proporcionar contexto, instrucciones o pautas a los modelos Claude.
#### Solicita la configuración
Configure varios ajustes de solicitud y parámetros de inferencia del modelo. Puede configurar los siguientes ajustes:
+ **Temperatura**: la temperatura que utilizará el modelo Amazon Bedrock al procesar la solicitud. La temperatura determina la aleatoriedad o la creatividad de la salida del modelo Bedrock. Cuanto más alta sea la temperatura, más creativa y menos analítica será la respuesta. Los valores posibles son`[0-10]`.
+ **Tokens máximos**: limite la longitud de la salida del modelo Amazon Bedrock.
+ **TopP****: en el muestreo de núcleos, el modelo calcula la distribución acumulada entre todas las opciones de cada token subsiguiente en orden de probabilidad decreciente y la corta una vez que alcanza una probabilidad determinada especificada por el TopP.** Debe modificar la **temperatura** o la **TopP**, pero no ambas
+ Secuencias de **parada: secuencias** que hacen que el modelo deje de procesar la solicitud y de generar resultados.
Para obtener más información, consulte [Parámetros de solicitud de inferencia y campos de respuesta para modelos de cimentación](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html) en la Guía del *usuario de Amazon Bedrock*.
#### Secuencias de parada
**Introduzca un **ID y una versión de Amazon Bedrock Guardrail.**** Las barandillas se utilizan para implementar medidas de seguridad en función de sus casos de uso y de las políticas de IA responsables. Para obtener más información, consulte [Detener el contenido dañino en los modelos que utilizan Amazon Bedrock Guardrails](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html) en la Guía del usuario de *Amazon Bedrock*.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## Amazon Bedrock: modelo Invoke
Utiliza la InvokeModel operación [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) para ejecutar la inferencia mediante los parámetros de solicitud e inferencia proporcionados en el cuerpo de la solicitud. La inferencia de modelos se utiliza para generar texto, imágenes e incrustaciones.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones que ejecute esta acción. Para utilizar esta acción correctamente, el conector debe estar configurado con **Amazon Bedrock Runtime** como servicio. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
El contenido de la solicitud que se va a utilizar en el `InvokeModel` comando.
**nota**
Para obtener más información sobre la `Amazon Bedrock InvokeModel` operación, incluidos comandos de ejemplo, consulte la *referencia [InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)de la API de Amazon Bedrock*.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
## JavaScript
Ejecuta una JavaScript función personalizada para devolver un valor especificado.
**importante**
App Studio no admite el uso de JavaScript bibliotecas personalizadas o de terceros.
### Propiedades
#### Código fuente
El fragmento de JavaScript código que ejecutará la acción.
**sugerencia**
Puedes usar la IA como ayuda JavaScript para generar por ti realizando los siguientes pasos:
Selecciona el icono de expansión para abrir el JavaScript editor expandido.
(Opcional): active la opción **Modificar código** para modificar cualquier código existente JavaScript. De lo contrario, la IA sustituirá a las existentes JavaScript.
En ** JavaScriptGenerate**, describe lo que quieres hacer con JavaScript, por ejemplo:**Add two numbers**.
Elija el icono de enviar para generar su JavaScript.
## Invoca la automatización
Ejecuta una automatización específica.
### Propiedades
#### Invoca la automatización
La automatización que ejecutará la acción.
## Enviar correos electrónicos
Utiliza la `Amazon SES SendEmail` operación para enviar un correo electrónico.
### Propiedades
#### Connector
El conector que se utilizará para las operaciones ejecutadas por esta acción. El conector configurado debe configurarse con las credenciales adecuadas para ejecutar la operación y con otra información de configuración, como la AWS región que contiene los recursos a los que se hace referencia en la operación.
#### Configuración
El contenido de la solicitud que se va a utilizar en el `SendEmail` comando. Las opciones son las siguientes:
**nota**
Para obtener más información sobre la `Amazon SES SendEmail` operación, consulte la *referencia [SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)de la API de Amazon Simple Email Service*.
#### Salida simulada
Las acciones no interactúan con los servicios o recursos externos del entorno de vista previa. El campo de **salida simulado** se utiliza para proporcionar una expresión JSON que simula el comportamiento de un conector en el entorno de vista previa con fines de prueba. Este fragmento se almacena en el `results` mapa de la acción, igual que la respuesta del conector en el caso de una aplicación publicada en el entorno en vivo.
Con este campo, puede probar varios escenarios y su impacto en otras acciones de la automatización, como simular diferentes valores de resultados, escenarios de error, casos extremos o rutas insatisfactorias sin comunicarse con servicios externos a través de conectores.
# Entidades y acciones de datos: configura el modelo de datos de tu aplicación
**Las entidades** son tablas de datos en App Studio. Las entidades interactúan directamente con las tablas de las fuentes de datos. Las entidades incluyen campos para describir los datos que contienen, consultas para localizar y devolver datos y mapas para conectar los campos de la entidad con las columnas de una fuente de datos.
**Topics**
+ [Mejores prácticas al diseñar modelos de datos](data-model-best-practices.md)
+ [Crear una entidad en una aplicación de App Studio](data-entities-create.md)
+ [Configurar o editar una entidad en una aplicación de App Studio](data-entities-edit.md)
+ [Eliminar una entidad](data-entities-delete.md)
+ [Entidades de datos gestionadas en AWS App Studio](managed-data-entities.md)
# Mejores prácticas al diseñar modelos de datos
Usa las siguientes prácticas recomendadas para crear un modelo de datos relacionales sólido, escalable y seguro AWS para usarlo en tu aplicación de App Studio, que cumpla con los requisitos de la aplicación y garantice la confiabilidad y el rendimiento a largo plazo de tu infraestructura de datos.
+ **Elija el servicio de AWS datos adecuado:** en función de sus requisitos, elija el servicio de AWS datos adecuado. Por ejemplo, para una aplicación de procesamiento de transacciones en línea (OLTP), podría considerar una base de datos (DB) como Amazon Aurora, que es un servicio de base de datos relacional y totalmente administrado nativo de la nube que admite varios motores de bases de datos, como MySQL y PostgreSQL. Para obtener una lista completa de las versiones de Aurora compatibles con App Studio, consulte[Conéctese a Amazon Aurora](connectors-aurora.md). Por otro lado, para los casos de uso del procesamiento analítico en línea (OLAP), considere la posibilidad de utilizar Amazon Redshift, que es un almacén de datos en la nube que le permite ejecutar consultas complejas en conjuntos de datos muy grandes. Estas consultas suelen tardar un tiempo (varios segundos) en completarse, lo que hace que Amazon Redshift sea menos adecuado para aplicaciones OLTP que requieren acceso a datos de baja latencia.
+ **Diseñe para la escalabilidad:** planifique su modelo de datos teniendo en cuenta el crecimiento y la escalabilidad futuros. Tenga en cuenta factores como el volumen de datos esperado, los patrones de acceso y los requisitos de rendimiento al elegir el tipo y la configuración adecuados de servicio de datos e instancia de base de datos (por ejemplo, la capacidad aprovisionada).
+ Para obtener más información sobre el escalado con Aurora Serverless V2, consulte [Rendimiento y escalado para Aurora Serverless](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html) V2.
+ **Normalice sus datos:** siga los principios de la normalización de las bases de datos para minimizar la redundancia de los datos y mejorar su integridad. Esto incluye la creación de las tablas adecuadas, la definición de las claves principales y externas y el establecimiento de relaciones entre las entidades. En App Studio, al consultar datos de una entidad, puedes recuperar datos relacionados de otra entidad especificando una `join` cláusula en la consulta.
+ **Implementa la indexación adecuada:** identifica las consultas y los patrones de acceso más importantes y crea los índices adecuados para optimizar el rendimiento.
+ **Aproveche las funciones de los servicios de AWS datos:** aproveche las funciones que ofrece el servicio de AWS datos que elija, como las copias de seguridad automatizadas, las implementaciones en zonas de disponibilidad múltiples (Multi-AZ) y las actualizaciones de software automáticas.
+ **Proteja sus datos:** implemente medidas de seguridad sólidas, como políticas de IAM (AWS Identity and Access Management), la creación de usuarios de bases de datos con permisos restringidos para acceder a tablas y esquemas, y aplique el cifrado tanto en reposo como en tránsito.
+ **Supervise y optimice el rendimiento:** supervise continuamente el rendimiento de su base de datos y realice los ajustes necesarios, como escalar los recursos, optimizar las consultas o ajustar las configuraciones de la base de datos.
+ **Automatice la administración de bases de datos:** utilice AWS servicios como Aurora Autoscaling, Performance Insights for Aurora y AWS Database Migration Service para automatizar las tareas de administración de bases de datos y reducir la sobrecarga operativa.
+ **Implemente estrategias de respaldo y recuperación ante desastres:** asegúrese de tener un plan de respaldo y recuperación bien definido, que aproveche funciones como las copias de seguridad automatizadas de Aurora, la point-in-time recuperación y las configuraciones de réplicas entre regiones.
+ **Siga las prácticas AWS recomendadas y la documentación:** siga up-to-date las AWS mejores prácticas, las directrices y la documentación más recientes del servicio de datos que elija para asegurarse de que su modelo de datos y su implementación se ajusten a las recomendaciones. AWS
Para obtener una guía más detallada de cada servicio de AWS datos, consulta los siguientes temas:
+ [Prácticas recomendadas con Amazon Aurora](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Prácticas recomendadas con Amazon Aurora MySQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Ajuste del rendimiento de las consultas de Amazon Redshift](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [Prácticas recomendadas para consultar y escanear datos en Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)
# Crear una entidad en una aplicación de App Studio
Existen cuatro métodos para crear una entidad en una aplicación de App Studio. La siguiente lista contiene cada método, sus ventajas y un enlace a las instrucciones para usar ese método para crear y, a continuación, configurar la entidad.
+ [Crear una entidad a partir de una fuente de datos existente](#data-entities-create-existing-data-source): cree automáticamente una entidad y sus campos a partir de una tabla de fuente de datos existente y asigne los campos a las columnas de la tabla de fuentes de datos. Esta opción es preferible si tienes una fuente de datos existente que deseas usar en tu aplicación App Studio.
+ [Crear una entidad con una fuente de datos gestionada por App Studio](#data-entities-create-managed-data-source): cree una entidad y una tabla de DynamoDB que App Studio administre por usted. La tabla de DynamoDB se actualiza automáticamente a medida que actualiza la entidad. Con esta opción, no tiene que crear, administrar o conectar manualmente una fuente de datos de terceros, ni designar el mapeo de los campos de la entidad a las columnas de la tabla. Todo el modelado y la configuración de datos de tu aplicación se realizan en App Studio. Esta opción es preferible si no desea administrar sus propias fuentes de datos y una tabla de DynamoDB y su funcionalidad son suficientes para su aplicación.
+ [Crear una entidad vacía](#data-entities-create-empty): Cree una entidad vacía completamente desde cero. Esta opción es preferible si no tienes ninguna fuente de datos o conectores existentes creados por un administrador y quieres diseñar de forma flexible el modelo de datos de tu aplicación sin estar limitado por fuentes de datos externas. Puede conectar la entidad a una fuente de datos después de la creación.
+ [Crear una entidad con IA](#data-entities-create-with-ai): genere una entidad, campos, acciones de datos y datos de muestra en función del nombre de la entidad especificada. Esta opción es preferible si tienes una idea del modelo de datos de tu aplicación, pero quieres ayuda para traducirlo en una entidad.
## Crear una entidad a partir de una fuente de datos existente
Utilice una tabla de una fuente de datos para crear automáticamente una entidad y sus campos, y asigne los campos de la entidad a las columnas de la tabla. Esta opción es preferible si tienes una fuente de datos existente que deseas usar en tu aplicación App Studio.
1. Si es necesario, navega hasta tu aplicación.
1. Elija la pestaña **Datos** en la parte superior del lienzo.
1. Si no hay entidades en la aplicación, selecciona **\$1 Crear entidad**. De lo contrario, en el menú **Entidades** de la izquierda, selecciona **\$1 Añadir**.
1. Seleccione **Usar una tabla de una fuente de datos existente**.
1. En **Connector**, seleccione el conector que contiene la tabla que quiere usar para crear la entidad.
1. En **Tabla**, elija la tabla que desee usar para crear su entidad.
1. Seleccione la casilla **Crear acciones de datos** para crear acciones de datos.
1. Seleccione **Create entity (Crear entidad)**. Su entidad ya está creada y puede verla en el panel de **Entidades** de la izquierda.
1. Configure su nueva entidad siguiendo los procedimientos que se indican en[Configurar o editar una entidad en una aplicación de App Studio](data-entities-edit.md). Tenga en cuenta que, dado que su entidad se creó con una fuente de datos existente, ya se han creado algunas propiedades o recursos, como los campos, la fuente de datos conectada y la asignación de campos. Además, su entidad contendrá acciones de datos si seleccionó la casilla **Crear acciones de datos** durante la creación.
## Crear una entidad con una fuente de datos gestionada por App Studio
Cree una entidad gestionada y la tabla de DynamoDB correspondiente gestionada por App Studio. Mientras la tabla de DynamoDB exista en la cuenta AWS asociada, cuando se realizan cambios en la entidad en la aplicación App Studio, la tabla de DynamoDB se actualiza automáticamente. Con esta opción, no es necesario crear, administrar o conectar manualmente una fuente de datos de terceros, ni designar el mapeo de los campos de entidad a las columnas de la tabla. Esta opción es preferible si no desea administrar sus propias fuentes de datos y una tabla de DynamoDB y su funcionalidad son suficientes para su aplicación. Para obtener más información sobre las entidades gestionadas, consulte. [Entidades de datos gestionadas en AWS App Studio](managed-data-entities.md)
Puede utilizar las mismas entidades gestionadas en varias aplicaciones. Para obtener instrucciones, consulte [Crear una entidad a partir de una fuente de datos existente](#data-entities-create-existing-data-source).
1. Si es necesario, navegue hasta su aplicación.
1. Elija la pestaña **Datos** en la parte superior del lienzo.
1. Si no hay entidades en la aplicación, selecciona **\$1 Crear entidad**. De lo contrario, en el menú **Entidades** de la izquierda, selecciona **\$1 Añadir**.
1. Seleccione **Crear entidad gestionada por App Studio**.
1. En **Nombre de entidad**, proporciona un nombre para tu entidad.
1. En **Clave principal**, proporciona un nombre para la clave principal de tu entidad. La clave principal es el identificador único de la entidad y no se puede cambiar una vez creada la entidad.
1. En **Tipo de datos de clave principal**, seleccione el tipo de datos de clave principal de su entidad. El tipo de datos no se puede cambiar una vez creada la entidad.
1. Seleccione **Create entity (Crear entidad)**. Su entidad ya está creada y puede verla en el panel de **Entidades** de la izquierda.
1. Configure su nueva entidad siguiendo los procedimientos que se indican en[Configurar o editar una entidad en una aplicación de App Studio](data-entities-edit.md). Tenga en cuenta que, dado que su entidad se creó con datos gestionados, ya se han creado algunas propiedades o recursos, como el campo de clave principal y la fuente de datos conectada.
## Crear una entidad vacía
Cree una entidad vacía completamente desde cero. Esta opción es preferible si no tiene ningún conector o fuente de datos existente creado por un administrador. La creación de una entidad vacía ofrece flexibilidad, ya que puedes diseñarla dentro de tu aplicación de App Studio sin estar limitado por fuentes de datos externas. Después de diseñar el modelo de datos de la aplicación y configurar la entidad en consecuencia, podrás conectarla a una fuente de datos externa más adelante.
1. Si es necesario, navegue hasta la aplicación.
1. Elija la pestaña **Datos** en la parte superior del lienzo.
1. Si no hay entidades en la aplicación, selecciona **\$1 Crear entidad**. De lo contrario, en el menú **Entidades** de la izquierda, selecciona **\$1 Añadir**.
1. Selecciona **Crear una entidad**.
1. Seleccione **Create entity (Crear entidad)**. Su entidad ya está creada y puede verla en el panel de **Entidades** de la izquierda.
1. Configure su nueva entidad siguiendo los procedimientos que se indican en[Configurar o editar una entidad en una aplicación de App Studio](data-entities-edit.md).
## Crear una entidad con IA
Genere una entidad, campos, acciones de datos y datos de muestra en función del nombre de la entidad especificada. Esta opción es preferible si tienes una idea del modelo de datos de tu aplicación, pero quieres ayuda para traducirlo en una entidad.
1. Si es necesario, navega hasta tu aplicación.
1. Elija la pestaña **Datos** en la parte superior del lienzo.
1. Si no hay entidades en la aplicación, selecciona **\$1 Crear entidad**. De lo contrario, en el menú **Entidades** de la izquierda, selecciona **\$1 Añadir**.
1. Selecciona **Crear una entidad con IA**.
1. En **Nombre de entidad**, proporciona un nombre para tu entidad. Este nombre se utiliza para generar los campos, las acciones de datos y los datos de muestra de su entidad.
1. Seleccione la casilla **Crear acciones de datos** para crear acciones de datos.
1. Seleccione **Generar una entidad**. Su entidad ya está creada y puede verla en el panel de **Entidades** de la izquierda.
1. Configure su nueva entidad siguiendo los procedimientos que se indican en[Configurar o editar una entidad en una aplicación de App Studio](data-entities-edit.md). Tenga en cuenta que, dado que su entidad se creó con IA, ya contendrá los campos generados. Además, su entidad contendrá acciones de datos si seleccionó la casilla **Crear acciones de datos** durante la creación.
# Configurar o editar una entidad en una aplicación de App Studio
Utilice los siguientes temas para configurar una entidad en una aplicación de App Studio.
**Topics**
+ [Edición del nombre de la entidad](data-entities-edit-name.md)
+ [Añadir, editar o eliminar campos de entidad](data-entities-edit-fields.md)
+ [Acciones de creación, edición o eliminación de datos](data-entities-edit-data-actions.md)
+ [Añadir o eliminar datos de muestra](data-entities-edit-sample-data.md)
+ [Agregue o edite la fuente de datos y los campos del mapa conectados](data-entities-edit-connection.md)
# Edición del nombre de la entidad
1. Si es necesario, navegue hasta la entidad que desee editar.
1. En la pestaña **Configuración**, en **Nombre de entidad**, actualice el nombre de la entidad y elija una opción fuera del cuadro de texto para guardar los cambios.
# Añadir, editar o eliminar campos de entidad
**sugerencia**
Puede presionar CTRL\$1Z para deshacer el cambio más reciente en su entidad.
1. Si es necesario, navegue hasta la entidad que desee editar.
1. En la pestaña **Configuración**, en **Campos**, puede ver una tabla de los campos de su entidad. Los campos de entidad tienen las siguientes columnas:
+ **Nombre para mostrar:** el nombre para mostrar es similar al encabezado de una tabla o un campo de formulario y los usuarios de la aplicación lo pueden ver. Puede contener espacios y caracteres especiales, pero debe ser único dentro de una entidad.
+ **Nombre del sistema:** el nombre del sistema es un identificador único que se utiliza en el código para hacer referencia a un campo. Al mapear una columna de una tabla de Amazon Redshift, debe coincidir con el nombre de la columna de la tabla de Amazon Redshift.
+ **Tipo de datos:** el tipo de datos que se almacenarán en este campo, como `Integer``Boolean`, o. `String`
1. Para añadir campos:
1. Para usar la IA para generar campos basados en el nombre de la entidad y la fuente de datos conectada, elija **Generar más campos**.
1. Para añadir un solo campo, selecciona **\$1 Añadir campo**.
1. Para editar un campo:
1. Para editar el nombre para mostrar, introduzca el valor deseado en el cuadro de texto **Nombre para mostrar**. Si el nombre de sistema del campo no se ha editado, se actualizará con el nuevo valor del nombre para mostrar.
1. Para editar el nombre del sistema, introduzca el valor deseado en el cuadro de texto **Nombre del sistema**.
1. Para editar el tipo de datos, elija el menú desplegable **Tipo de datos** y seleccione el tipo deseado de la lista.
1. Para editar las propiedades del campo, elija el icono de engranaje del campo. La siguiente lista detalla las propiedades del campo:
+ **Obligatorio**: active esta opción si la fuente de datos requiere el campo.
+ **Clave principal**: active esta opción si el campo está asignado a una clave principal de la fuente de datos.
+ **Único**: active esta opción si el valor de este campo debe ser único.
+ **Usar la fuente de datos predeterminada**: habilite esta opción si la fuente de datos proporciona el valor del campo, por ejemplo, si utiliza el incremento automático o la marca de tiempo de un evento.
+ **Opciones de tipos de datos**: los campos de ciertos tipos de datos se pueden configurar con opciones de tipos de datos, como valores mínimos o máximos.
1. Para eliminar un campo, elija el icono de papelera del campo que desee eliminar.
# Acciones de creación, edición o eliminación de datos
Las acciones de datos se utilizan en las aplicaciones para ejecutar acciones con los datos de una entidad, como buscar todos los registros o buscar un registro por ID. Las acciones de datos se pueden utilizar para localizar y devolver datos que coincidan con las condiciones especificadas para visualizarlos en componentes como tablas o vistas detalladas.
**Contents**
+ [Crear acciones de datos](#data-entities-data-action-add)
+ [Edición o configuración de acciones de datos](#data-entities-data-action-edit)
+ [Operadores y ejemplos de condiciones de acción de datos](#data-entities-data-action-operators)
+ [Soporte de operadores de condición por base de datos](#data-entities-data-action-operators-support)
+ [Ejemplos de condiciones de acción de datos](#data-entities-data-action-operators-examples)
+ [Eliminar acciones de datos](#data-entities-data-action-delete)
## Crear acciones de datos
**sugerencia**
Puede presionar CTRL\$1Z para deshacer el cambio más reciente en su entidad.
1. Si es necesario, navegue hasta la entidad para la que desee crear acciones de datos.
1. Seleccione la pestaña **Acciones de datos**.
1. Existen dos métodos para crear acciones de datos:
+ (Recomendado) Si quieres usar la IA para generar acciones de datos por ti, en función del nombre de la entidad, los campos y la fuente de datos conectada, selecciona **Generar acciones de datos**. Se generarán las siguientes acciones:
1. `getAll`: Recupera todos los registros de una entidad. Esta acción resulta útil cuando se necesita mostrar una lista de registros o realizar operaciones en varios registros a la vez.
1. `getByID`: recupera un único registro de una entidad en función de su identificador único (ID o clave principal). Esta acción resulta útil cuando se necesita mostrar o realizar operaciones en un registro específico.
+ Para añadir una sola acción de datos, elija **\$1 Añadir acción de datos**.
1. Para ver o configurar la nueva acción de datos, consulte la siguiente sección,[Edición o configuración de acciones de datos](#data-entities-data-action-edit).
## Edición o configuración de acciones de datos
1. Si es necesario, navegue hasta la entidad para la que desee crear acciones de datos.
1. Seleccione la pestaña **Acciones de datos**.
1. En **Campos**, configure los campos que debe devolver la consulta. De forma predeterminada, se seleccionan todos los campos configurados de la entidad.
También puede añadir **uniones** a la acción de datos realizando los siguientes pasos:
1. Seleccione **\$1 Añadir unión** para abrir un cuadro de diálogo.
1. En **Entidad relacionada**, seleccione la entidad que desee unir a la entidad actual.
1. En **Alias**, si lo desea, introduzca un nombre de alias temporal para la entidad relacionada.
1. En **Tipo de unión**, seleccione el tipo de unión deseado.
1. Defina la cláusula de unión seleccionando los campos de cada entidad.
1. Seleccione **Añadir** para crear la unión.
Una vez creada, la unión se mostrará en la sección **Uniones**, por lo que habrá campos adicionales disponibles en el menú desplegable **Campos a devolver**. Puede añadir varias uniones, incluidas las uniones encadenadas entre entidades. También puede filtrar y ordenar por campos de las entidades unidas.
Para eliminar una unión, elija el icono de papelera situado junto a ella. Esto eliminará todos los campos de esa unión y romperá cualquier unión o restricción dependiente que utilice esos campos.
1. En **Condiciones**, añada, edite o elimine las reglas que filtran el resultado de la consulta. Puede organizar las reglas en grupos y encadenar varias reglas con `OR` sentencias `AND` o. Para obtener más información sobre los operadores que puede utilizar, consulte[Operadores y ejemplos de condiciones de acción de datos](#data-entities-data-action-operators).
1. En **Ordenar**, configure el modo en que se ordenan los resultados de la consulta seleccionando un atributo y eligiendo un orden ascendente o descendente. Puede eliminar la configuración de clasificación seleccionando el icono de papelera situado junto a la regla de clasificación.
1. En **Transformar los resultados**, puede introducir datos personalizados JavaScript para modificar o formatear los resultados antes de que se muestren o se envíen a las automatizaciones.
1. En la **vista previa de resultados**, consulte una tabla de vista previa del resultado de la consulta en función de los campos configurados, los filtros, la clasificación y JavaScript.
## Operadores y ejemplos de condiciones de acción de datos
Puede usar los operadores de condición para comparar un valor de expresión configurado con una columna de entidad para devolver un subconjunto de objetos de base de datos. Los operadores que puede utilizar dependen del tipo de datos de la columna y del tipo de base de datos a la que esté conectada la entidad, como Amazon Redshift, Amazon Aurora o Amazon DynamoDB.
Los siguientes operadores de condición se pueden utilizar con todos los servicios de base de datos:
+ `=`y`!=`: Disponible para todos los tipos de datos (excepto las columnas de clave principal).
+ `<=`, `>=``<`, y`>=`: Disponible solo para columnas numéricas.
+ `IS NULL`y`IS NOT NULL`: se usa para hacer coincidir columnas que tienen valores nulos o vacíos. Los valores nulos suelen interpretarse de forma diferente en cada base de datos; sin embargo, en App Studio, el `NULL` operador hace coincidir y devuelve los registros que tienen valores nulos en la tabla de la base de datos conectada.
Los siguientes operadores de condición solo se pueden usar en entidades que estén conectadas a los servicios de bases de datos que los admiten:
+ `LIKE`y `NOT LIKE` (Redshift, Aurora): se utiliza para realizar consultas basadas en patrones en la base de datos conectada. El `LIKE` operador proporciona flexibilidad en la funcionalidad de búsqueda porque encuentra y devuelve registros que se ajustan a los patrones especificados. Los patrones se definen mediante caracteres comodín que coinciden con cualquier carácter o secuencia de caracteres del patrón. Cada sistema de administración de bases de datos tiene un conjunto único de caracteres comodín, pero los dos más populares son los `%` que representan cualquier número de caracteres (incluido el 0) y los `_` que representan un solo carácter.
+ `Contains`y `Not Contains` (DynamoDB): se utiliza para realizar una búsqueda que distingue entre mayúsculas y minúsculas para determinar si el texto dado se encuentra dentro de los valores de las columnas.
+ `Starts With`y `Not Starts With` (DynamoDB): se utiliza para realizar una búsqueda que distingue entre mayúsculas y minúsculas para determinar si el texto dado se encuentra al principio de los valores de las columnas.
### Soporte de operadores de condición por base de datos
En la siguiente tabla se muestran los operadores de condiciones de acción de datos que admite cada base de datos que se puede conectar a App Studio.
| | =, \$1=, <, >, <=, >= | ME GUSTA, NO ME GUSTA | Contiene, no contiene | Empieza con, no empieza con | ES NULO, NO ES NULO |
| --- | --- | --- | --- | --- | --- |
| **DynamoDB** | Sí | No | Sí | Sí | Sí |
| **Aurora** | Sí | Sí | No | No | Sí |
| **Redshift** | Sí | Sí | No | No | Sí |
### Ejemplos de condiciones de acción de datos
Tenga en cuenta la siguiente tabla de base de datos `name``city`, que incluye varios elementos con `hireDate` campos y.
| name | ciudad | Fecha de contratación |
| --- | --- | --- |
| Adam | Seattle | 2025-03-01 |
| Adrienne | Boston | 2025-03-05 |
| Bob | Albuquerque | 2025-03-06 |
| Carlos | Chicago | 2025-03-10 |
| Caroline | NULL | 12-03-2025 |
| Rita | Miami | 15-03-15 |
Ahora, considere la posibilidad de crear acciones de datos en App Studio que devuelvan el `name` campo de los elementos que cumplan condiciones específicas. La siguiente lista contiene ejemplos de condiciones y los valores que devuelve la tabla para cada una de ellas.
**nota**
Los ejemplos tienen el formato de ejemplos de SQL; es posible que no aparezcan como en App Studio, pero se utilizan para ilustrar el comportamiento de los operadores.
+ `WHERE name LIKE 'Adam'`: Devuelve`Adam`.
+ `WHERE name LIKE 'A%'`: Devuelve `Adam` y`Adrienne`.
+ `WHERE name NOT LIKE 'B_B'`: Devuelve`Adam`, `Adrienne``Carlos`,`Caroline`, y`Rita`.
+ `WHERE contains(name, 'ita')`: Devuelve`Rita`.
+ `WHERE begins_with(name, 'Car')`: Devuelve `Carlos` y`Caroline`.
+ `WHERE city IS NULL`: Devuelve`Caroline`.
+ `WHERE hireDate < "2025-03-06"`: Devuelve `Adam` y`Adrienne`.
+ `WHERE hireDate >= DateTime.now().toISODate()`: Tenga en cuenta que `DateTime.now().toISODate()` devuelve la fecha actual. En un escenario en el que la fecha actual es el 10 de marzo de 2025, la expresión devuelve`Carlos`, y. `Caroline` `Rita`
**sugerencia**
Para obtener más información sobre la comparación de fechas y horas en expresiones, consulte. [Fecha y hora](expressions.md#expressions-date-time)
## Eliminar acciones de datos
Utilice el siguiente procedimiento para eliminar las acciones de datos de una entidad de App Studio.
1. Si es necesario, navegue hasta la entidad de la que desee eliminar las acciones de datos.
1. Seleccione la pestaña **Acciones de datos**.
1. Para cada acción de datos que quieras eliminar, selecciona el menú desplegable situado junto a **Editar** y selecciona **Eliminar**.
1. Selecciona **Confirmar** en el cuadro de diálogo.
# Añadir o eliminar datos de muestra
Puedes añadir datos de muestra a las entidades de una aplicación de App Studio. Como las aplicaciones no se comunican con los servicios externos hasta que se publican, los datos de muestra se pueden usar para probar la aplicación y la entidad en entornos de vista previa.
1. Si es necesario, navegue hasta la entidad que desee editar.
1. Seleccione la pestaña **Datos de muestra**.
1. Para generar datos de muestra, elija **Generar más datos de muestra**.
1. Para eliminar datos de muestra, selecciona las casillas de verificación de los datos que deseas eliminar y presiona la tecla Eliminar o Retroceso. Seleccione **Guardar** para guardar los cambios.
# Agregue o edite la fuente de datos y los campos del mapa conectados
**sugerencia**
Puede presionar CTRL\$1Z para deshacer el cambio más reciente en su entidad.
1. Si es necesario, navegue hasta la entidad que desee editar.
1. Seleccione la pestaña **Conexión** para ver o administrar la conexión entre la entidad y una tabla de fuentes de datos en la que se almacenan los datos cuando se publica la aplicación. Una vez conectada una tabla de fuentes de datos, puede asignar los campos de la entidad a las columnas de la tabla.
1. En **Connector**, elija el conector que contiene una conexión a la tabla de fuentes de datos deseada. Para obtener más información sobre los conectores, consulte[Conecta App Studio a otros servicios con conectores](connectors.md).
1. En **Tabla**, elija la tabla que desee usar como fuente de datos para la entidad.
1. La tabla muestra los campos de la entidad y la columna de la fuente de datos a la que están mapeados. Elija **Asignación automática para asignar** automáticamente los campos de su entidad a las columnas de la fuente de datos. También puede mapear los campos manualmente en la tabla seleccionando la columna de la fuente de datos en el menú desplegable de cada campo de entidad.
# Eliminar una entidad
Use el siguiente procedimiento para eliminar una entidad de una aplicación de App Studio.
**nota**
Al eliminar una entidad de una aplicación de App Studio, no se elimina la tabla de fuentes de datos conectadas, incluida la tabla de entidades administradas de DynamoDB correspondiente. Las tablas de fuentes de datos permanecerán en la AWS cuenta asociada y, si lo desea, deberán eliminarse del servicio correspondiente.
**Para eliminar una entidad**
1. Si es necesario, navegue hasta su aplicación.
1. Elija la pestaña **Datos**.
1. **En el menú de **entidades** de la izquierda, selecciona el menú de puntos suspensivos situado junto a la entidad que quieres eliminar y selecciona Eliminar.**
1. Revise la información del cuadro de diálogo, introduzca **confirm** y seleccione **Eliminar para eliminar** la entidad.
# Entidades de datos gestionadas en AWS App Studio
Normalmente, se configura una entidad en App Studio con una conexión a una tabla de base de datos externa y se debe crear y asignar cada campo de entidad a una columna de la tabla de base de datos conectada. Al realizar un cambio en el modelo de datos, tanto la tabla de la base de datos externa como la entidad deben actualizarse, y los campos modificados deben reasignarse. Si bien este método es flexible y permite el uso de diferentes tipos de fuentes de datos, requiere una planificación más temprana y un mantenimiento continuo.
Una *entidad gestionada* es un tipo de entidad en la que App Studio gestiona todo el proceso de almacenamiento y configuración de datos por ti. Al crear una entidad gestionada, se crea la tabla de DynamoDB correspondiente en la cuenta asociada. AWS Esto garantiza una gestión interna de los datos segura y transparente. AWS Con una entidad administrada, se configura el esquema de la entidad en App Studio y la tabla de DynamoDB correspondiente también se actualiza automáticamente.
## Uso de entidades administradas en varias aplicaciones
Una vez que hayas creado una entidad administrada en una aplicación de App Studio, esa entidad se puede usar en otras aplicaciones de App Studio. Esto resulta útil para configurar el almacenamiento de datos para aplicaciones con esquemas y modelos de datos idénticos, ya que proporciona un único recurso subyacente que mantener.
Cuando se utiliza una entidad gestionada en varias aplicaciones, todas las actualizaciones del esquema de la tabla de DynamoDB correspondiente se deben realizar con la aplicación original en la que se creó la entidad gestionada. Los cambios de esquema realizados en la entidad en otras aplicaciones no actualizarán la tabla de DynamoDB correspondiente.
## Limitaciones de las entidades gestionadas
**Restricciones de actualización de la clave principal**: no se puede cambiar el nombre o el tipo de clave principal de la entidad una vez creada, ya que se trata de un cambio destructivo en DynamoDB y provocaría la pérdida de los datos existentes.
**Cambiar el nombre de las columnas**: al cambiar el nombre de una columna en DynamoDB, se crea una nueva columna mientras que la columna original conserva los datos originales. Los datos originales no se copian automáticamente en la nueva columna ni se eliminan de la columna original. Puede cambiar el nombre de los campos de la entidad gestionada, lo que se conoce como *nombre del sistema*, pero perderá el acceso a la columna original y a sus datos. No hay ninguna restricción a la hora de cambiar el nombre que se muestra.
**Cambiar el tipo de datos**: aunque DynamoDB ofrece flexibilidad para modificar los tipos de datos de las columnas tras la creación de la tabla, dichos cambios pueden afectar gravemente a los datos existentes, así como a la lógica y precisión de las consultas. Los cambios en los tipos de datos requieren la transformación de todos los datos existentes para adaptarlos al nuevo formato, que resulta complejo en el caso de tablas activas y de gran tamaño. Además, las acciones relacionadas con los datos pueden arrojar resultados inesperados hasta que se complete la migración de datos. Puede cambiar los tipos de datos de los campos, pero los datos existentes no se migrarán al nuevo tipo de datos.
**Columna de clasificación**: DynamoDB permite la recuperación de datos ordenados mediante claves de clasificación. Las claves de clasificación deben definirse como parte de las claves principales compuestas junto con la clave de partición. Las limitaciones incluyen la clave de clasificación obligatoria, la clasificación limitada dentro de una partición y la no clasificación global entre las particiones. Se requiere un modelado cuidadoso de los datos de las claves de clasificación para evitar que las particiones estén activas. No admitiremos el hito Sorting for Preview.
**Uniones**: las uniones no se admiten en DynamoDB. Las tablas están desnormalizadas por diseño para evitar costosas operaciones de unión. Para modelar one-to-many las relaciones, la tabla secundaria contiene un atributo que hace referencia a la clave principal de la tabla principal. Las consultas de datos de varias tablas implican buscar elementos de la tabla principal para recuperar detalles. No admitiremos las uniones nativas para entidades gestionadas como parte del hito de la versión preliminar. Como solución alternativa, presentaremos un paso de automatización que puede realizar una fusión de datos de 2 entidades. Será muy similar a una búsqueda de un nivel. No admitiremos el hito Sorting for Preview.
**Env Stage**: Permitiremos publicar para probar, pero utilizaremos la misma tienda gestionada en ambos entornos
# Parámetros de página y automatización
Los parámetros son una potente función de AWS App Studio que se utiliza para transferir valores dinámicos entre distintos componentes, páginas y automatizaciones de la aplicación. Con los parámetros, puedes crear experiencias flexibles y contextuales, lo que hace que tus aplicaciones sean más receptivas y personalizadas. En este artículo se describen dos tipos de parámetros: los parámetros de página y los parámetros de automatización.
**Topics**
+ [Parámetros de página](parameters-page.md)
+ [Parámetros de automatización](parameters-automation.md)
# Parámetros de página
Los parámetros de página son una forma de enviar información entre páginas y, a menudo, se utilizan cuando se navega de una página a otra dentro de una aplicación de App Studio para mantener el contexto o transmitir datos. Los parámetros de página suelen constar de un nombre y un valor.
## Casos de uso de parámetros de página
Los parámetros de página se utilizan para transferir datos entre diferentes páginas y componentes de las aplicaciones de App Studio. Son especialmente útiles para los siguientes casos de uso:
1. **Búsqueda y filtrado**: cuando los usuarios buscan en la página de inicio de tu aplicación, los términos de búsqueda se pueden pasar como parámetros a la página de resultados, lo que permite que muestre solo los elementos filtrados relevantes. Por ejemplo, si un usuario busca*noise-cancelling headphones*, el parámetro con el valor se *noise-cancelling headphones* puede pasar a la página de listado de productos.
1. **Visualización de los detalles del artículo**: si un usuario hace clic en un listado, como un producto, el identificador único de ese artículo se puede pasar como parámetro a la página de detalles. Esto permite que la página de detalles muestre toda la información sobre el artículo específico. Por ejemplo, cuando un usuario hace clic en un producto de auriculares, el identificador único del producto se pasa como parámetro a la página de detalles del producto.
1. **Pasar el contexto del usuario en la navegación de la página**: a medida que los usuarios navegan entre las páginas, los parámetros pueden transmitir un contexto importante, como la ubicación del usuario, las categorías de productos preferidas, el contenido del carrito de compras y otros ajustes. Por ejemplo, cuando un usuario navega por las diferentes categorías de productos de tu aplicación, su ubicación y sus categorías preferidas se mantienen como parámetros, lo que proporciona una experiencia personalizada y coherente.
1. **Enlaces profundos**: usa los parámetros de la página para compartir o marcar un enlace a una página específica de la aplicación.
1. **Acciones de datos**: puede crear acciones de datos que acepten valores de parámetros para filtrar y consultar las fuentes de datos en función de los parámetros pasados. Por ejemplo, en la página de listado de productos, puedes crear una acción de datos que acepte `category` parámetros para buscar los productos relevantes.
## Consideraciones de seguridad de los parámetros de página
Si bien los parámetros de página proporcionan una forma eficaz de pasar datos entre páginas, debe usarlos con precaución, ya que pueden exponer información confidencial si no se utilizan correctamente. Estas son algunas consideraciones de seguridad importantes que debes tener en cuenta:
1. **Evite exponer datos confidenciales en URLs**
1. **Riesgo**: URLs incluidos los parámetros de acción de los datos, suelen estar visibles en los registros del servidor, el historial del navegador y otros lugares. Por ello, es fundamental evitar que se expongan datos confidenciales, como las credenciales de usuario, la información de identificación personal (PII) o cualquier otro dato confidencial, en los valores de los parámetros de la página.
1. **Mitigación**: considere la posibilidad de utilizar identificadores que puedan asignarse de forma segura a los datos confidenciales. Por ejemplo, en lugar de pasar el nombre o la dirección de correo electrónico de un usuario como parámetro, podrías pasar un identificador único aleatorio que se pueda usar para obtener el nombre o el correo electrónico del usuario.
# Parámetros de automatización
Los parámetros de automatización son una potente función de App Studio que se puede utilizar para crear automatizaciones flexibles y reutilizables mediante la transmisión de valores dinámicos de diversas fuentes, como la interfaz de usuario, otras automatizaciones o acciones de datos. Actúan como marcadores de posición que se sustituyen por valores reales cuando se ejecuta la automatización, lo que te permite usar la misma automatización con diferentes entradas cada vez.
En una automatización, los parámetros tienen nombres únicos y puedes hacer referencia al valor de un parámetro mediante la variable params seguida del nombre del parámetro, por ejemplo. `{{params.customerId}}`
Este artículo proporciona una comprensión profunda de los parámetros de automatización, incluidos sus conceptos fundamentales, su uso y las mejores prácticas.
## Ventajas de los parámetros de automatización
Los parámetros de automatización ofrecen varios beneficios, entre los que se incluye la siguiente lista:
1. **Reutilización**: al usar parámetros, puede crear automatizaciones reutilizables que se pueden personalizar con diferentes valores de entrada, lo que le permite reutilizar la misma lógica de automatización con diferentes entradas.
1. **Flexibilidad**: en lugar de codificar valores de forma rígida en una automatización, puede definir parámetros y proporcionar valores diferentes cuando sea necesario, lo que hace que sus automatizaciones sean más dinámicas y adaptables.
1. **Separación de preocupaciones**: los parámetros ayudan a separar la lógica de automatización de los valores específicos utilizados, lo que promueve la organización y el mantenimiento del código.
1. **Validación**: cada parámetro tiene un tipo de datos, como cadena, número o booleano, que se valida en tiempo de ejecución. Esto garantiza que las solicitudes con tipos de datos incorrectos se rechacen sin necesidad de un código de validación personalizado.
1. **Parámetros opcionales y obligatorios**: puede designar los parámetros de automatización como opcionales o obligatorios. Se deben proporcionar los parámetros obligatorios al ejecutar la automatización, mientras que los parámetros opcionales pueden tener valores predeterminados o omitirse. Esta flexibilidad le permite crear automatizaciones más versátiles que pueden gestionar diferentes escenarios en función de los parámetros proporcionados.
## Escenarios y casos de uso
### Escenario: recuperación de detalles del producto
Imagine que tiene una automatización que recupera los detalles del producto de una base de datos en función de un identificador de producto. Esta automatización podría tener un parámetro llamado`productId`.
El `productId` parámetro actúa como un marcador de posición que puedes rellenar con el valor real del identificador del producto al ejecutar la automatización. En lugar de codificar un identificador de producto específico en la automatización, puedes definir el `productId` parámetro e introducir diferentes valores de identificador de producto cada vez que ejecutes la automatización.
Puedes llamar a esta automatización a partir de la fuente de datos de un componente, pasando el ID del producto seleccionado como `productId` parámetro mediante la sintaxis de corchetes dobles:. `{{ui.productsTable.selectedRow.id}}` De esta forma, cuando un usuario selecciona un producto de una tabla (`ui.productsTable`), la automatización recuperará los detalles del producto seleccionado pasando el identificador de la fila seleccionada como `productId` parámetro.
Como alternativa, puedes invocar esta automatización desde otra automatización que recorra una lista de productos y recupere los detalles de cada producto pasando el identificador del producto como parámetro. `productId` En este escenario, el valor del `productId` parámetro se proporcionaría dinámicamente a partir de la `{{product.id}}` expresión en cada iteración del bucle.
Al utilizar el `productId` parámetro y la sintaxis de corchetes dobles, puede hacer que esta automatización sea más flexible y reutilizable. En lugar de crear automatizaciones independientes para cada producto, puedes tener una única automatización que pueda recuperar los detalles de cualquier producto simplemente proporcionando el identificador de producto correspondiente como valor del parámetro de diferentes fuentes, como los componentes de la interfaz de usuario u otras automatizaciones.
### Escenario: manejo de parámetros opcionales con valores alternativos
Consideremos un escenario en el que tiene una entidad de «Tarea» con una columna obligatoria de «Propietario», pero desea que este campo sea opcional en la automatización y proporcione un valor alternativo si no se selecciona el propietario.
1. Cree una automatización con un nombre de parámetro `Owner` que se asigne al `Owner` campo de la `Task` entidad.
1. Como el `Owner` campo es obligatorio en la entidad, el `Owner` parámetro se sincronizará con la configuración requerida.
1. Para que el `Owner` parámetro sea opcional en la automatización, desactive la `required` configuración de este parámetro.
1. En tu lógica de automatización, puedes usar una expresión como`{{params.Owner || currentUser.userId}}`. Esta expresión comprueba si se proporciona el `Owner` parámetro. Si no se proporciona, recurrirá al ID del usuario actual como propietario.
1. De esta forma, si el usuario no selecciona un propietario en un formulario o componente, la automatización asignará automáticamente al usuario actual como propietario de la tarea.
Al cambiar la `required` configuración del `Owner` parámetro y utilizar una expresión alternativa, puede desacoplarlo del requisito del campo de entidad, hacerlo opcional en la automatización y proporcionar un valor predeterminado cuando no se proporciona el parámetro.
## Definir los tipos de parámetros de automatización
Al utilizar los tipos de parámetros para especificar los tipos de datos y establecer los requisitos, puede controlar las entradas de sus automatizaciones. Esto ayuda a garantizar que sus automatizaciones funcionen de forma fiable con las entradas esperadas.
### Sincronizar los tipos de una entidad
La sincronización dinámica de los tipos de parámetros y los requisitos de las definiciones de los campos de la entidad agiliza la creación de automatizaciones que interactúan con los datos de la entidad, lo que garantiza que el parámetro siempre refleje los requisitos y el tipo de campo de la entidad más recientes.
El siguiente procedimiento detalla los pasos generales para sincronizar los tipos de parámetros de una entidad:
1. Cree una entidad con campos escritos (por ejemplo, booleanos, numéricos, etc.) y márquelos según sea necesario.
1. Crea una nueva automatización.
1. Añada parámetros a la automatización y, al elegir el **tipo**, elija el campo de entidad con el que desee sincronizar. El tipo de datos y la configuración requerida se sincronizarán automáticamente desde el campo de entidad mapeado
1. Si es necesario, puede anular la configuración «obligatoria» cambiándola para cada parámetro. on/off Esto significa que el estado requerido no se mantendrá sincronizado con el campo de la entidad, pero de lo contrario, permanecerá sincronizado.
### Definir los tipos manualmente
También puede definir los tipos de parámetros manualmente sin sincronizarlos desde una entidad
Al definir los tipos de parámetros personalizados, puede crear automatizaciones que acepten tipos de entrada específicos y gestionen los parámetros opcionales o obligatorios según sea necesario, sin depender de las asignaciones de campos de las entidades.
1. Cree una entidad con campos escritos (por ejemplo, booleanos, numéricos, etc.) y márquelos según sea necesario.
1. Crea una nueva automatización.
1. Añada parámetros a la automatización y, al elegir el **tipo**, elija el tipo deseado.
## Configuración de valores dinámicos para pasarlos a los parámetros de automatización
Una vez que haya definido los parámetros para una automatización, puede pasarles valores al invocar la automatización. Puede pasar los valores de los parámetros de dos maneras:
1. **Activadores de componentes**: si invoca la automatización desde un activador de componentes, por ejemplo, al hacer clic en un botón, puede utilizar JavaScript expresiones para transferir valores del contexto del componente. Por ejemplo, si tiene un campo de entrada de texto llamado`emailInput`, puede pasar su valor al parámetro de correo electrónico con la siguiente expresión:`ui.emailInput.value`.
1. **Otras automatizaciones**: si invoca la automatización desde otra automatización, puede usar JavaScript expresiones para pasar valores del contexto de la automatización. Por ejemplo, puedes pasar el valor de otro parámetro o el resultado de un paso de acción anterior.
## Escriba seguridad
Al definir los parámetros con tipos de datos específicos, como cadena, número o booleano, puede asegurarse de que los valores que se transmiten a la automatización son del tipo esperado.
**nota**
En App Studio, las fechas son fechas de cadena ISO y también se validarán.
Esta seguridad de tipos ayuda a evitar los desajustes de tipos, lo que puede provocar errores o comportamientos inesperados en la lógica de automatización. Por ejemplo, si define un parámetro como a`Number`, puede estar seguro de que cualquier valor que se le pase a ese parámetro será un número y no tendrá que realizar comprobaciones de tipo ni conversiones adicionales en la automatización.
## Validación
Puedes añadir reglas de validación a tus parámetros para asegurarte de que los valores que se transfieran a la automatización cumplan ciertos criterios.
Si bien App Studio no proporciona ajustes de validación integrados para los parámetros, puedes implementar validaciones personalizadas añadiendo una JavaScript acción a la automatización que genere un error si se infringen determinadas restricciones.
En el caso de los campos de entidad, se admite un subconjunto de reglas de validación, como minimum/maximum los valores. Sin embargo, no se validan en el nivel de automatización, solo en la capa de datos, cuando se ejecutan acciones de Create/Update/Delete registro.
## Mejores prácticas para los parámetros de automatización
Para garantizar que sus parámetros de automatización estén bien diseñados, sean fáciles de mantener y fáciles de usar, siga estas prácticas recomendadas:
1. **Utilice nombres de parámetros descriptivos**: elija nombres de parámetros que describan claramente el propósito o el contexto del parámetro.
1. **Proporcione descripciones de los parámetros**: aproveche el campo **Descripción** al definir los parámetros para explicar su propósito, sus limitaciones y sus expectativas. Estas descripciones aparecerán en los JSDoc comentarios al hacer referencia al parámetro, así como en cualquier interfaz de usuario en la que los usuarios deban proporcionar valores para los parámetros al invocar la automatización.
1. **Utilice los tipos de datos adecuados**: considere detenidamente el tipo de datos de cada parámetro en función de los valores de entrada esperados, por ejemplo: cadena, número, booleano u objeto.
1. **Valide los valores de los parámetros**: implemente las comprobaciones de validación adecuadas en su automatización para asegurarse de que los valores de los parámetros cumplen los requisitos específicos antes de continuar con otras acciones.
1. **Usa valores alternativos o predeterminados**: si bien App Studio no admite actualmente la configuración de valores predeterminados para los parámetros, puedes implementar valores alternativos o predeterminados al consumir los parámetros de tu lógica de automatización. Por ejemplo, puedes usar una expresión como esta `{{ params.param1 || "default value" }}` para proporcionar un valor predeterminado si el `param1` parámetro no se proporciona o tiene un valor falso.
1. **Mantenga la coherencia de los parámetros**: si tiene varias automatizaciones que requieren parámetros similares, intente mantener la coherencia en los nombres de los parámetros y los tipos de datos en todas esas automatizaciones.
1. **Documente el uso de los parámetros**: mantenga una documentación clara para sus automatizaciones, incluidas las descripciones de cada parámetro, su propósito, los valores esperados y cualquier ejemplo o caso extremo relevante.
1. **Revisa y refactoriza con frecuencia**: revisa periódicamente tus automatizaciones y sus parámetros, y refactoriza o consolida los parámetros según sea necesario para mejorar la claridad, la capacidad de mantenimiento y la reutilización.
1. **Limite la cantidad de parámetros: si bien los parámetros** proporcionan flexibilidad, demasiados parámetros pueden hacer que una automatización sea compleja y difícil de usar. Intente lograr un equilibrio entre flexibilidad y simplicidad limitando el número de parámetros a solo lo necesario.
1. **Considere la posibilidad de agrupar parámetros: si tiene que definir varios parámetros relacionados, considere agruparlos en un solo *Object* parámetro**.
1. **Preocupaciones distintas**: evite usar un único parámetro para múltiples propósitos o combinar valores no relacionados en un solo parámetro. Cada parámetro debe representar una preocupación o dato distinto.
1. **Utilice alias de parámetros**: si tiene parámetros con nombres largos o complejos, considere la posibilidad de utilizar alias o versiones abreviadas dentro de la lógica de automatización para mejorar la legibilidad y el mantenimiento.
Si sigue estas prácticas recomendadas, puede asegurarse de que sus parámetros de automatización estén bien diseñados, sean fáciles de mantener y fáciles de usar, lo que, en última instancia, mejorará la calidad y la eficiencia generales de sus automatizaciones.
# Uso JavaScript para escribir expresiones en App Studio
En AWS App Studio, puedes usar JavaScript expresiones para controlar dinámicamente el comportamiento y la apariencia de tus aplicaciones. Las JavaScript expresiones de una sola línea se escriben entre corchetes dobles y se pueden usar en varios contextos`{{ }}`, como las automatizaciones, los componentes de la interfaz de usuario y las consultas de datos. Estas expresiones se evalúan en tiempo de ejecución y se pueden utilizar para realizar cálculos, manipular datos y controlar la lógica de las aplicaciones.
App Studio ofrece soporte nativo para tres bibliotecas de código JavaScript abierto: Luxon, UUID y Lodash, así como integraciones de SDK para detectar errores de JavaScript sintaxis y verificación de tipos en las configuraciones de la aplicación.
**importante**
App Studio no admite el uso de bibliotecas personalizadas o de terceros. JavaScript
## Sintaxis básica
JavaScript las expresiones pueden incluir variables, literales, operadores y llamadas a funciones. Las expresiones se utilizan habitualmente para realizar cálculos o evaluar condiciones.
Consulte los siguientes ejemplos:
+ `{{ 2 + 3 }}`se evaluará como 5.
+ `{{ "Hello, " + "World!" }}`evaluará como «¡Hola, mundo\$1».
+ `{{ Math.max(5, 10) }}`evaluará a 10.
+ `{{ Math.random() * 10 }}`devuelve un número aleatorio (con decimales) entre [0-10).
## Interpolación
También se puede utilizar JavaScript para interpolar valores dinámicos en texto estático. Esto se consigue encerrando la JavaScript expresión entre corchetes dobles, como en el ejemplo siguiente:
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
En este ejemplo, `currentUser.firstName` es una JavaScript expresión que recupera el nombre del usuario actual y, a continuación, se inserta dinámicamente en el mensaje de bienvenida.
## Concatenación
Puede concatenar cadenas y variables mediante el `+` operador in JavaScript, como en el siguiente ejemplo.
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
Esta expresión combina los valores de `currentRow.FirstName` y `currentRow.LastName` con un espacio intermedio, lo que da como resultado el nombre completo de la fila actual. Por ejemplo, si `currentRow.FirstName` es `John` y `currentRow.LastName` es`Doe`, la expresión se resolvería en`John Doe`.
## Fecha y hora
JavaScript proporciona varias funciones y objetos para trabajar con fechas y horas. Por ejemplo:
+ `{{ new Date().toLocaleDateString() }}`: devuelve la fecha actual en un formato localizado.
+ `{{ DateTime.now().toISODate() }}`: Devuelve la fecha actual en YYYY-MM-DD formato, para usarla en el componente Date.
### Comparación de fecha y hora
Utilice operadores como`=`,, `>` `<``>=`, o `<=` para comparar valores de fecha u hora. Por ejemplo:
+ `{{ui.timeInput.value > "10:00 AM"}}`: Comprueba si la hora es posterior a las 10:00 a.m.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: Comprueba si la hora es a las 17:00 o antes.
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: Comprueba si la hora es posterior a la hora actual.
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: Comprueba si la fecha es anterior a la fecha actual.
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: Comprueba si la fecha está al menos 5 días después de la fecha actual.
## Bloques de código
Además de las expresiones, también puede escribir bloques de JavaScript códigos multilínea. A diferencia de las expresiones, los bloques de código no requieren corchetes. En su lugar, puedes escribir el JavaScript código directamente en el editor de bloques de código.
**nota**
Mientras se evalúan las expresiones y se muestran sus valores, se ejecutan los bloques de código y se muestran sus resultados (si los hay).
## Variables y funciones globales
App Studio proporciona acceso a determinadas variables y funciones globales que se pueden usar en tus JavaScript expresiones y bloques de código. Por ejemplo, `currentUser` es una variable global que representa al usuario que ha iniciado sesión actualmente, y puedes acceder a propiedades como recuperar el `currentUser.role` rol del usuario.
## Hacer referencia o actualizar los valores de los componentes de la interfaz de usuario
Puede utilizar expresiones en los componentes y en las acciones de automatización para hacer referencia a los valores de los componentes de la interfaz de usuario y actualizarlos. Al hacer referencia a los valores de los componentes y actualizarlos mediante programación, puede crear interfaces de usuario dinámicas e interactivas que respondan a las entradas de los usuarios y a los cambios en los datos.
### Hacer referencia a los valores de los componentes de la interfaz
Puede crear aplicaciones interactivas y basadas en datos mediante la implementación de un comportamiento dinámico mediante el acceso a los valores de los componentes de la interfaz de usuario.
Puede acceder a los valores y propiedades de los componentes de la interfaz de usuario en la misma página mediante el espacio de `ui` nombres de las expresiones. Al hacer referencia al nombre de un componente, puede recuperar su valor o realizar operaciones en función de su estado.
**nota**
El espacio de `ui` nombres solo mostrará los componentes de la página actual, ya que los componentes se centran en sus páginas respectivas.
La sintaxis básica para hacer referencia a los componentes de una aplicación de App Studio es:. `{{ui.componentName}}`
La siguiente lista contiene ejemplos del uso del espacio de `ui` nombres para acceder a los valores de los componentes de la interfaz de usuario:
+ `{{ui.textInputName.value}}`: Representa el valor de un componente de entrada de texto denominado. *textInputName*
+ `{{ui.formName.isValid}}`: compruebe si todos los campos del formulario denominado *formName* son válidos en función de los criterios de validación que haya proporcionado.
+ `{{ui.tableName.currentRow.columnName}}`: Representa el valor de una columna específica de la fila actual de un componente de la tabla denominado*tableName*.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Representa el valor del campo especificado de la fila seleccionada en un componente de tabla denominado*tableName*. A continuación, puede añadir un nombre de campo como `ID` (`{{ui.tableName.selectedRowData.ID}}`) para hacer referencia al valor de ese campo de la fila seleccionada.
La siguiente lista contiene ejemplos más específicos de cómo hacer referencia a los valores de los componentes:
+ `{{ui.inputText1.value.trim().length > 0}}`: Compruebe si el valor del *inputText1* componente, después de recortar los espacios en blanco iniciales o finales, tiene una cadena que no esté vacía. Esto puede resultar útil para validar la entrada del usuario u enabling/disabling otros componentes en función del valor del campo de texto introducido.
+ `{{ui.multiSelect1.value.join(", ")}}`: En el caso de un componente de selección múltiple denominado*multiSelect1*, esta expresión convierte la matriz de valores de las opciones seleccionadas en una cadena separada por comas. Esto puede resultar útil para mostrar las opciones seleccionadas en un formato fácil de usar o para pasar las selecciones a otro componente o automatización.
+ `{{ui.multiSelect1.value.includes("option1")}}`: Esta expresión comprueba si el valor *option1* está incluido en la matriz de opciones seleccionadas para el *multiSelect1* componente. Devuelve verdadero si *option1* está seleccionado y falso en caso contrario. Esto puede resultar útil para renderizar componentes de forma condicional o realizar acciones en función de selecciones de opciones específicas.
+ `{{ui.s3Upload1.files.length > 0}}`: Para un componente de carga de archivos de Amazon S3 denominado*s3Upload1*, esta expresión comprueba si se ha cargado algún archivo comprobando la longitud de la matriz de archivos. Puede resultar útil para enabling/disabling otros componentes o acciones en función de si los archivos se han cargado o no.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: esta expresión filtra la lista de archivos cargados en el *s3Upload1* componente para incluir únicamente los archivos de imagen PNG y devuelve el recuento de esos archivos. Esto puede resultar útil para validar o mostrar información sobre los tipos de archivos cargados.
### Actualizar los valores de los componentes de la interfaz
Para actualizar o manipular el valor de un componente, utilícelo `RunComponentAction` dentro de una automatización. A continuación, se muestra un ejemplo de la sintaxis que puede utilizar para actualizar el valor de un componente de entrada de texto denominado *myInput* mediante la `RunComponentAction` acción:
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
En este ejemplo, el `RunComponentAction` paso llama a la `setValue` acción al *myInput* componente y le pasa el nuevo valor,*New Value*.
## Trabajar con datos de tablas
Puede acceder a los datos y valores de las tablas para realizar operaciones. Puede utilizar las siguientes expresiones para acceder a los datos de la tabla:
+ `currentRow`: Se utiliza para acceder a los datos de la tabla desde la fila actual de la tabla. Por ejemplo, establecer el nombre de una acción de la tabla, enviar un valor de la fila a una automatización que se inicia a partir de una acción o utilizar los valores de las columnas existentes en una tabla para crear una nueva columna.
+ `ui.tableName.selectedRow`y ambos `ui.tableName.selectedRowData` se utilizan para acceder a los datos de la tabla desde otros componentes de la página. Por ejemplo, establecer el nombre de un botón fuera de la tabla en función de la fila seleccionada. Los valores devueltos son los mismos, pero las diferencias entre `selectedRow` ellos `selectedRowData` son las siguientes:
+ `selectedRow`: Este espacio de nombres incluye el nombre que se muestra en el encabezado de la columna de cada campo. Se debe utilizar `selectedRow` al hacer referencia a un valor de una columna visible de la tabla. Por ejemplo, si tiene una columna personalizada o calculada en la tabla que no existe como campo en la entidad.
+ `selectedRowData`: este espacio de nombres incluye los campos de la entidad utilizada como fuente de la tabla. Deberías usarlo `selectedRowData` para hacer referencia a un valor de la entidad que no esté visible en la tabla, pero que sea útil para otros componentes o automatizaciones de tu aplicación.
La siguiente lista contiene ejemplos de cómo acceder a los datos de las tablas en las expresiones:
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: devuelve el valor de la *columnNameWithNoSpace* columna de la fila seleccionada de la tabla.
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: Devuelve el valor de la *Column Name With Space* columna de la fila seleccionada de la tabla.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Devuelve el valor del campo de *fieldName* entidad de la fila seleccionada de la tabla.
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: haga referencia al nombre de la columna de la fila seleccionada desde otros componentes o expresiones de la misma página.
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: concatene valores de varias columnas para crear una nueva columna en una tabla.
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: personalice el valor de visualización de un campo dentro de una tabla en función del valor de estado almacenado.
+ `{{currentRow.colName}}`, `{{currentRow["First Name"]}}``{{currentRow}}`, o`{{ui.tableName.selectedRows[0]}}`: pasa el contexto de la fila a la que se hace referencia dentro de una acción de fila.
## Acceder a las automatizaciones
Puedes usar las automatizaciones para ejecutar la lógica y las operaciones del lado del servidor en App Studio. Dentro de las acciones de automatización, puedes usar expresiones para procesar datos, generar valores dinámicos e incorporar los resultados de acciones anteriores.
### Acceder a los parámetros de automatización
Puede pasar valores dinámicos de los componentes de la interfaz de usuario y otras automatizaciones a las automatizaciones, lo que las hace reutilizables y flexibles. Esto se hace mediante parámetros de automatización con el espacio de `params` nombres siguiente:
`{{params.parameterName}}`: Haga referencia a un valor transferido a la automatización desde un componente de la interfaz de usuario u otra fuente. Por ejemplo, `{{params.ID}}` haría referencia a un parámetro denominado*ID*.
#### Manipular los parámetros de automatización
Se puede utilizar JavaScript para manipular los parámetros de automatización. Consulte los siguientes ejemplos:
+ `{{params.firstName}} {{params.lastName}}`: concatene los valores pasados como parámetros.
+ `{{params.numberParam1 + params.numberParam2}}`: añada dos parámetros numéricos.
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: compruebe si un parámetro no es nulo o indefinido y si tiene una longitud distinta de cero. Si es verdadero, utilice el valor proporcionado; de lo contrario, establezca un valor predeterminado.
+ `{{params.rootCause || "No root cause provided"}}`: Si el `params.rootCause` parámetro es falso (nulo, indefinido o una cadena vacía), utilice el valor predeterminado proporcionado.
+ `{{Math.min(params.numberOfProducts, 100)}}`: restrinja el valor de un parámetro a un valor máximo (en este caso,`100`).
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: Si el `params.startDate` parámetro es`"2023-06-15T10:30:00.000Z"`, esta expresión se evaluará como la fecha una semana después de la fecha de inicio. `"2023-06-22T10:30:00.000Z"`
### Acceder a los resultados de la automatización a partir de una acción anterior
Las automatizaciones permiten que la aplicación ejecute la lógica y las operaciones del lado del servidor, como consultar bases de datos, interactuar con APIs ellos o realizar transformaciones de datos. El espacio de `results` nombres proporciona acceso a las salidas y los datos devueltos por acciones anteriores dentro de la misma automatización. Tenga en cuenta los siguientes puntos sobre el acceso a los resultados de la automatización:
1. Solo puede acceder a los resultados de los pasos de automatización anteriores dentro de la misma automatización.
1. Si tienes acciones nombradas *action1* y *action2* en ese orden, *action1* no puedes hacer referencia a ningún resultado y solo *action2* puedes acceder a ellas`results.action1`.
1. Esto también funciona en las acciones del lado del cliente. Por ejemplo, si tienes un botón que activa una automatización mediante la `InvokeAutomation` acción. A continuación, puedes incluir un paso de navegación con una `Run If` condición, como navegar `results.myInvokeAutomation1.fileType === "pdf"` a una página con un visor de PDF si la automatización indica que el archivo es un PDF.
La siguiente lista contiene la sintaxis para acceder a los resultados de la automatización de una acción anterior mediante el espacio de `results` nombres.
+ `{{results.stepName.data}}`: recupera la matriz de datos de un paso de automatización denominado. *stepName*
+ `{{results.stepName.output}}`: recupera el resultado de un paso de automatización denominado*stepName*.
La forma de acceder a los resultados de un paso de automatización depende del tipo de acción y de los datos que devuelva. Diferentes acciones pueden devolver propiedades o estructuras de datos diferentes. Estos son algunos ejemplos comunes:
+ Para una acción de datos, puede acceder a la matriz de datos devuelta utilizando`results.stepName.data`.
+ Para una acción de llamada a la API, puede acceder al cuerpo de la respuesta utilizando`results.stepName.body`.
+ Para realizar una acción de Amazon S3, puede acceder al contenido del archivo mediante`results.stepName.Body.transformToWebStream()`.
Consulte la documentación para conocer los tipos de acciones específicos que está utilizando para comprender la forma de los datos que devuelven y cómo acceder a ellos dentro del espacio de `results` nombres. La siguiente lista contiene algunos ejemplos
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: Suponiendo que *getDataStep* se trata de una acción de `Invoke Data Action` automatización que devuelve una matriz de filas de datos, esta expresión filtra la matriz de datos para incluir solo las filas en las que el campo de estado es igual a `pending` y devuelve la longitud (recuento) de la matriz filtrada. Esto puede resultar útil para consultar o procesar datos en función de condiciones específicas.
+ `{{params.email.split("@")[0]}}`: Si el `params.email` parámetro contiene una dirección de correo electrónico, esta expresión divide la cadena en el símbolo @ y devuelve la parte anterior al símbolo @, extrayendo así la parte correspondiente al nombre de usuario de la dirección de correo electrónico.
+ `{{new Date(params.timestamp * 1000)}}`: Esta expresión toma un parámetro de marca de tiempo de Unix (`params.timestamp`) y lo convierte en un objeto Date. JavaScript Asume que la marca de tiempo está en segundos, por lo que la multiplica por 1000 para convertirla en milisegundos, que es el formato esperado por el constructor. `Date` Esto puede resultar útil para trabajar con valores de fecha y hora en automatizaciones.
+ `{{results.stepName.Body}}`: En el caso de una acción de `Amazon S3 GetObject` automatización denominada*stepName*, esta expresión recupera el contenido del archivo, que los componentes de la interfaz de usuario, como el **visor de **imágenes** o PDF**, pueden consumir para mostrar el archivo recuperado. Tenga en cuenta que esta expresión debería configurarse en la **salida de automatización de la automatización** para poder utilizarla en los componentes.
# Dependencias de datos y consideraciones de tiempo
Al crear aplicaciones complejas en App Studio, es fundamental comprender y gestionar las dependencias de datos entre los diferentes componentes de datos, como los formularios, las vistas de detalles y los componentes basados en la automatización. Es posible que los componentes de datos y las automatizaciones no completen la recuperación o ejecución de los datos al mismo tiempo, lo que puede provocar problemas de tiempo, errores y comportamientos inesperados. Si eres consciente de los posibles problemas de sincronización y sigues las prácticas recomendadas, puedes crear experiencias de usuario más fiables y coherentes en tus aplicaciones de App Studio.
Algunos posibles problemas son los siguientes:
1. **Conflictos de tiempo de renderización:** los componentes de datos pueden renderizarse en un orden que no se alinea con sus dependencias de datos, lo que podría provocar inconsistencias o errores visuales.
1. **Tiempo de ejecución de la automatización:** las tareas de automatización pueden completarse antes de que los componentes se hayan cargado por completo, lo que provoca errores de ejecución en tiempo de ejecución.
1. **Bloqueos de componentes:** los componentes que funcionan con automatizaciones pueden bloquearse si las respuestas no son válidas o si la automatización no ha terminado de ejecutarse.
## Ejemplo: detalles del pedido e información del cliente
Este ejemplo demuestra cómo las dependencias entre los componentes de los datos pueden provocar problemas de sincronización y posibles errores en la visualización de los datos.
Considere una aplicación con los dos componentes de datos siguientes en la misma página:
+ Un componente de detalle (`orderDetails`) que busca los datos de los pedidos.
+ Un componente de detalle (`customerDetails`) que muestra los detalles del cliente relacionados con el pedido.
En esta aplicación, hay dos campos en el componente de `orderDetails` detalles, configurados con los siguientes valores:
```
// 2 text fields within the orderDetails detail component
// Info from orderDetails Component
{{ui.orderDetails.data[0].name}}
// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```
En este ejemplo, el `orderDetails` componente intenta mostrar el nombre del cliente haciendo referencia a los datos del `customerDetails` componente. Esto es problemático, ya que el `orderDetails` componente puede renderizarse antes de `customerDetails` que haya obtenido sus datos. Si la recuperación de los datos del `customerDetails` componente se retrasa o falla, el `orderDetails` componente mostrará información incompleta o incorrecta.
## Mejores prácticas de temporización y dependencia de los datos
Usa las siguientes prácticas recomendadas para mitigar los problemas de dependencia de los datos y de temporización en tu aplicación de App Studio:
1. **Usa la representación condicional:** solo renderiza componentes o muestra datos cuando confirmes que están disponibles. Utilice sentencias condicionales para comprobar la presencia de datos antes de mostrarlos. En el siguiente fragmento se muestra un ejemplo de sentencia condicional:
```
{{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
```
1. **Gestione la visibilidad de los componentes secundarios:** en el caso de componentes como Stepflow, Form o Detail que representan los componentes secundarios antes de que se carguen sus datos, configure manualmente la visibilidad de los componentes secundarios. En el siguiente fragmento se muestra un ejemplo de cómo configurar la visibilidad en función de la disponibilidad de los datos del componente principal:
```
{{ui.parentComponent.data ? true : false}}
```
1. **Utilice consultas de unión:** cuando sea posible, utilice consultas de unión para obtener datos relacionados en una sola consulta. Esto reduce el número de recuperaciones de datos independientes y minimiza los problemas de temporización entre los componentes de datos.
1. **Implemente la gestión de errores en las automatizaciones:** Implemente una gestión sólida de los errores en sus automatizaciones para gestionar con fluidez los escenarios en los que los datos esperados no estén disponibles o se reciban respuestas no válidas.
1. **Utilice el encadenamiento opcional:** al acceder a propiedades anidadas, utilice el encadenamiento opcional para evitar errores si una propiedad principal no está definida. En el siguiente fragmento se muestra un ejemplo de encadenamiento opcional:
```
{{ui.component.data?.[0]?.fieldSystemName}}
```
# Creación de una aplicación con varios usuarios
Varios usuarios pueden trabajar en una sola aplicación de App Studio, pero solo un usuario puede editar una aplicación a la vez. Consulta las siguientes secciones para obtener información sobre cómo invitar a otros usuarios a editar una aplicación y cómo se comporta cuando varios usuarios intentan editar una aplicación al mismo tiempo.
## Invita a los creadores a editar una aplicación
Sigue las instrucciones siguientes para invitar a otros creadores a editar una aplicación de App Studio.
**Para invitar a otros creadores a editar una aplicación**
1. Si es necesario, navegue hasta el estudio de aplicaciones de su aplicación.
1. Elija **Compartir**.
1. En la pestaña **Desarrollo**, utilice el cuadro de texto para buscar y seleccionar los grupos o usuarios individuales a los que desee invitar a editar la aplicación.
1. Para cada usuario o grupo, elige el menú desplegable y selecciona los permisos que quieres conceder a ese usuario o grupo.
+ **Copropietario**: los copropietarios tienen los mismos permisos que los propietarios de las aplicaciones.
+ **Solo editar**: los usuarios con la función de **solo editar** tienen los mismos permisos que los propietarios y copropietarios, excepto los siguientes:
+ No pueden invitar a otros usuarios a editar la aplicación.
+ No pueden publicar la aplicación en los entornos de prueba o producción.
+ No pueden añadir fuentes de datos a la aplicación.
+ No pueden eliminar ni duplicar la aplicación.
## Intentando editar una aplicación que está siendo editada por otro usuario
Una sola aplicación de App Studio solo puede editarla un usuario a la vez. Consulta el siguiente ejemplo para entender qué ocurre cuando varios usuarios intentan editar una aplicación al mismo tiempo.
En este ejemplo, `User A` está editando una aplicación y la ha compartido con`User B`. `User B`a continuación, intenta editar la aplicación que está editando`User A`.
Cuando `User B` intente editar la aplicación, aparecerá un cuadro de diálogo informándole de que `User A` está editando la aplicación en ese momento y que, al continuar, `User A` saldrá del estudio de aplicaciones y se guardarán todos los cambios. `User B`puede elegir entre cancelar y dejar `User A` continuar, o continuar e ingresar al estudio de aplicaciones para editar la aplicación. En este ejemplo, eligen editar la aplicación.
Cuando `User B` decide editar la aplicación, `User A` recibe una notificación que indica que `User B` ha empezado a editar la aplicación y que su sesión ha finalizado. Ten en cuenta `User A` que si la aplicación se abre en una pestaña inactiva del navegador, es posible que no reciban la notificación. En este caso, si intentan volver a la aplicación e intentar realizar una edición, recibirán un mensaje de error y se les indicará que deben actualizar la página, lo que les devolverá a la lista de aplicaciones.
# Ver o actualizar la configuración de seguridad del contenido de tu aplicación
Todas las aplicaciones de App Studio tienen una configuración de seguridad de contenido que se puede usar para impedir que se carguen contenido multimedia o recursos externos, como imágenes o iFrames, o solo se permite desde dominios específicos o URLs (incluidos los buckets de Amazon S3). PDFs También puede especificar los dominios en los que la aplicación puede cargar objetos en Amazon S3.
La configuración de seguridad de contenido predeterminada para todas las aplicaciones consiste en bloquear la carga de todo el contenido multimedia procedente de fuentes externas, incluidos los buckets de Amazon S3, y bloquear la carga de objetos en Amazon S3. Por lo tanto, para cargar imágenes, iFrames o contenido multimedia similar, debe editar la configuración para permitir las fuentes del contenido multimedia. PDFs Además, para permitir la carga de objetos en Amazon S3, debe editar la configuración para permitir los dominios en los que se pueden cargar.
**nota**
Los ajustes de seguridad del contenido se utilizan para configurar los encabezados de la Política de seguridad del contenido (CSP) en su aplicación. El CSP es un estándar de seguridad que ayuda a proteger tu aplicación frente a las secuencias de comandos entre sitios (XSS), el robo de clics y otros ataques de inyección de código. Para obtener más información sobre el CSP, consulta la [Política de seguridad del contenido (CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)) en los documentos web de MDN.
**Para actualizar la configuración de seguridad del contenido de tu aplicación**
1. Si es necesario, dirígete al estudio de aplicaciones de tu aplicación y elige editarla en la lista de aplicaciones.
1. Selecciona **la configuración de la aplicación**.
1. Seleccione la pestaña **Configuración de seguridad del contenido** para ver las siguientes configuraciones:
+ **Fuente de marcos**: se usa para administrar los dominios desde los que tu aplicación puede cargar marcos e iframes (como contenido interactivo PDFs). Esta configuración afecta a los siguientes componentes o recursos de la aplicación:
+ Componente incrustado de iFrame
+ Componente de visor de PDF
+ **Fuente de la imagen**: se usa para administrar los dominios desde los que la aplicación puede cargar imágenes. Esta configuración afecta a los siguientes componentes o recursos de la aplicación:
+ Logotipo y banner de la aplicación
+ Componente de visor de imágenes
+ **Connect source**: se usa para administrar los dominios en los que su aplicación puede cargar objetos de Amazon S3.
1. Para cada configuración, elija la configuración que desee en el menú desplegable:
+ **Bloquear todo frames/images/connections**: no permita que se cargue ningún medio (imágenes, marcos PDFs) ni que se cargue ningún objeto en Amazon S3.
+ **Permitir todo frames/images/connections**: permitir que se carguen todos los archivos multimedia (imágenes, marcos PDFs) de todos los dominios o permitir la carga de objetos a Amazon S3 para todos los dominios.
+ **Permitir dominios específicos**: permite cargar contenido multimedia desde dominios específicos o subirlo a ellos. Los dominios o URLs se especifican como una lista de expresiones separadas por espacios, donde se pueden usar caracteres comodín (`*`) para los subdominios, la dirección del host o el número de puerto para indicar que todos los valores legales de cada uno son válidos. La especificación también coincide. `http` `https` La siguiente lista contiene ejemplos de entradas válidas:
+ `blob:`: Coincide con todos los blobs, lo que incluye los datos de archivos devueltos por las acciones de automatización, como la `GetObject` devolución de artículos de depósitos de Amazon S3 o las imágenes generadas por Amazon Bedrock.
**importante**
Debe incluirlo en `blob:` la expresión proporcionada para permitir que las acciones devuelvan los datos del archivo. Incluso si su expresión lo es`*`, debe actualizarla a `* blob:`
+ `http://*.example.com`: Coincide con todos los intentos de carga desde cualquier subdominio de`example.com`. También coincide con los `https` recursos.
+ `https://source1.example.com https//source2.example.com`: Coincide con todos los intentos de carga desde ambos `https://source1.example.com` `https://source2.example.com`
+ `https://example.com/subdirectory/`: Coincide con todos los intentos de cargar archivos en el directorio del subdirectorio. Por ejemplo, `https://example.com/subdirectory/path/to/file.jpeg`. No coincide`https://example.com/path/to/file.jpeg`.
1. Elija **Guardar** para guardar los cambios.