¿Qué es?

S3 File Upload es un componente de tipo Form. Permite subir archivos directamente a un bucket de Amazon S3, mediante un DataSource S3 configurado en la aplicación. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Upload File”, con zona de arrastre y límite de tamaño).

Propiedades

Al seleccionar el componente en el lienzo, el panel derecho muestra “Properties of S3Upload”, organizado en tres pestañas: Content, Style y Behavior.

• Component ID: identificador único del componente, autogenerado (ej. s3u_9ec80422).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

• Label: título que se muestra sobre la zona de carga (ej. “Upload File”).
• Button Label: texto del enlace/botón para subir el archivo (ej. “Click to upload”).

Pestaña Style:

• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Accepted Types: campo para definir qué tipos de archivo se aceptan (vacío por defecto, lo que permite cualquier tipo).
• Allow Multiple: casilla que permite subir más de un archivo a la vez.
• Disabled: casilla que deshabilita el componente.
• Max Size (MB): tamaño máximo permitido por archivo, en megabytes (valor por defecto: 10).
• DataSource S3: menú desplegable para seleccionar un DataSource S3 ya configurado, que define a qué bucket de Amazon S3 se suben los archivos.
• Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Diferencias con Saturn Studio Upload

Ambos componentes son muy similares en estructura, pero se diferencian en:

• S3 File Upload tiene la opción Allow Multiple (subir varios archivos a la vez), que Saturn Studio Upload no tiene.
• S3 File Upload se conecta a un bucket de Amazon S3 mediante DataSource S3, mientras que Saturn Studio Upload se conecta a un proceso/robot mediante DataSource Saturn.

¿Qué es?

Saturn Studio Upload es un componente de tipo Form. Permite subir archivos que se procesan mediante un DataSource Saturn configurado en la aplicación, vinculado a un proceso/robot de Saturn Studio (la herramienta de automatización de Rocketbot). Al arrastrarlo al lienzo viene con un ejemplo precargado (“Upload to Saturn”, con zona de arrastre y límite de tamaño).

Propiedades

Al seleccionar el componente en el lienzo, el panel derecho muestra “Properties of SaturnUpload”, organizado en tres pestañas: Content, Style y Behavior.

• Component ID: identificador único del componente, autogenerado (ej. sat_f6cd29e0).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

• Label: título que se muestra sobre la zona de carga (ej. “Upload to Saturn”).
• Button Label: texto del enlace/botón para subir el archivo (ej. “Click to upload”).

Pestaña Style:

• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Accepted Types: campo para definir qué tipos de archivo se aceptan (vacío por defecto, lo que permite cualquier tipo).
• Disabled: casilla que deshabilita el componente.
• Max Size (MB): tamaño máximo permitido por archivo, en megabytes (valor por defecto: 50).
• DataSource Saturn: menú desplegable para seleccionar un DataSource ya configurado que conecta con Saturn Studio. Este DataSource se define/configura en otra parte de la aplicación (no dentro del componente), y es lo que determina a qué robot/proceso de Saturn Studio se envía el archivo subido.
• Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

¿Qué es?

Date Range es un componente de tipo Form. Permite seleccionar un rango de fechas (fecha de inicio y fecha de fin) mediante dos selectores de calendario. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Date Range”, ambos campos vacíos).

Propiedades

Al seleccionar Date Range en el lienzo, el panel derecho muestra “Properties of DateRange” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. dtr_a1f79cb2).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Label: etiqueta que se muestra encima del componente (ej. “Date Range”).
• Start Date (YYYY-MM-DD): valor por defecto para la fecha de inicio, en formato Año-Mes-Día.
• End Date (YYYY-MM-DD): valor por defecto para la fecha de fin, en el mismo formato.
• Min Date: fecha mínima seleccionable (límite inferior del rango permitido).
• Max Date: fecha máxima seleccionable (límite superior del rango permitido).
• Required: casilla que marca el campo como obligatorio.
• Disabled: casilla que deshabilita el componente (queda inactivo, no editable).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Con Start Date y End Date se puede precargar un rango de fechas por defecto (formato YYYY-MM-DD, por ejemplo 2026-01-01). Con Min Date y Max Date se restringe el rango de fechas que el usuario puede elegir — por ejemplo, para no permitir seleccionar fechas futuras o anteriores a cierto límite. Es útil para filtrar datos por período, en combinación con componentes de tipo Data (como Table o Chart) mediante queries.

¿Qué es?

Select es un componente de tipo Form. Es un menú desplegable de selección de opciones. Al arrastrarlo al lienzo viene con dos opciones de ejemplo precargadas (Option 1, Option 2).

Propiedades

