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

Este tema detalla cada uno de los componentes de App Studio y sus propiedades, e incluye ejemplos de configuración.

Propiedades de los componentes más comunes

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 y los casos de uso específicos para cada tipo de propiedad pueden variar según el componente, pero el concepto general de estas propiedades sigue siendo el mismo en 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 incluir 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 valueSecondary value, o simplementeValue, según el tipo de componente y la finalidad.

El Primary value campo se usa normalmente para definir el valor principal, el punto de datos o el contenido que debe mostrarse de forma destacada dentro del componente.

El Secondary value campo, cuando está disponible, se usa para mostrar un valor o información adicional o de apoyo junto con el valor principal.

El Value campo 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. Mediante el uso de expresiones, puede hacer referencia a los datos de otros componentes, fuentes de datos o variables de la aplicación, lo que permite mostrar contenido dinámico y basado en datos.

Sintaxis de las expresiones

La sintaxis para introducir expresiones en estos campos sigue un patrón uniforme:

{{expression}}

¿Dónde expression está una expresión válida que da como resultado el valor o los datos deseados que desea mostrar?

Ejemplo: texto estático

Ejemplos: expresiones

Al usar estos campos de expresión, puede crear contenido dinámico y basado en datos dentro de su aplicación, lo que le permite mostrar información que se adapta 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 permite especificar una leyenda o un título para el componente. Esta etiqueta suele mostrarse junto al componente o encima del mismo, lo que ayuda a los usuarios a entender su finalidad.

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 parezca más personalizada para 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 al 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 el texto de sugerencia o guía que se muestra 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 usar 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 Marcador de posición, el componente se mostrará Enter your name como texto del marcador de posición.

Ejemplo: Expresiones

Ejemplo: servicios financieros

Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} accountEstos ejemplos extraen datos de la cuenta seleccionada para mostrar las indicaciones pertinentes, lo que hace que la interfaz sea intuitiva para los clientes bancarios.

Ejemplo: E-commerce

Enter the coupon code for {{ui.cartTable.data.currency}} totalAquí, el marcador de posición se actualiza dinámicamente en función del contenido del carrito del usuario, lo que proporciona una experiencia de pago perfecta.

Ejemplo: clínica sanitaria

Enter your {{ui.patientProfile.data.age}}-year-old patient's symptomsAl usar una expresión que haga 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 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, oautomation.

Entidad

Al seleccionar Entidad como fuente de datos, puede conectar el componente a una entidad de datos o modelo existente en su aplicación. Esto resulta útil cuando tiene una estructura o un esquema de datos bien definidos que desea aprovechar en toda la aplicación.

Cuándo usar la fuente de datos de la entidad:

Seleccionar una consulta sobre una entidad

En ocasiones, es posible que desee conectar un componente a una consulta específica que recupere datos de una entidad, en lugar de toda la entidad. 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:

Por ejemplo, si tiene una Customers entidad en su aplicación con campos como NameEmail, yPhoneNumber. Puedes 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 mostrar toda la base de datos de clientes.

Agregar parámetros a la fuente de datos de una entidad

Al usar una entidad como fuente de datos, también puede agregar 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 DescriptionPrice, yCategory. Puede añadir un parámetro denominado category a un componente de la tabla que muestre la lista de productos. Cuando los usuarios seleccionen 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, mediante 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 para el 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 Expression:

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 un flujo de trabajo existente en su 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:

Por ejemplo, si tienes un componente de flujo gradual que guía a los usuarios durante el proceso de solicitud de empleo. El componente stepflow se puede conectar a una automatización que gestiona el envío de la solicitud 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 de forma dinámica 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 la aplicación cuente con los datos y la lógica correctos, lo que proporcionará una experiencia fluida y atractiva para los usuarios.

Visible si

Utilice la propiedad Visible si para mostrar u ocultar componentes o elementos en función de condiciones o valores de datos específicos. Esto resulta útil cuando desea 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 está una expresión booleana que se evalúa como o? true false

