Расширенные настройки виджета

Виджеты amoCRM поддерживают добавление на страничку настроек виджета собственной программной логики - поля произвольной структуры и внешнего вида.

Поле произвольной структуры состоит из hidden input (поле, через которое осуществляется чтение и сохранение ), div -элемента, в который можно выводить DOM-элементы для взаимодействия с пользователем и некотого javascript-кода, который обеспечивает необходимую логику.

Для использоваться поля произвольной структуры необходимо сделать два простых шага:

  1. Добавить поле в manifest.json и разрешить виджету исполняться на страничке настроек
  2. Реализовать чтение и запись данных

Описание поля произвольной структуры в manifest.json

Это самое обычное поле со специальным типом custom, возможно не более одного такого поля в одном виджете. Не забудьте добавить местоположение "settings" в массив locations в mainfest.json!

  1. "settings":{
  2.             "apikey":{...},
  3.   … ,
  4.   "myfield":{
  5.                    "name": "settings.apikey",
  6.                     "type": "custom",
  7.                     "required": false
  8.                        }
  9.             }
  10. }

Соберите виджет и загрузите его в аккаунт. Вам станет доступен div с ID <код вижета>_custom_content и hidden input с ID <код вижета>_custom.

Чтобы изменения вашего поля отражались в форме и ее кнопках, нужно создавать событие change на спрятанном системном инпуте. Вот пример того, как можно это сделать:

  1. $('input[name="имя вашего поля"]').trigger('change');

Реализация чтения и записи данных

Для этого просто реализуйте callback settings в this.callbacks Смотрите пример ниже.

Записываемые данные должны быть валидным JSON объектом.

В данном примере мы реализуем возможность записать случайное число в интервале от 0 до 1 в поле произвольной структуры.

  1.         this.callbacks = {
  2.             init: function(){ ….},
  3. ….
  4. // это событие вызывается в момент открытия формы настроек.
  5.             settings: function(){
  6.     // Выведем базовую вёрстку в div
  7.     var base="<a href='#'>click me</a> Old:<b></b> New:<i></i>";
  8.     $('#utest_custom_content').html(base);
  9.     // Берём текущее значение и выводим его в базовую вёрску.
  10. var oldrand=$('#utest_custom').val();
  11.     $('#utest_custom_content b').text(oldrand.length==0?'(not set)':oldrand);
  12.      
  13.     // ф-ия которая меняет значение в интерфейсе и в hidden input
  14.    
  15. function setrand(){
  16.       var newrand=Math.random();
  17.       $('#utest_custom').val(newrand);
  18.       $('#utest_custom_content i').text(newrand);
  19.       return false;
  20.     }
  21.  
  22.     // По нажатию на ссылку будем вызывать описанную выше функцию.
  23.     $('#utest_custom_content a').click(setrand);
  24.   }
  25.   };
  26.