Виджеты SDK

Для реализации практически любых пожеланий по доработке функциональных возможностей Клиентикс CRM мы создали возможность делать пользовательские виджеты. И добавлять их в самые популярные места интерфейса:

  • Карточка визита в Журнале записи 
  • Карточка клиента
  • Клиент в списке - скоро
  • Выборка клиентов - скоро
  • Карточка услуги - скоро

Каждый пользовательский виджет - это единый по предназначению программный компонент, который состоит из:

- клиентской части (JS,HTML,CSS);

- (опционально) серверной части (PHP в случае размещения кода на площадке Клиентикс, или любая другая технология в случае размещения на другой площадке). 

 

Инструкция по созданию пользовательских виджетов: Создание виджетов

 

Схема работы пользовательских виджетов

Мы предполагаем две основных схемы работы пользовательских виджетов:

- С серверной частью, которая хостится у нас: В этом случае, общение серверной и клиентской части виджета происходит в рамках уже существующих методов.

- Без серверной части, или с серверной частью, которая хостится не у нас. В таком случае на платформе Клиентикс размещается только клиентская часть и если требуется какая то серверная логика, то клиентская часть виджета общается с миром по средствам кросдоменных аякс запросов(только по https).

 

Кейс

Опишу данную архитектуру на примере создания виджета IP телефонии:

1.Для начала нужно создать виджет, согласно инструкции, описанной в статье

В качестве JS класса виджета указать текстовый файл, который содержит следующий код:

var CustomWidgetVoipAppointment = WidgetModel.extend({
resume: function() {
this.dataToSend = {
phone: $W.recordPanelClientInfo.attributes.data.phone,
user: User.get("phone")
};

var dataPacket = this.createDataPacket('makeCall', this.dataToSend, function(response) {
console.error(response);
});

this.ajaxRequest(dataPacket);
}
});

В поле "Класс JS" вписать название класса "CustomWidgetVoipAppointment" - который система инициализирует после того как юзер запустит пользовательский виджет.

Также, необходимо обязательно задать иконку, которая будет отображаться в выбранном месте интерфейса, и по нажатию на которую, будет инициализирован код виджета.

В поле "Место расположения" нужно выбрать место, в каком конкретно интерфейсе должен появиться создаваемый виджет. Выберем для примера - "Карточка записи"

 

2. После того как это будет сделано, в карточке визита, справа от имени клиента появится иконка, которую вы загрузили, при нажатию на которую платформа запустит метод resume, класса пользовательского виджета. И соответственно, выполнится этот код.

В нашем случае(в приведенном примере), он находит в DOM структуре данные о телефоне клиента и отправляет их на серверную часть виджета для инициализации звонка.

Но в любом другом случае, этот код может делать что угодно, рисовать какие либо интерфейсы, вешать события, делать кросс-доменные запросы, делать запросы к API. Единственное ограничение, что если вешаются какие то события, или создаются к примеру какие то таймеры, то нужно определить метод виджета stop, и реализовать в нем прерывание всех созданных активностей.

 

Серверная часть виджета в случае с IP телефонией, также, крайне проста:

<?php

class VOIPWidget extends CustomWidget
{
public function run($action,$params){
switch($action){
case 'makeCall':
return $this->makeCall($params);
break;
}
}

public function makeCall($params){
$params['phone'] = preg_replace('/\D/', '', $params['phone']);
$user = Users::createInstance('select')->getById(app()->user->id);
if(isset($user['itool_labs_voip_internal_number']) and $user['itool_labs_voip_internal_number']){
$params['user'] = $user['itool_labs_voip_internal_number'];
$oATS = new iToolLabsVoIP();
$oATS->init($this->customWidgetsData['ITOOLLABS_AUTH_TOKEN'],$this->customWidgetsData['ITOOLLABSWEBADDRESS']);
return $oATS->makeCall($params);
} else {
//значит у сотрудника не задан внутренний номер и звонок не возможен
return false;
}
}

Важно: на клиентской стороне виджетов, методы console.* переопределены и выключены. Для отладки можно использовать конструкцию debugger и alert.

 

Единственный метод обязательный к реализации, это метод run, который будет автоматически запущен при отправке запроса к серверной части виджета. И куда в качестве аргументов будут переданные все отправленные с клиентской части данные.

 

 

 

 

 

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

0 Комментарии

Войдите в службу, чтобы оставить комментарий.
На базе технологии Zendesk