Si la expresión se evalúa comotrue, el componente estará visible. Si la expresión se evalúa comofalse, 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 hay ejemplos de expresiones

Ejemplo: mostrar u ocultar un campo de entrada de contraseña en función de una entrada de correo electrónico

Imagina que tienes 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 entrada de la contraseña solo si el usuario ha introducido una dirección de correo electrónico. Puede utilizar 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 evalúa como y el campo de entrada de la contraseña estará visible. true Si el campo de correo electrónico está vacío, la expresión se evalúa como y el campo de entrada 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ás 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 usar 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 usar esta expresión para mostrar un conjunto diferente de campos adicionales:

{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}

Ejemplos: Otros

Para hacer visible el componente 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 habilitar o deshabilitar condicionalmente un componente en función de condiciones o valores de datos específicos. Esto se logra mediante la propiedad Disabled if, que acepta una expresión booleana que determina si el componente debe habilitarse o deshabilitarse.

La propiedad Disabled if usa la siguiente sintaxis:

{{expression ? true : false}}

o

{{expression}}

Ejemplos de expresiones deshabilitadas

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 usar la siguiente expresión: Si está deshabilitado:

{{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 y el botón de envío se deshabilitará. true Una vez rellenados todos los campos obligatorios, la expresión se evalúa como igual a false y se habilita el botón de envío.

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 del diseño determinan cómo se organizan y posicionan el contenido o los elementos de un componente. Hay varias opciones de diseño disponibles, cada una representada por un icono:

Orientation (Orientación)

Alineación

Ancho

La propiedad Width especifica el tamaño horizontal del componente. Puede introducir un valor porcentual entre el 0% y el 100%, que represente el ancho del componente en relación con su contenedor principal o el espacio disponible.

Alto

La propiedad Height especifica el tamaño vertical del componente. El valor «automático» ajusta la altura del componente automáticamente en función de su contenido o del espacio disponible.

Espacio entre

La propiedad Espacio entre determina el espaciado o el espacio entre el contenido o los elementos del componente. Puede seleccionar un valor de 0 píxeles (sin espaciado) a 64 píxeles, con incrementos de 4 píxeles (por ejemplo, 4 píxeles, 8 píxeles, 12 píxeles, etc.).

Rellenado

La propiedad Padding controla el espacio entre el contenido o los elementos y los bordes del componente. Puede seleccionar un valor de 0 píxeles (sin relleno) a 64 píxeles, con incrementos de 4 píxeles (por ejemplo, 4 píxeles, 8 píxeles, 12 píxeles, etc.).

Introducción

El fondo activa o desactiva un color o estilo de fondo para el componente.

Estas propiedades de diseño proporcionan flexibilidad para organizar y colocar el contenido dentro de un componente, así como para 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 Table, Detail, Metric , Form y Repeater. 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 forma organizada y fácil de leer.

Propiedades de la tabla

El componente Tabla comparte varias propiedades comunes con otros componentes, como NameSource, yActions. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Además de las propiedades comunes, el componente Tabla tiene propiedades y opciones de configuración específicas, como ColumnsSearch and export, yExpressions.

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:

Buscar y exportar

El componente Tabla proporciona los siguientes botones para activar o desactivar la función de búsqueda y exportación:

Filas por página

Puede especificar el número de filas que se mostrarán por página en la tabla. A continuación, los usuarios pueden navegar entre las páginas para ver el conjunto de datos completo.

Pre-fetch límite

Especifique el número máximo de registros que desea obtener previamente en cada solicitud de consulta. El máximo es 3000.

Acciones

En la sección Acciones, configure las siguientes propiedades:

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 y la 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 a nivel de fila y hacer referencia a datos de tablas de otros componentes o expresiones de la 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 desea hacer referencia.

Ejemplos:

Ejemplos: hacer referencia a la fila seleccionada

{{ui.table1.selectedRow["columnName"]}}Esta expresión permite hacer referencia al valor de una columna específica para la fila actualmente seleccionada de la tabla con el identificadortable1. table1Sustitúyalo por el identificador real del componente de la tabla y columnName por el nombre de la columna a la que desea hacer referencia.

Ejemplos:

Ejemplos: creación de columnas personalizadas

Puede agregar columnas personalizadas a una tabla en función de los datos devueltos por la acción, la automatización o la expresión de datos subyacentes. Puede usar los valores y JavaScript expresiones de columna existentes para crear columnas nuevas.

Ejemplos:

Ejemplos: personalizar 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 transformaciones o formatos personalizados a los datos mostrados.

Ejemplos:

Row-level acciones de los botones

{{currentRow.columnName}}o {{currentRow["Column Name"]}} puedes usar estas expresiones para pasar el contexto de la fila a la que se hace referencia a 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:

Al aprovechar estos campos de expresión y las capacidades de acción a nivel de fila, puede crear tablas altamente personalizadas e interactivas que muestren y manipulen 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 perfectos.

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 detalladas

El componente Detail comparte varias propiedades comunes con otros componentesName, comoSource, yActions. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

El componente Detail también tiene propiedades y opciones de configuración específicasFields, comoLayout, yExpressions.

Diseño

La sección Diseño le permite personalizar la disposición y la presentación de los campos dentro del componente Detalle. Puede configurar opciones como:

Expresiones y ejemplos

El componente Detail 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 detallados personalizados e interactivos que se conectan sin problemas con los datos y la lógica de su aplicación.

Ejemplo: hacer referencia a datos

{{ui.details.data[0]?.["colName"]}}: Esta expresión 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 desea hacer referencia. Por ejemplo, la siguiente expresión mostrará el valor de la columna «Nombre del cliente» del primer elemento de la matriz de datos conectado al componente «detalles»:

{{ui.details.data[0]?.["customerName"]}}

Ejemplo: renderizado condicional

{{ui.table1.selectedRow["colName"]}}: Esta expresión devuelve el valor verdadero si la fila seleccionada de la tabla con el identificador table1 contiene datos para la columna denominadacolName. Se puede usar 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 usar esta expresión en la Visible if propiedad del componente Detail para mostrarlo u ocultarlo 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 del table1 componente tiene un valor para la customerName columna), el componente Detail estará visible. Si la expresión se evalúa como falsa (es decir, la fila seleccionada está vacía o no tiene el valor «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 de forma condicional un emoji en función del valor de un componente o campo de datos.

Desglose:

Esta expresión se puede usar para mostrar un emoji o un valor específico en función del valor de un componente o campo de datos dentro del componente de detalle.

Métricas

El componente de métricas es un elemento visual que muestra las métricas o los puntos de datos clave en un formato similar a una tarjeta. Está diseñado para ofrecer 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 componentesName, comoSource, yActions. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Tendencia

La función de tendencias de las métricas le permite mostrar un indicador visual del rendimiento o los cambios a lo largo del tiempo de la métrica que se muestra.

Valor de tendencia

Este campo permite especificar el valor o la expresión que se debe utilizar para determinar la dirección y la magnitud de la tendencia. Por lo general, 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 ingresos mes a mes del primer elemento de los datos conectado a las métricas de «SalesMetrics».

Tendencia positiva

Este campo permite introducir una expresión que defina la condición de una tendencia positiva. La expresión debe evaluarse como verdadera o falsa.

Ejemplo:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}

Esta expresión comprueba si el valor de los ingresos de un mes a otro es superior a 0, lo que indica una tendencia positiva.

Tendencia negativa

Este campo permite introducir una expresión que defina la condición de una tendencia negativa. La expresión debe evaluarse como verdadera o falsa.

Ejemplo:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}

