Nexus – Events & Actions

¿Qué es?

Events & Actions es el sistema de Nexus para definir comportamientos interactivos en los componentes. Se encuentra en la pestaña Behavior de cada componente, mediante el botón + Add Action. Al agregarla, se abre un panel “New Action” donde se configura un disparador (Trigger) y una acción a ejecutar (Action Type). Según el Action Type elegido, el panel muestra dinámicamente los campos correspondientes a esa acción.

Trigger

Menú desplegable que define qué evento dispara la acción. Opciones disponibles:

  • On Click: se ejecuta al hacer clic sobre el componente.
  • On Load: se ejecuta al cargar el componente/pantalla.
  • On Change: se ejecuta cuando cambia el valor del componente.
  • On Event: se ejecuta ante un evento personalizado.

Action Type

Menú desplegable con el tipo de acción a ejecutar. Opciones disponibles:

  • Navigate
  • Show Alert
  • Execute Query
  • Execute API Call
  • Set Value
  • Run Script
  • Show Components
  • Hide Components
  • Enable Components
  • Disable Components
  • Refresh Component

Cada una de estas opciones despliega campos adicionales específicos, detallados a continuación.

Navigate

  • Target URL / Path: ruta o URL de destino a la que navega al ejecutarse la acción (ej. “/dashboard”).

Show Alert

  • Message: texto del mensaje a mostrar (ej. “Operation successful”).
  • Type: menú desplegable con el tipo de alerta, que determina su estilo visual. Opciones: –Select a type–, Info, Success, Warning, Error.

Execute Query

  • Query: menú desplegable donde se selecciona la consulta a ejecutar (placeholder “Select a query…”).
  • Parameters: sección para definir los parámetros que recibe la consulta. Con el botón + Add se agrega una fila por parámetro, compuesta por:

    • field (column): nombre del campo/columna al que corresponde el parámetro.
    • Valor asociado: referencia al dato que se pasa a ese campo (ej. $comp.inp_1, tomando el valor de otro componente).
    • Cada fila tiene un ícono de papelera para eliminarla.

  • If executed successfully (✓): bloque para configurar, mediante un botón “+”, una o más acciones que se ejecuten automáticamente si la query se ejecuta con éxito (por defecto: “No actions configured”).
  • If there is an error (✕): bloque equivalente para configurar acciones que se ejecuten si la query falla.

Execute API Call

  • API Call: menú desplegable donde se selecciona la llamada a API a ejecutar (placeholder “Select an API call…”).
  • Parameters: sección para definir los parámetros que recibe la API call. Con el botón + se agrega una fila por parámetro, compuesta por:

    • param name: nombre del parámetro.
    • Valor asociado: referencia al dato que se pasa a ese parámetro (ej. $comp.inp_1).
    • Cada fila tiene un ícono de papelera para eliminarla.

  • If executed successfully (✓): bloque para configurar, mediante un botón “+”, acciones que se ejecuten automáticamente si la API call responde con éxito.
  • If there is an error (✕): bloque equivalente para configurar acciones que se ejecuten si la API call falla.

Set Value

  • Assignments: sección para definir las asignaciones de valor a ejecutar. Con el botón + Add se agrega un bloque TARGET COMPONENT, compuesto por:

    • Select target component…: menú desplegable que lista los componentes disponibles en el lienzo (ej. “cnt_01bd8b73 (Container)”).
    • PROPERTY: propiedad del componente a modificar (ej. “value”).
    • VALUE / EXPR: valor o expresión a asignar (placeholder “$comp.inp_1 or text”), pudiendo ser un valor fijo o una referencia al dato de otro componente.
    • Cada bloque tiene un ícono de papelera para eliminarlo.

  • + Add another assignment: permite agregar múltiples bloques TARGET COMPONENT, para asignar valores a varios componentes en una sola acción.

Run Script

  • Function: menú desplegable donde se selecciona la función/script a ejecutar (placeholder “Select a function…”).
  • Parameters: sección para definir los parámetros que recibe la función. Con el botón + se agrega una fila por parámetro, compuesta por:

    • param name: nombre del parámetro.
    • Valor asociado: referencia al dato que se pasa a ese parámetro (ej. $comp.inp_1).
    • Cada fila tiene un ícono de papelera para eliminarla.

  • If executed successfully (✓): bloque (resaltado en verde) para configurar acciones que se ejecuten si la función termina con éxito.
  • If there is an error (✕): bloque (resaltado en rojo) para configurar acciones que se ejecuten si la función falla.

Show Components

Muestra componentes que estaban ocultos (por ejemplo, los que tienen activada la casilla “Hidden on load”).

  • Components: sección donde se eligen los componentes a mostrar. Con el botón + se agrega una fila por componente, compuesta por:

    • Select component…: menú desplegable que lista los componentes disponibles en el lienzo (ej. “cal_03579022 (Calendar)”).
    • Un ícono de papelera para eliminar la fila.

  • Si no hay ningún componente seleccionado, el panel indica “No components selected. Add at least one.” (hay que agregar al menos uno).
  • From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:

return {
  _uiActions: [
    {
      type: 'Show',
      componentIds: ['id1']
    }
  ]
};

Hide Components

Oculta componentes que están visibles en pantalla.

  • Components: sección donde se eligen los componentes a ocultar. Con el botón + se agrega una fila por componente, compuesta por:

    • Un menú desplegable que lista los componentes disponibles en el lienzo (ej. “cal_03579022 (Calendar)”).
    • Un ícono de papelera para eliminar la fila.

  • From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:

return {
  _uiActions: [
    {
      type: 'Hide',
      componentIds: ['id1']
    }
  ]
};

Enable Components

Habilita componentes que estaban deshabilitados, para que vuelvan a poder usarse.

  • Components: misma estructura que Hide Components (botón +, desplegable de componentes y papelera para eliminar cada fila), con el texto de ayuda “Select the components to enable.”
  • From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:

return {
  _uiActions: [
    {
      type: 'Enable',
      componentIds: ['id1']
    }
  ]
};

Disable Components

Deshabilita componentes para que no puedan usarse (por ejemplo, evitar que se interactúe con ellos).

  • Components: misma estructura que Hide Components, con el texto de ayuda “Select the components to disable.”
  • From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:

return {
  _uiActions: [
    {
      type: 'Disable',
      componentIds: ['id1']
    }
  ]
};

Refresh Component

Vuelve a cargar componentes, para que actualicen su información.

  • Components to Refresh: sección donde se eligen los componentes a refrescar. Con el botón + Add se agrega una fila por componente, compuesta por:

    • Un menú desplegable que lista los componentes disponibles en el lienzo (ej. “cal_03579022 (Calendar)”).
    • Un ícono de papelera para eliminar la fila.

  • Si no se selecciona ningún componente, se refrescan todos los componentes de la pantalla (“Leave empty to refresh all components on the screen”).