Если у вас еще нет amoCRM
Создать прямо сейчасДля того, чтобы сократить количество загружаемых ресурсов из сети и ускорить работу amoCRM в браузере клиента, виджеты могут использовать вендорные библиотеки, предоставляемые системой.
Модуль | Версия | Ссылка на NPM |
---|---|---|
underscore |
1.9.1 |
|
backbone |
1.1.2 |
|
jquery |
2.1.3 |
|
twigjs |
0.8.9 |
|
browser-detect |
0.2.28 |
|
chartjs |
2.9.2 |
|
colorpicker |
3.0.0 |
|
rangeslider |
2.3.2 |
|
clipboard |
1.5.10 |
|
cocktail |
0.5.15 |
|
accounting |
0.3.2 |
|
device |
0.8.0 |
|
enquire |
2.1.1 |
|
FileAPI |
2.0.5 |
|
google-libphonenumber |
3.0.0 |
|
jplayer |
2.9.2 |
|
js-uuid |
0.0.6 |
|
fullcalendar |
2.3.1 |
|
moment |
2.24.0 |
|
pubsub |
1.5.3 |
|
steady |
2.0.0 |
|
store |
1.3.20 |
|
cropperjs |
1.2.2 |
|
virtualized-list |
2.2.0 |
|
quill |
1.3.6 |
|
intl_tel_input |
3.7.1 |
Можно использовать любую из этих библиотек в соответствии с API указанной версии, ознакомиться с API можно по ссылкам на NPM. Для использования в своем виджете укажите код модуля из таблицы в зависимостях виджета в script.js:
define(['jquery', 'moment'], function ($, moment) { $('#my_widget_selector').css('color', 'red'); console.log(moment().format('DD-MM-YYYY')); });
Помимо внешних модулей виджеты могут использовать некоторые части amoCRM для более нативной интеграции в систему.
Наверное, самый часто используемый модуль это модальное окно (lib/component/base/modal). Вот пример его использования в 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: '', // метод, отрабатывающий при // готовности модального окна // получает в параметр jQuery-объект $modal_body // тела модального окна, все внутренности // окна будут в нем init: _.noop, // кастомный `destroy`, может вернуть `false`, // тогда закрытия окна не произойдет destroy: _.noop, // контейнер, куда попадет // модальное окно и относительно // какого элемента будет центрироваться container: document.body, // если нужно запретить закрытие модального окна // по клику на оверлэе, просто передаем в options // `disable_overlay_click` disable_overlay_click: false, // если нужно запретить закрытие модального окна // по нажатию на escape disable_escape_keydown: false, // если нужно запретить дефолтную обработку enter disable_enter_keydown: false, // параметр отвечает за анимацию всплывания // модального окна, если передать `true`, // то оно запустится с анимацией увеличения и появления 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; } } }; });