NPM packages

To improve the performance of Kommo and enhance the speed of its operation in the client's browser, it is recommended to reduce the number of downloaded resources from the network. One way to achieve this is by utilizing the vendor libraries provided by the system in your widgets.

Package	Version
accounting	0.3.2
backbone	1.1.2
browser-detect	0.2.28
chartjs	2.9.2
clipboard	1.5.10
cocktail	0.5.15
colorpicker	3.0.0
cropperjs	1.2.2
device	0.8.0
enquire	2.1.1
FileAPI	2.0.5
fullcalendar	2.9.1
google-libphonenumber	3.2.33
intl_tel_input	3.7.1
jplayer	2.9.2
jquery	2.1.3
js-uuid	0.0.6
moment	2.24.0
pubsub	1.5.3
quill	1.3.6
rangeslider	2.3.2
steady	2.0.0
store	1.3.20
twigjs	0.8.9
underscore	1.9.1
virtualized-list	2.2.0

To add any of these libraries to your widget, you can use the API of the specified version. You can learn more about the API by clicking on the links to NPM. In order to properly include the library as a dependency in your script.js file, be sure to specify the module code from the table in the widget dependencies:

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

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

Kommo modules

It's worth noting that widgets in Kommo can utilize certain built-in features to seamlessly integrate with the system. One of the most frequently utilized features is the modal window, which is located in the lib/components/base/modal module. This allows for a more native and cohesive user experience within the platform.

Here is an example of the module use in 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; }
   }
 };
});

Parameters that can be passed to the `modal`

Parameter	Description
class_name	Additional classes for a modal window if you need to change some styles in it .
can_centrify	Centering option for mobile devices. Some modal windows need to be re-centered intentionally after closing the keyboard on a tablet.
init	The method runs when the modal window is up and receives the `jQuery` object `$modal_body` of the body of the modal window as a parameter, contains everything from the modal window.
destroy	Custom `destroy`, if returns `false`, the window will not close.
container	Сontainer with the modal window. It tells which element it will be centered in relation to.
disable_overlay_click	Pass it if you need to prevent the modal window from closing by clicking on the overlay
disable_escape_keydown	Pass it if you need to prevent the modal window from closing by pressing ESC
disable_enter_keydown	Pass to disable default processing of ENTER
init_animation	Responsible for the animation of the pop-up of the modal window. If you pass `true`, it will appear with an animation of expanding.
default_overlay	Modal windows have white overlay by default, you should switch it, if you want to change it to dark.
preload_templates	You can pass an array of necessary `twig` templates for loading.
focus_element	The element that receives focus is the accept button, by default. This parameter is used to remove focus from the button that caused an event.
centrify_animation	Determines whether animation is needed when centering the modal window.
disable_cancel_click	Disables closing the modal window by clicking on the cross or overlay.
disable_resize	Disables modal window resize on initialization.

Modal object to work with a modal window

If you want to utilize a modal window object in your code, you will need to connect it through the require function (define at the beginning of script.js) and pass the necessary parameters: class_name, init(), and destroy().

The init() method should accept the data that you want to display within the modal window, and the trigger events(which will enable the methods of the modal object to run and display the modal window in the DOM).

This example shows the use of the Modal window object:

define(['jquery', 'lib/components/base/modal'], function ($, Modal) {
    var CustomWidget = function () {
        this.callbacks = {
            // ...
            bind_actions: function () {
                // ...
                var data = '<h1>Test</h1><p>Some text</p>';
                modal = new Modal({
                    class_name: 'modal-window',
                    init: function ($modal_body) {
                        var $this = $(this);
                        $modal_body
                            .trigger('modal:loaded') // triggers displaying the modal window
                            .html(data)
                            .trigger('modal:centrify')  // sets up the modal window
                            .append('');
                    },
                    destroy: function () {
                    }
                });
                // ...
                return true;
            }
        }
    }
    return CustomWidget;
});

NPM packages

Kommo modules

Parameters that can be passed to the modal

Modal object to work with a modal window

Parameters that can be passed to the `modal`