Esta expresión comprueba si el valor de los ingresos de un mes a otro 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

Ejemplo: tendencia de métricas de inventario

Ejemplo: tendencia de satisfacción del cliente

Al configurar estas propiedades relacionadas con las tendencias, puede crear componentes de métricas que proporcionen una representación visual del rendimiento o de los cambios 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 métricas

En el panel de propiedades, puede introducir expresiones para mostrar el título, el valor principal, el valor secundario y la leyenda del valor para mostrar un valor de forma dinámica.

Ejemplo: hacer referencia a un valor principal

{{ui.metric1.primaryValue}}: Esta expresión 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 de salesMetrics métricas.

Ejemplo: hacer referencia a un valor secundario

{{ui.metric1.secondaryValue}}: Esta expresión permite hacer referencia al valor secundario del componente de métricas con el ID metric1 de otros componentes o expresiones de la misma página.

Ejemplo: {{ui.revenueMetrics.secondaryValue}} mostrará el valor secundario del componente de revenueMetrics métricas.

Ejemplo: hacer referencia a datos

{{ui.metric1.data}}: Esta expresión 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 de kpiMetrics métricas.

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 IDmetric1. Resulta útil cuando se desea mostrar una propiedad específica del primer elemento de los datos.

Desglose:

Ejemplo: {{ui.orderMetrics.data?.[0]?.orderId}} mostrará el orderId valor del primer elemento de los datos conectados al componente orderMetrics Metrics.

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 de métricas con el IDmetric1. Resulta útil cuando se desea mostrar el número de elementos de los datos.

