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. # 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.