Al seleccionar Select en el lienzo, el panel derecho muestra “Properties of Select” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. sel_70a2426e).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Label: etiqueta que se muestra encima del campo (ej. “Select Field”).
• Placeholder: texto que aparece como opción inicial antes de elegir algo (ej. “Select an option”).
• Default Value: opción seleccionada por defecto al cargar la pantalla.
• Options (JSON): campo de código donde se definen las opciones del desplegable en formato JSON. Cada opción se compone de:
  • label: texto visible de la opción.
  • value: valor interno asociado a esa opción.

  El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

• Required: casilla que marca el campo como obligatorio.
• Disabled: casilla que deshabilita el campo (queda inactivo, no seleccionable).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos (por ejemplo, disparar una acción al cambiar la opción seleccionada, con trigger On Change). Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para agregar una nueva opción, hay que ubicarse en la última llave } del bloque anterior dentro de Options (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[
  {
    "label": "Option 2",
    "value": "option-2"
  },
  {
    "label": "Option 3",
    "value": "option-3"
  }
]  

⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.

El valor seleccionado por el usuario (value de la opción elegida) puede referenciarse luego desde otras partes de la app (queries, acciones) usando el Component ID del Select.

¿Qué es?

Input es un componente de tipo Form. Es un campo de entrada de texto para captura de datos del usuario, con distintos tipos de validación según el dato que se espera recibir. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Input Field” con placeholder “Enter text…”).

Propiedades

Al seleccionar Input en el lienzo, el panel derecho muestra “Properties of Input” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. inp_5adbe984).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Label: etiqueta que se muestra encima del campo (ej. “Input Field”).
• Placeholder: texto de guía que aparece dentro del campo vacío (ej. “Enter text…”).
• Default Value: valor que trae el campo cargado por defecto.
• Type: menú desplegable que define el tipo de dato que acepta el campo, cambiando su validación y/o teclado. Opciones: Text, Email, Password, Number, Date.
• Required: casilla que marca el campo como obligatorio. Al activarla, se agrega un asterisco rojo (*) junto al Label, tanto en el editor como en el modo Preview, indicando visualmente que el campo es requerido.
• Disabled: casilla que deshabilita el campo (queda inactivo, no editable).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.

Ejemplo de uso

Con Type se adapta el campo al dato que se necesita capturar: por ejemplo, Email valida que el texto tenga formato de correo, Password oculta los caracteres ingresados, Number solo acepta valores numéricos, y Date muestra un selector de fecha. Activando Required, el campo pasa a ser obligatorio (probablemente impidiendo enviar un formulario si queda vacío). El valor ingresado por el usuario puede referenciarse luego desde otras partes de la app (queries, acciones) usando el Component ID del Input.

¿Qué es?

Button es un componente de tipo Form. Es un botón de acción con distintas variantes de estilo, pensado para disparar acciones (navegar, ejecutar queries, mostrar/ocultar componentes, etc.) mediante Events & Actions. Al arrastrarlo al lienzo viene con un texto de ejemplo precargado (“Click me”).

Propiedades

Al seleccionar Button en el lienzo, el panel derecho muestra “Properties of Button” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. btn_8b8e9fd9).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Label: texto que se muestra dentro del botón (ej. “Click me”).
• Variant: menú desplegable que define el color/estilo del botón. Opciones: Success, Info, Danger.
• Size: menú desplegable que define el tamaño del botón. Opciones: Small, Medium, Large.
• Disabled: casilla que deshabilita el botón (queda inactivo, sin poder hacer clic).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos (qué hace el botón al hacer clic). Ver documentación aparte: Nexus – Events & Actions.

Ejemplo de uso

El uso típico de Button es combinarlo con Events & Actions, configurando un trigger On Click junto a la acción deseada (por ejemplo, Navigate para llevar a otra pantalla, o Execute Query para disparar una consulta de datos). Con Variant se puede dar significado visual a la acción: por ejemplo, Success para una acción de confirmación, o Danger para una acción destructiva como eliminar algo. Activando Disabled, el botón queda inhabilitado — útil para bloquearlo hasta que se cumpla alguna condición (por ejemplo, hasta que un formulario esté completo).

¿Qué es?

QR / Barcode es un componente de tipo Display. Genera códigos QR o códigos de barras a partir de un valor de texto, con distintos formatos de codificación. Al arrastrarlo al lienzo viene con un QR de ejemplo precargado, apuntando a una URL.

Propiedades

