Модули расширения системы > Примеры модулей интеграции с ELMA365 / Интеграция с DaData

Интеграция с DaData

В данной статье описана работа с API сервиса DaData в системе ELMA365. В качестве примера используется работа с разделом CRM, в котором при создании новой компании можно задать поиск по названию контрагента или найти компанию по ИНН.

Добавление обработчика события изменения

  1. Перейдите в раздел CRM.
  2. В меню приложения Компании выберите пункт Настройка формы.

dadata_integration-1

  1. В открывшемся окне перейдите на вкладку Создание.
  2. Добавьте новую форму, нажав на кнопку +Создать форму. Вы можете выбрать существующую форму, нажав на кнопку Редактировать форму. Подробнее о работе с формами читайте в статье «Шаблон формы». Откроется окно конструктора формы.dadata_integration_2
  3. Добавьте обработку событий при изменении значения поля ИНН. Для этого со вкладки Свойства на правой панели конструктора формы перетащите свойство ИНН на поле для моделирования.
  4. Зайдите в настройки свойства, нажав на значок шестеренки.
  5. Перейдите на вкладку События.
  6. В выпадающем списке выберите «Клиент».
  7. Нажмите кнопку Создать и введите в поле Название функцию getINN. Подтвердите создание функции и нажмите кнопку Открыть. Откроется окно редактора сценариев.

dadata_integration-3

  1. Вставьте следующий код в функцию getINN(). В качестве значения поля `token` используйте токен из личного кабинета DaData.

const token = '2f3516bd65a9aa660bc9642134325bdb2081ffa3'
if (Context.data._inn) {
    const res = await fetch("https://suggestions.dadata.ru/suggestions/api/4_1/rs/findById/party", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "Authorization": `Token ${token}`
        },
        body: JSON.stringify({
            "query": Context.data._inn
        })
    })
 
    if (!res.ok) {
        throw new Error('Произошла ошибка: '+ res.status + ': ' + res.statusText)
    }
        
    const i = await res.json()
    Context.data._address = i.suggestions[0].data.address.value
    Context.data.__name = i.suggestions[0].value
    Context.data._kpp = i.suggestions[0].data.kpp

else {
   Context.data._address = ''
   Context.data.__name = ''
   Context.data._kpp = ''
}

Проверка выполнения

Откройте окно создания новой компании и введите ИНН в соответствующее поле. Как только найдутся совпадения, остальные поля заполнятся автоматически.

dadata_integration-4

Получение списка компаний и выбор из выпадающего списка

  1. Перейдите в раздел CRM.
  2. В меню приложения Компании выберите пункт Настройка формы.

dadata_integration-1

  1. Добавьте новую форму, нажав на кнопку +Создать форму. Вы можете выбрать существующую форму, нажав на кнопку Редактировать форму. Подробнее о работе с формами читайте в статье «Шаблон формы».dadata_integration_2
  2. Добавьте в контекст приложения Компании новый атрибут типа Строка. Назовите его «Поиск по названию», код поля — «search_string».
  3. Вынесите на форму созданное поле «Поиск по названию» и Виджет-код. В виджет добавьте код:

<% if (false) { %> style <% } %>
  <style>
    .dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
 
    .dropbtn:hover,
    .dropbtn:focus {
      background-color: #2980B9;
    }
 
    .dropdown {
      position: relative;
      display: inline-block;
    }
 
    .dropdown-content {
      top: 35px;
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
 
    .dropdown-content span {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      pointer: hand;
    }
 
    .dropdown-content span:hover {
      background-color: #c6c6c6;
    }
 
    .dropdown span:hover {
      background-color: #ddd;
    }
 
    .show {
      display: block;
    }
  </style>
  
  <script type="text/javascript">
    <% Context.data.showSuggestions = async function(suggestions){ 
    const inputAddress = document.getElementById("search_string");
    inputAddress.setAttribute('list', 'dlist');
 
    let myDropdown = document.getElementById("myDropdown");
    let dropdown = "";
    if (myDropdown == null) {
      dropdown = '<div id="myDropdown" class="dropdown-content">';
    } else {
      dropdown = "";
    }
 
    let listSuggestions = "";
    suggestions.forEach(function(item, i, arr) {
      listSuggestions += '<span id="suggestion" onclick="eh(this)">' + item.value + '</span>';
    });
    listSuggestions += '</div>';
    inputAddress.insertAdjacentHTML('afterend', dropdown);
 
    myDropdown = document.getElementById("myDropdown");
    myDropdown.classList.add("show");
    myDropdown.innerHTML = "";
    myDropdown.insertAdjacentHTML('afterbegin', listSuggestions);
 
    for (let item of myDropdown.children) {
        item.addEventListener('click', function(event) {
          document.getElementById("search_string").value = '';
          document.getElementById("myDropdown").classList.remove("show");
          Scripts.getSelectedSuggestion(event.target.innerText);
        });
      };     
    } %>
  </script>

  1. Для поля «Поиск по названию» добавьте функцию для обработки изменения значений searchCompanies. Перейдите на вкладку Сценарии конструктора форм и приведите код к следующему виду:

let items: any
 
async function searchCompanies(): Promise<void> {
    const token = '2f3516bd65a9aa660bc344213e94fbdb2081ffa3'
    if (Context.data.search_string && Context.data.search_string.length > 3) {
        const res = await fetch("https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/party", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "Authorization": `Token ${token}`
            },
            body: JSON.stringify({
                "query": Context.data.search_string
            })
        })
 
        if (!res.ok) {
            throw new Error('Ошибка выполнения: ' + res.status + ': ' + res.statusText)
        }
        items = await res.json()
        Context.data.showSuggestions(items.suggestions)
    }
}
 
function showInfoAboutSelectedSuggestion(selectedSuggestion: any) {
    Context.data._inn = selectedSuggestion.data.inn
    Context.data._address = selectedSuggestion.data.address.value
    Context.data.__name = selectedSuggestion.value
    Context.data._kpp = selectedSuggestion.data.kpp
}
 
function getSelectedSuggestion(text: string) {
    let selectedSuggestion
    if (Context.data.search_string != null && items != null) {
        let selectedAddress: string = text
        const res = items.suggestions
        for (let item of res) {
            if (item.value == selectedAddress) {
                selectedSuggestion = item
                break
            }
        }
    }
    if (selectedSuggestion != null) {
        showInfoAboutSelectedSuggestion(selectedSuggestion)
    } else {
        Context.data._inn = ''
        Context.data._address = ''
        Context.data.__name = ''
        Context.data._kpp = ''
    }

Проверка выполнения

Откройте окно создания новой компании и начните вводить название компании в поле «Поиск по названию». Как только найдутся совпадения, появится выпадающий список с найденными компаниями.

dadata_integration_7

 

При выборе компании из списка поля заполнятся автоматически.

dadata_integration_8

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас