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