Documentación
🇺🇸🇧🇷Discord

Módulos y paquetes

Suggest Edits

Paquetes NPM

Para mejorar el rendimiento de Kommo y aumentar la velocidad de su funcionamiento en el navegador del cliente, se recomienda reducir el número de recursos descargados desde la red. Una forma de lograr esto es utilizando las bibliotecas vendor proporcionadas por el sistema en tus widgets.

PaqueteVersión
accounting0.3.2
backbone1.1.2
browser-detect0.2.28
chartjs2.9.2
clipboard1.5.10
cocktail0.5.15
colorpicker3.0.0
cropperjs1.2.2
device0.8.0
enquire2.1.1
FileAPI2.0.5
fullcalendar2.9.1
google-libphonenumber3.2.33
intl_tel_input3.7.1
jplayer2.9.2
jquery2.1.3
js-uuid0.0.6
moment2.24.0
pubsub1.5.3
quill1.3.6
rangeslider2.3.2
steady2.0.0
store1.3.20
twigjs0.8.9
underscore1.9.1
virtualized-list2.2.0

Para añadir cualquiera de estas bibliotecas a tu widget, puedes utilizar la API de la versión especificada. Puedes aprender más sobre la API haciendo clic en los enlaces a NPM. Para incluir correctamente la biblioteca como una dependencia en tu archivo script.js, asegúrate de especificar el código del módulo desde la tabla en las dependencias del widget:

define(['jquery', 'moment'], function ($, moment) {
  $('#my_widget_selector').css('color', 'red');

  console.log(moment().format('DD-MM-YYYY'));
});

Módulos de Kommo

Vale la pena mencionar que los widgets en Kommo pueden utilizar ciertas funcionalidades integradas para integrarse de manera fluida con el sistema. Una de las funcionalidades más utilizadas es la ventana modal, que se encuentra en el módulo lib/components/base/modal. Esto permite una experiencia de usuario más nativa y coherente dentro de la plataforma.

Aquí tienes un ejemplo de la implementación del módulo en script.js:

define(['jquery', 'underscore', 'lib/components/base/modal'], function ($, _, Modal) {
 return function () {
   var self = this;

   this.callbacks = {
     init: function () { return true; },
     bind_actions: function () {
       $(document).on(
         'click.' + self.get_settings().widget_code,
         '.my_widget_button',
         function () {
           new Modal({
             class_name: '',
             init: _.noop,
             destroy: _.noop,
             container: document.body,
             disable_overlay_click: false,
             disable_escape_keydown: false,
             disable_enter_keydown: false,
             init_animation: false,
             default_overlay: false,
             focus_element: '.js-modal-accept',
           });
         }
       )
     },
     render: function () { return true; },
     destroy: function () {
       $(document).off('.' + self.get_settings().widget_code);

       return true;
     },
     settings: function () { return true; },
     onSave: function () { return true; }
   }
 };
});

Parámetros que se pueden pasar almodal

ParámetroDescripción
class_nameClases adicionales para una ventana modal si necesitas cambiar algunos estilos en ella.
can_centrifyOpción de centrado para dispositivos móviles. Algunas ventanas modales necesitan ser reubicadas intencionalmente después de cerrar el teclado en una tableta.
initEl método se ejecuta cuando la ventana modal está abierta y recibe el objeto jQuery $modal_body del cuerpo de la ventana modal como parámetro, conteniendo todo lo de la ventana modal.
destroyParámetrodestroy personalizado, si devuelve false, la ventana no se cerrará.
containerContenedor con la ventana modal. Indica el elemento en relación con el que se centrará.
disable_overlay_clickPásalo si necesitas evitar que la ventana modal se cierre al hacer clic en el overlay.
disable_escape_keydownPásalo si necesitas evitar que la ventana modal se cierre al presionar ESC.
disable_enter_keydownPásalo para deshabilitar el procesamiento predeterminado de ENTER.
init_animationResponsable de la animación del pop-up de la ventana modal. Si pasas true, aparecerá con una animación de expansión.
default_overlayLas ventanas modales tienen un overlay blanco por defecto. Debes cambiarlo si quieres cambiarlo a oscuro.
preload_templatesPuedes pasar un arreglo de las plantillas twig necesarias para cargar.
focus_elementEl elemento que recibe el foco es el botón de aceptación por defecto. Este parámetro se utiliza para quitar el foco del botón que causó un evento.
centrify_animationDetermina si se necesita una animación al centrar la ventana modal.
disable_cancel_clickDeshabilita el cierre de la ventana modal al hacer clic en la cruz o en el overlay.
disable_resizeDeshabilita el redimensionamiento de la ventana modal durante la inicialización.

Objeto modal para trabajar con una ventana modal

Si quieres utilizar un objeto de la ventana modal en tu código, necesitarás conectarlo a través de la función require (define al principio del script.js) y pasar los parámetros necesarios: class_name, init(), y destroy().

El método init() debe aceptar los datos que deseas mostrar dentro de la ventana modal, y los eventos disparadores (que habilitarán los métodos del objeto modal para ejecutar y mostrar la ventana modal en el DOM).

Este ejemplo muestra el uso del objeto ventana modal:

define(['jquery', 'lib/components/base/modal'], function ($, Modal) {
    var CustomWidget = function () {
        this.callbacks = {
            // ...
            bind_actions: function () {
                // ...
                var data = '<h1>Prueba</h1><p>Algún texto</p>';
                modal = new Modal({
                    class_name: 'modal-window',
                    init: function ($modal_body) {
                        var $this = $(this);
                        $modal_body
                            .trigger('modal:loaded') // activa la visualización de la ventana modal
                            .html(data)
                            .trigger('modal:centrify')  // configura la ventana modal
                            .append('');
                    },
                    destroy: function () {
                    }
                });
                // ...
                return true;
            }
        }
    }
    return CustomWidget;
});

Updated 8 days ago