Desglose:

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 una colección 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 repetidos dentro de la interfaz de usuario de la aplicación. Algunos ejemplos de casos de uso incluyen:

El componente Repeater se diferencia del componente Table con contenido enriquecido. Un componente de tabla tiene un formato estricto de fila y columna. El repetidor puede mostrar sus datos de forma más flexible.

Propiedades del repetidor

El componente repetidor comparte varias propiedades comunes con otros componentes, como NameSource, y. Actions Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Además de las propiedades comunes, el componente Repetidor tiene las siguientes propiedades y opciones de configuración adicionales.

Plantilla de artículos

La plantilla de artículos 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 elementos, puede hacer referencia a las propiedades o valores del elemento actual mediante expresiones en el 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 del elemento actual.

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)

Filas por página

Especifique el número de filas que se mostrarán por página en el diseño de lista. La paginación se proporciona para los elementos que superan el número de filas especificado.

Columnas y filas por página (cuadrícula)

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

Ejemplo: renderizar una lista de productos

Ejemplo: generar una cuadrícula de avatares de usuario

Al usar 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 repetir manualmente o programar.

Formulario

El componente de formulario está diseñado para capturar las entradas del usuario 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 del 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 de formulario comparte varias propiedades comunes con otros componentesName, comoSource, yActions. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Generar formulario

La función Generar formulario facilita la creación rápida de campos de formulario rellenándolos automáticamente en función de una fuente de datos seleccionada. Esto puede ahorrar tiempo y esfuerzo al crear formularios que necesitan mostrar una gran cantidad de campos.

La función Generar formulario es particularmente útil cuando tienes un modelo de datos bien definido o un conjunto de entidades en tu aplicación para las que necesitas 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 aplicación.

Después de usar la función Generar formularios, puede personalizar aún más el diseño, las acciones y las expresiones del componente de formulario para que se ajusten a sus requisitos específicos.

Expresiones y ejemplos

Al igual que otros componentes, puede usar expresiones para hacer referencia a los datos del componente Formulario y mostrarlos en ellos. Por ejemplo:

Al configurar estas propiedades y aprovechar las expresiones, puede crear componentes de formulario personalizados e interactivos que se integren perfectamente con la lógica y las fuentes de datos de su aplicación. Estos componentes se pueden usar para capturar las entradas de los usuarios, mostrar datos rellenados previamente y activar acciones en función del envío del formulario 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 la 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, comoName, ySource. Actions Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

El componente Stepflow tiene propiedades y opciones de configuración adicionales, como Step NavigationValidation, yExpressions.

Componentes de IA

Generación de IA

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 inteligencia artificial mediante el chat en el estudio de aplicaciones. Cuando utilices el chat para crear componentes, se agruparán en un contenedor de Gen AI. Para obtener información sobre la edición o el uso de este componente, consulteCómo crear o editar tu aplicación.

Componentes de & números 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 del usuario, como nombres, direcciones o cualquier otra información textual.

Texto

El componente de texto se usa 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 multilínea de los usuarios. Proporciona un área de campo de entrada más grande para que los usuarios escriban entradas de texto más largas, como descripciones, notas o comentarios.

Correo electrónico

El componente de 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 introducido se adhiera al formato de correo electrónico correcto.

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.

Search

El componente de búsqueda proporciona a los usuarios un campo de entrada dedicado para realizar consultas de búsqueda o introducir términos de búsqueda en los datos rellenados en la aplicación.

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 se ajuste al formato de número de teléfono correcto.

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.

Currency (Divisa)

El componente Moneda es un campo de entrada especializado para capturar valores o importes monetarios. Puede incluir opciones de formato para mostrar los símbolos monetarios y los separadores decimales y aplicar reglas de validación específicas para las entradas de divisas.

Par detallado

El componente de pares de detalles se usa para mostrar los pares clave-valor o los pares de información relacionada en un formato estructurado y legible. Por lo general, se usa 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, como on/off true/false, o enabled/disabled. Proporciona una representación visual del estado actual y permite a los usuarios cambiarlo con un solo clic o toque.

Cambiar de grupo

El componente de grupo Switch 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 entender las opciones disponibles e interactuar con ellas.

Cambie los campos de expresión de grupo

Grupo de casillas de verificación

El componente de 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 desea ofrecer a los usuarios la posibilidad de elegir uno o más elementos de una lista de opciones.

Casilla de verificación: campos de expresión grupal

Grupo de radio

El componente del grupo Radio es un conjunto de botones de opción 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 hacer una selección.

Campos de expresión de grupos de radio

Los siguientes campos se pueden usar en las expresiones.

Selección única

El componente de selección única presenta a los usuarios una lista de opciones entre las que pueden seleccionar un solo elemento. Se suele utilizar en situaciones en las que los usuarios deben 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

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 hacer varias selecciones de un conjunto predefinido de opciones, como seleccionar varias etiquetas, intereses o preferencias.

Campos de expresión de selección múltiple

Botones, 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 los botones

Los componentes de los botones disponibles son:

Estos componentes de botón comparten las siguientes propiedades comunes:

Contenidos

Tipo

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:

Desencadenadores

Al hacer clic en el botón, puede configurar una o más acciones para que se activen. Los tipos de acción disponibles son:

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: Ejecuta 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.

Al usar 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.

Hiperenlace

El componente Hipervínculo proporciona un enlace en el que se puede hacer clic para navegar a direcciones URL externas o rutas de aplicaciones internas.

Propiedades de hipervínculo

Contenidos

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 acción 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 Fecha comparte varias propiedades comunes con otros componentes, como NameSource, yValidation. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Además de las propiedades comunes, el componente Date tiene las siguientes propiedades específicas:

Propiedades de fecha

Formato

Valor

Fecha mínima

Fecha máxima

Tipo de calendario

Fechas deshabilitadas

Comportamiento

Validación

La sección de validación permite definir reglas y restricciones adicionales para la entrada de fecha. 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 agregar los siguientes tipos de validaciones:

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:

Time

El componente Hora permite a los usuarios seleccionar e introducir valores de hora. Al configurar las distintas propiedades del componente de tiempo, puede crear campos de entrada de tiempo que cumplan los requisitos específicos de su aplicación, como restringir el intervalo de tiempo seleccionable, deshabilitar determinados horarios y controlar la visibilidad e interactividad del componente.

Propiedades de tiempo

El componente Tiempo comparte varias propiedades en común con otros componentesName, comoSource, yValidation. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Además de las propiedades comunes, el componente Time tiene las siguientes propiedades específicas:

Intervalos de tiempo

Valor

Placeholder

Tiempo mínimo

Tiempo máximo

Horarios desactivados

Configuración de tiempos deshabilitada

Puede usar la sección Horarios deshabilitados para especificar qué valores de tiempo no deberían estar disponibles para su selección.

origen

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 de tiempo introducidos por los usuarios cumplen los requisitos específicos de su aplicación.

Comportamiento

Validación

Por ejemplo:

{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}

Esta expresión comprueba si la hora introducida es a las 9:00 o a las 9:30 a. m. Si la condición es verdadera, la validación fallará.

También puedes 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:

Ejemplo: valor de tiempo

Ejemplo: comparación de tiempos

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 de 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 ciertas fechas y controlar la visibilidad e interactividad del componente.

Propiedades del rango de fechas

El componente Intervalo de fechas comparte varias propiedades comunes con otros componentesName, comoSource, yValidation. Para obtener más información sobre estas propiedades, consultePropiedades de los componentes más comunes.

Además de las propiedades comunes, el componente Date Range tiene las siguientes propiedades específicas:

Formato

Fecha de inicio

Fecha de finalización

Placeholder

Fecha mínima

Fecha máxima

Tipo de calendario

Se seleccionaron los días obligatorios

Fechas desactivadas

Validación

La sección de validación permite definir reglas y restricciones adicionales para la entrada del intervalo de fechas.

Expresiones y ejemplos

El componente Rango de fechas proporciona los siguientes campos de expresión:

Ejemplo: calcular la diferencia de fechas

Ejemplo: visibilidad condicional basada en el intervalo de fechas

Ejemplo: fechas inhabilitadas en función de los datos de la fila actual

Validación personalizada

Componentes multimedia

El estudio de aplicaciones proporciona varios componentes para incrustar y mostrar varios tipos de medios en su aplicación.

Incrustar iFrame

El componente de incrustación de iFrame le permite incrustar aplicaciones o contenido web externos en su aplicación mediante un iFrame.

Propiedades de incrustación de iFrame

URL

La URL del contenido o la aplicación externos que desea incrustar.

Diseño

Subida a S3

El componente de carga de S3 permite a los usuarios subir archivos a un bucket de Amazon S3. Al configurar el componente de carga de S3, puede permitir a los usuarios subir archivos fácilmente al almacenamiento de Amazon S3 de su aplicación y, a continuación, aprovechar la información de los archivos cargados dentro de la lógica y la interfaz de usuario de la aplicación.

Propiedades de carga de S3

Configuración de S3

Configuración de carga de archivos

Validación

Desencadenadores

Campos de expresión de carga de S3

El componente de carga de S3 proporciona los siguientes campos de expresión:

Expresiones y ejemplos

Ejemplo: acceder a los archivos cargados

Ejemplo: validar la subida de archivos

Ejemplo: activar acciones

Estas expresiones permiten acceder a los archivos cargados, validar las subidas de los archivos y activar acciones en función de los resultados de la carga de los archivos. Al utilizar estas expresiones, puede crear un comportamiento más dinámico e inteligente dentro de la funcionalidad de carga de archivos de su aplicación.

Componente de visualización de PDF

El componente de visualización de PDF permite a los usuarios ver los documentos PDF e interactuar con ellos dentro de la aplicación. App Studio admite estos diferentes tipos de entrada para el PDF Source. 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, una URI de datos en línea o contenido generado dinámicamente.

Propiedades del visor de PDF

origen

La fuente 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 del 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 dirija 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 PDF) en línea en la aplicación. El documento PDF está codificado como una cadena en base 64 y se incluye directamente en la configuración del componente.

Blob o ArrayBuffer

También puedes proporcionar el documento PDF como un blob u ArrayBuffer objeto, lo que te permite generar o recuperar dinámicamente los datos PDF de varias fuentes dentro de tu aplicación.

Automatización

Conecte el componente del visor de PDF a una automatización que proporcione el documento PDF.

Acciones

Diseño

Visor de imágenes

El componente visor de imágenes permite a los usuarios ver los archivos de imágenes de la aplicación e interactuar con ellos.

Propiedades del visor de imágenes

origen

Texto alternativo

La descripción de texto alternativo de la imagen, que se utiliza por motivos de accesibilidad.

Diseño