|
Consideraciones •Este artículo está diseñado específicamente para personas que entienden CSS y HTML. •Recomendamos encarecidamente usar Google Chrome para facilitar las diferentes tareas relacionadas con esta funcionalidad. •Tenga en cuenta que en esta guía vamos a usar Visual Studio Code para crear los archivos .css y .js, pero usted es libre de usar la herramienta que prefiera. |
Si desea encontrar los IDs específicos de los elementos que quiere personalizar, consulte el artículo Encontrar IDs en el Inspector.
Personalizaciones de JavaScript para apps
Puede usar la carga de archivos JavaScript para extender o sobrescribir el comportamiento predeterminado del lado del cliente de los controles de Bizagi. Este archivo le permite agregar lógica personalizada, validar datos, reaccionar a interacciones del usuario, manipular controles dinámicamente o integrar funcionalidades externas dentro de los forms de su app. Con JavaScript, puede mejorar el comportamiento de los controles más allá de las funciones estándar de Bizagi.
Cuando modifica el archivo de script global para personalizaciones de apps, está aplicando lógica que puede afectar toda la interfaz de la app. Los scripts globales se ejecutan en cada pantalla a menos que use lógica condicional o apunte a controles o eventos específicos. Por esta razón, los cambios en este archivo pueden afectar todos los forms, acciones y componentes de la interfaz a menos que se incluyan verificaciones adicionales para evitarlo.
Estos son ejemplos de elementos y comportamientos que puede manipular con JavaScript en su app:
•Body events
•Text fields
•Number fields
•Date pickers
•Combo boxes
•Buttons
•Links
Body events
Eventos globales de la página
Eventos que se ejecutan tan pronto como se carga el form o cuando el usuario interactúa con el documento. Se aplican a toda la página.
Ejemplo
Este código se ejecuta cada vez que el form termina de cargarse:
$(document).ready(function () {
console.log("El form se ha cargado completamente.");
});
Text fields
Manejo de cambios en la entrada
Agrega comportamiento cuando el usuario escribe en cualquier campo de texto.
Ejemplo
Escucha los cambios en un campo de texto específico llamado Description:
$("#Description").on("input", function () {
console.log("El usuario está escribiendo:", $(this).val());
});
Number fields
Validación de entrada numérica
Agrega lógica para restringir valores o formatear el número.
Ejemplo
Evita que se ingresen números negativos en un campo llamado Amount:
$("#Amount").on("change", function () {
const value = parseFloat($(this).val());
if (value < 0) {
$(this).val("");
alert("No se permiten números negativos.");
}
});
Date pickers
Reacción a la selección de fechas
Ejecuta código cada vez que el usuario selecciona una fecha.
Ejemplo
Cuando el usuario selecciona una fecha en StartDate, muéstrela en la consola:
$("#StartDate").on("change", function () {
console.log("Fecha seleccionada:", $(this).val());
});
Combo boxes
Detección de selección de un ítem
Útil para filtrado dinámico o lógica condicional.
Ejemplo
Dispara una acción cuando el usuario cambia el valor de Category:
$("#Category").on("change", function () {
const selected = $(this).val();
console.log("Opción seleccionada:", selected);
});
Buttons
Comportamiento personalizado al hacer clic
Permite agregar sus propias acciones además del comportamiento nativo de Bizagi.
Ejemplo
Muestra un mensaje cuando se hace clic en el botón SaveButton:
$("#SaveButton").on("click", function () {
alert("Se hizo clic en el botón.");
});
Links
Interceptar o sobrescribir clics en enlaces
Útil cuando desea ejecutar lógica antes de navegar.
Ejemplo
Evita que un enlace navegue y ejecuta lógica personalizada en su lugar:
$("#HelpLink").on("click", function (e) {
e.preventDefault();
alert("Abriendo sección de ayuda...");
});
|
Recuerde que para ciertos elementos es necesario usar los IDs específicos de los elementos que quiere personalizar, consulte el artículo Encontrar IDs en el Inspector si tiene alguna duda. |
Last Updated 12/9/2025 10:08:08 AM