En el caso de las personalizaciones de Kintone, hay casos en los que Kintone no puede desencadenar un evento cuando se carga la página, si el controlador de eventos se registra demasiado tarde.

En este artículo repasaremos:

• Temporización de los eventos que se activan cuando se carga una página en Kintone
• Advertencias mostradas en la consola
• Cómo escribir controladores de eventos con el tiempo adecuado

Cuando el navegador carga una página en Kintone, HTML y varios JavaScripts se cargan con diferentes tiempos, en el siguiente orden:

1. El navegador comienza a cargar el HTML de la página
2. Se inicializan las API de JavaScript de Kitone
3. Se cargan los scripts de personalización agregados a Kintone por los usuarios
4. El JavaScript de la plataforma Kintone inicializa la página en Kintone
5. El navegador termina de leer el HTML de la página y activa el DOMContentLoaded evento (* 1)
6. El navegador genera el archivo carga evento (* 2), después de cargar los recursos (como imágenes) especificados en el HTML

Con los enfoques comunes de codificación de JavaScript, como el uso de jQuery, la función principal comienza a procesarse con los controladores de eventos de la función DOMContentLoaded evento (tiempo 5) o el evento carga evento (tiempo 6).

La propia plataforma Kintone comienza a procesar la página en un momento anterior (tiempo 4), lo que puede provocar que se inicie el evento onload de Kindone antes el DOMContentLoaded evento (* 3).

Si un evento se desencadena antes del registro del controlador de eventos, no se llamará al controlador de eventos.
Por lo tanto, si registra controladores de eventos en Kintone dentro de la carpeta DOMContentLoaded o carga , es posible que no se llame a los controladores de eventos. En concreto, esto se aplica a los siguientes eventos de Kintone:

• app.record.create.show
• app.record.edit.show
• app.record.detail.show

Para manejar de manera confiable estos eventos onload, registre los controladores de eventos de forma sincrónica, usando kintone.events.on() en el momento 3 cuando se cargan los scripts de personalización para Kintone.

(* 1) Referencia: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

(* 2) Referencia: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

(* 3) Kintone genera muchos componentes en la pantalla usando JavaScript. Por lo tanto, no existe una relación directa entre el momento de la DOMContentLoaded y carga eventos generados por el navegador, y el momento de la finalización de la construcción del DOM de Kintone.

Si el registro del controlador de eventos usando kintone.events.on() no se procesa sincrónicamente cuando se carga el JavaScript de personalización en el tiempo 3, es posible que se muestre la siguiente advertencia en la consola de desarrollador del navegador (* 4).

Si se muestra esta advertencia, corrija el tiempo de registro del controlador de eventos en el código consultando el ejemplo de este artículo.

(* 4) Este mensaje se muestra después de la actualización de julio de 2018. No se muestra si app.record.create.show, app.record.edit.show, app.record.edit.show, app.record.detail.show no están registrados, o si están registrados en el momento adecuado.

Malos ejemplos

Una forma común de usar jQuery es escribir todo el script envuelto con $(función() {...});

1
2
3
4
5

$(function() {
  kintone.events.on('app.record.create.show', function(event) {
    window.alert('Onload Record Create Event');
  });
});

Esto equivale a procesar el archivo ... parte del script en el controlador de eventos de la clase DOMContentLoaded evento.

1
2
3
4
5

document.addEventListener('DOMContentLoaded', function(loadedEvent) {
  kintone.events.on('app.record.create.show', function(event) {
    window.alert('Onload Record Create Event');
  });
});

Como se mencionó anteriormente, el DOMContentLoaded Se procesa el evento después la inicialización de la página por el JavaScript de la plataforma Kintone. Por lo tanto, escribir su script de esta manera dará como resultado el registro del controlador de eventos usando kintone.events.on() después el app.record.create.show evento se desencadena y no se llamará al controlador de eventos.

Buen ejemplo

Envuelva el script en una función anónima y pase jQuery para que se asigne a $.

1
2
3
4
5
6
7

(function($) {
  'use strict';

  kintone.events.on('app.record.create.show', function(event) {
    window.alert('Onload Record Create Event');
  });
})(jQuery);

Puede haber casos en los que desee comenzar a procesar su script después de que el DOMContentLoaded evento se activa. En este caso, separe (1) el registro del controlador de eventos a través de kintone.events.on() y (2) el proceso envuelto con $(función() {...}; .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

(function($) {
  'use strict';

  kintone.events.on('app.record.create.show', function(event) {
    window.alert('Onload Record Create Event');
  });

  $(function() {
    // If you need to wait for the DOMContentLoaded event, write your code here
    // ...
  });
})(jQuery);

Incluso cuando no use jQuery, asegúrese de registrar los controladores de eventos de los eventos de carga de Kintone para que se procesen de forma sincrónica cuando se carguen los scripts de personalización.

Malos ejemplos

• Registro del controlador de eventos para app.record.create.show En el controlador de eventos de la función DOMContentLoaded evento.

1
2
3
4
5
6
7
8
9

(function() {
  'use strict';

  document.addEventListener('DOMContentLoaded', function(loadedEvent) {
    kintone.events.on('app.record.create.show', function(event) {
      window.alert('Onload Record Create Event');
    });
  });
})();

• Registro del controlador de eventos para app.record.create.show En el controlador de eventos de la función carga evento.

  1 2 3 4 5 6 7 8 9

  (function() { 'use strict'; document.addEventListener('load', function(loadedEvent) { kintone.events.on('app.record.create.show', function(event) { window.alert('Onload Record Create Event'); }); }); })();

• Registro del controlador de eventos para app.record.create.show en la devolución de llamada de una solicitud o proceso asíncrono.

  1 2 3 4 5 6 7 8 9

  (function() { 'use strict'; kintone.api('/k/v1/records', 'GET', {app: appId}, function(result) { kintone.events.on('app.record.create.show', function(event) { window.alert('Onload Record Create Event'); }); }); })();

Buen ejemplo

1
2
3
4
5
6
7

(function() {
  'use strict';

  kintone.events.on('app.record.create.show', function(event) {
    window.alert('Onload Record Create Event');
  });
})();

En este artículo, presentamos los tiempos de los distintos eventos que Kintone desencadena cuando se carga la página y recomendamos enfoques para registrar controladores de eventos en el momento adecuado.

Es posible que el script funcione sin problemas aunque la advertencia se muestre en la consola. Sin embargo, tenga en cuenta que esto puede dar lugar a problemas en el futuro, ya que los controladores de eventos registrados de forma asincrónica se ven muy afectados por el retraso de la red, el rendimiento del equipo cliente y otros scripts de personalización en ejecución.

Asegúrese de seguir los buenos ejemplos de este artículo para obtener una experiencia de personalización más confiable.