Introducción
Existen diferentes niveles para solucionar problemas o depurar su Widget.
Antes de realizar la solución de problemas en Bizagi, primero debe asegurarse de lo siguiente:
1. El código funciona de manera independiente a Bizagi
Esto significa asegurarse previamente, en un archivo demo.html separado, que el código utilizado por su Widget esté funcionando correctamente.
2. El Widget se simula correctamente dentro del Widget Editor
Tenga en cuenta que al crear un Widget utilizando el Widget Editor, usted tiene la posibilidad de simular su comportamiento tal como funcionaría en Bizagi.
A través de la opción de simulación, observe que las herramientas de la misma proveen una consola integrada que imprime los mensajes de error que se presenten cuando se ejecuta el Widget.
Para más información, consulte Simulación de su Widget.
Aspectos adicionales por considerar
Para solucionar problemas de su Widget dentro de Bizagi, considere los siguientes aspectos para identificar dónde pueden estar los inconvenientes.
1. ¿El archivo BWG es consistente?
Una vez genere un Widget como un archivo .bwg, asegúrese de que no se presenten errores cuando instale su Widget en su proyecto de Bizagi.
Esta acción se realiza registrando el Widget en Bizagi Studio y asegurándose de que en este paso no se muestre ningún mensaje de error (sea ingresándolo o actualizándolo).
Si se presentan errores, es muy probable que necesite revisar la estructura de su Widget asegurándose de que todos los archivos referenciados son importados.
2. ¿Se carga en el Diseñador de Formas?
Después de una instalación exitosa de su Widget, asegúrese de que se muestra apropiadamente cuando se incluye en una de sus Formas (a través del Diseñador de Formas).
Al incluir el Widget (esto es, arrastrándolo y soltándolo) en la Forma, usted podrá ver:
•Que la Forma presenta inmediatamente el Widget que debería dibujar.
Aunque los comportamientos dinámicos (como los eventos on-click) no estén disponibles, Bizagi mostrará en la forma un espacio reservado por el Widget
•Que el panel de las propiedades cargue correctamente todas las propiedades definidas para la configuración del Widget durante la etapa de diseño.
Si incluyó el Widget y nota que el Diseñador de Formas se congela, no lo muestra correctamente o altera el diseño del resto de componentes del Diseñado de Formas, esto indica que el Widget tiene errores y parte de su información no está funcionando como se espera.
Esto puede ser causado por una definición incompleta de sus propiedades o una implementación defectuosa (un solo error en una línea de código puede generar estas alteraciones).
En este caso, no guarde la Forma.
Usted también puede borrar el Widget instalado y cargarlo nuevamente con los ajustes necesarios, iterando las veces que sea necesario en ajustes y validaciones sobre la simulación que provee el Widget Editor.
3. ¿Se muestra en tiempo de ejecución, o en la simulación del Editor, pero no hace lo que debería?
Finalmente y una vez que tenga la certeza de que el Widget al menos se visualiza correctamente, usted podrá probarlo en el Portal de Trabajo.
Esto también aplica si dentro de la simulación del Widget no se realiza lo esperado pero tampoco contiene errores de sintaxis.
|
Recuerde que usted puede utilizar las opciones de depuración y desarrollo de su navegador (frecuentemente accesibles con la tecla F12, como se describe en la sección siguiente), las cuales incluyen las mismas opciones de trazas, como console.log(), que escriben directamente en la consola de JavaScript del navegador (compatibles con Chrome y Mozilla).
|
Al probarlo directamente en el Portal de Trabajo, recomendamos que se apoye en las opciones de debug para probar y solucionar problemas de los Widgets.
Se sugiere enfáticamente el uso de Google Chrome para este propósito, debido a las facilidades que presenta.
Por ejemplo, puede incluir la clausula debugger dentro de la líneas de código, de tal manera que cuente con una forma rápida de adicionar puntos de depuración (breakpoints).
Simplemente abriendo la consola de las herramientas de desarrollador del navegador (p.ej, usando F12 en Chrome), usted podrá llegar directamente a dichos puntos de depuración:
Alternativamente, y si desea depurar el Widget dentro del navegador, sea ya como parte de su proyecto de Bizagi o desde el Editor de Widgets, siga estos pasos:
1. Incluya al final del archivo de implementación del Widget, una línea con lo siguiente:
//# sourceURL=MyWidget.js
2. Asegúrese de crear el archivo del Widget, inclúyalo en su proyecto y configure su uso debidamente en una Forma de Actividad.
Luego, ejecute el proceso para visualizarlo sobre Chrome.
Para mayor información sobre estos pasos, consulte la Administración de Widgets.
3. Utilice las herramientas de depuración para desarrolladores presionando F12 sobre la ejecución del Widget en Chrome (específicamente en la actividad del proceso donde se tiene el Widget configurado).
4. Vaya a la pestaña de fuentes (Sources) para abrir el archivo fuente que contiene su implementación.
Podrá abrir el archivo fuente MyWidget.js presionando CTRL + P (o CTRL + O) e ingresando el nombre MyWidget.js :
Al hacer clic sobre el resultado de MyWidget.js, se cargará el código de su implementación.
5. Ubique breakpoints como usted lo considere apropiado, en la primera línea (o en cualquier línea) dentro la función que despliega su Widget.
Recuerde que la función que se llama al momento de desplegar el Widget será: getEditableControl, getReadOnlyControl, getGenericControl, o renderComplex de acuerdo a su escenario (si el Widget se configuró como editable, no-editable o si es indiferente).
Una vez que cuente por lo menos con un breakpoint, dé clic sobre el ícono de refrescar ubicado en la esquina derecha superior, de manera que solamente se refresque la forma en la que ya está ubicado.
Tan pronto se realice un refresco, verá que Chrome hace una pausa de la ejecución sobre el breakpoint para que usted pueda utilizar las opciones de step-over y step-into para depurar paso a paso.
|
Recuerde que en cualquier momento, podrá también digitar directamente en la consola JS el signo de jQuery ($) seguido de un punto, para así ver las opciones que presenta el intelliSense y verificar que la librería de jQuery se haya cargado para evitar conflictos:
|
Consideraciones importantes
•Se recomienda estar familiarizado, o familiarizarse, con las herramientas de depuración del navegador y las opciones avanzadas para desarrolladores. Este conocimiento le ayudará a diagnosticar problemas específicos en su Widget. Además, tenga en cuenta que cualquier opción de depuración agregada durante el desarrollo debe ser únicamente temporal; asegúrese de eliminarlas posteriormente.
oUn Widget finalizado y liberado a producción nunca debe incluir dichas cláusulas debido a las mejores prácticas de seguridad y rendimiento.
•Para obtener información adicional sobre la depuración, puede consultar la documentación oficial de Chrome en: https://developer.chrome.com/devtools/docs/javascript-debugging
•Tenga en cuenta que si realiza cambios en su Widget y desea probarlos directamente en Bizagi, deberá actualizar su navegador.
•Al crear o utilizar widgets que requieren llamar a servicios web externos, es crucial garantizar la compatibilidad con la configuración de la Política de Seguridad de Contenido (CSP) de su entorno Bizagi.
Last Updated 9/16/2025 2:02:24 PM