Al seleccionar el componente en el lienzo, el panel derecho muestra “Properties of CodeGenerator” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. cdg_cfef03b2).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Value: el texto o dato que se va a codificar (ej. una URL, un número, un código).
• Mode: menú desplegable que define si el componente genera un QR o un Barcode (código de barras lineal).
• Behavior → Barcode Format (solo visible en modo Barcode): define el estándar de codificación del código de barras. Opciones: CODE128, CODE39, EAN13, EAN8, UPC, ITF14, MSI, Pharmacode.
• Show Barcode Value: casilla que muestra el valor en texto debajo del código de barras.
• Style → Width (px) / Height (px): dimensiones del código generado (valor por defecto: 180×180).
• Style → Margin: margen alrededor del código.
• Style → Barcode Line Color: color de las líneas/módulos del código.
• Style → Barcode Background: color de fondo del código.
• Style → Alignment: alineación del componente. Opciones: Left, Center, Right.
• Style → Custom Class: clase CSS personalizada.
• Style → Custom Style: CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso — formatos de Barcode

Cada formato de código de barras tiene reglas propias sobre qué valores acepta (algunos piden solo números, otros una cantidad exacta de dígitos). Se probó cada formato con un valor de ejemplo y funcionaron correctamente:

Para probar cualquier formato: cambiar Mode a Barcode, elegir el formato deseado en Barcode Format, y pegar en Value un dato acorde a ese estándar (por ejemplo, para EAN13 debe ser un número de 13 dígitos, para UPC de 12 dígitos, y para Pharmacode simplemente un número simple sin formato especial).

¿Qué es?

PDF Viewer es un componente de tipo Display. Muestra un visor embebido de archivos PDF, con navegación entre páginas. Al arrastrarlo al lienzo viene con un PDF de ejemplo precargado (documento de 14 páginas).

Propiedades

Al seleccionar PDF Viewer en el lienzo, el panel derecho muestra “Properties of PDFViewer” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. pdf_115c8c3d).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• PDF URL: campo donde se coloca la URL del archivo PDF a mostrar.
• Initial Page: número de página con la que se abre el documento por defecto (ej. 1).
• Scale (0.5 – 3): nivel de zoom/escala con el que se muestra el PDF, en un rango de 0.5 a 3 (valor por defecto: 1).
• Behavior → Show Toolbar: casilla que muestra u oculta la barra de herramientas del visor (indicador de página, botones Prev/Next).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para mostrar un PDF propio, se reemplaza PDF URL por la dirección del archivo (debe ser una URL pública accesible, terminada en .pdf). Con Initial Page se puede hacer que el documento se abra directamente en una página específica en vez de la primera, y con Scale se ajusta el zoom inicial del documento.

¿Qué es?

Progress Bar es un componente de tipo Display. Muestra una barra de progreso con porcentaje, útil para representar el avance de un proceso. Al arrastrarlo al lienzo viene con un valor de ejemplo precargado (60 de 100).

Propiedades

Al seleccionar Progress Bar en el lienzo, el panel derecho muestra “Properties of ProgressBar” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. prg_b9ce0397).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Value: valor actual de la barra (ej. 60).
• Max: valor máximo que representa el 100% de la barra (ej. 100).
• Label: texto opcional para acompañar la barra (vacío por defecto).
• Show Value: casilla que muestra u oculta el porcentaje/valor numérico sobre la barra.
• Variant: menú desplegable que define el color de la barra. Opciones: Primary, Success, Warning, Danger, Info.
• Size: menú desplegable que define el grosor de la barra. Opciones: Small, Medium, Large.
• Animated: casilla que hace que la barra se rellene con una animación progresiva hasta llegar al valor definido en Value, en vez de mostrarse directamente ya completa.
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

El progreso se controla ajustando Value en relación a Max (por ejemplo, Value: 60 y Max: 100 representa un 60%). Con Variant se puede dar significado visual al progreso — por ejemplo, usar Success cuando el proceso llega al 100%, o Danger si representa un límite excedido. Activando Animated, la barra se llena de forma progresiva (efecto de carga) hasta alcanzar el valor definido, en lugar de mostrarse ya completa desde el inicio.

¿Qué es?

Spinner es un componente de tipo Display. Muestra un indicador de carga animado, útil para representar visualmente que un proceso está en curso. Al arrastrarlo al lienzo viene con un texto de ejemplo precargado (“Loading…”).

Propiedades

Al seleccionar Spinner en el lienzo, el panel derecho muestra “Properties of Spinner” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. spn_8580de85).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Show: casilla que controla si el spinner se muestra o no.
• Label: texto que acompaña a la animación de carga (ej. “Loading…”).
• Size: menú desplegable que define el tamaño de la animación. Opciones: Small, Medium, Large.
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

El Spinner suele usarse en combinación con Events & Actions para mostrarse mientras se ejecuta un proceso (por ejemplo, mientras se espera la respuesta de una API o query) y ocultarse una vez que ese proceso termina, usando acciones de tipo Show Components / Hide Components sobre otros componentes. Con Label se puede personalizar el texto que acompaña la animación (ej. “Cargando datos…”, “Procesando…”).