В предыдущих уроках мы показывали приложения, которые добавляют пользовательские интерфейсы в левое меню Битрикс24 или регистрируют виджеты в различные места встройки.
Также было показано, как использовать обработчики событий на стороне приложений, в случае изменений происходящих в Битрикс24.
Для полной интерактивности в приложениях нам осталось познакомиться с одним сценарием: как эффективно обновлять пользовательский интерфейс приложения, открытого в Битрикс24, если изменения происходят на серверной стороне приложения.
Интерактивные приложения
6 мин
Зайдем в кабинет разработчика и создадим новое приложение, как мы это делали в предыдущем уроке.
Нажмем кнопку «Добавить приложение». Выберем, как и ранее, основной регион для будущей публикации решения. В карточке приложения нажмем на кнопку «Создать» и укажем тип «Использовать REST API». Убедимся, что скоуп "Мгновенные сообщения системы" добавлен в список разделов.
Скачайте пример, прикрепленный к уроку, и загрузите его на свой сервер так же, как мы это делали на уроках, посвященным локальным интеграциям.
Вставьте в карточке версии пути к выгруженному на сервер приложению, как мы это делали ранее. Скопируйте значения из полей client_id, client_secret и вставьте их в соответствующие константы в файле settings.php.
Доступность из внешней сети
Очень важно, чтобы адрес выгруженного на сервер примера был доступен из внешней сети. Никаких localhost, никаких самоподписанных SSL-сертификатов и так далее. Проверяйте доступность вашего URL какими-то сторонними сервисами, не уповайте, пожалуйста, на то, что именно в вашем браузере этот адрес успешно открывается. Убедитесь, что ваш веб-сервер разрешает показ во фреймах
Текущая страница позволит установить приложение на наш Битрикс24 и протестировать его до публикации в Битрикс24.Маркет.
Укажем адрес своего Битрикс24, на котором мы являемся администратором и нажмем Установить.
Произойдет редирект на портал и откроется интерфейс установки приложения. Когда мы опубликуем приложение в каталоге, заполнив описания и прикрепив скриншоты, установка будет выглядеть эффектнее, но сейчас нам нужно просто убедиться в технической работоспособности приложения.
Битрикс24 автоматически откроет приложение после завершения установки, поскольку у нашего приложения есть пользовательский интерфейс.
Итак, мы понимаем, что во фрейме слайдера Битрикс24 прямо сейчас открыт наш index.php.
Откроем еще один браузер и откроем в его адресной строке файл из примера external.php. Фактически, этот файл представляет собой демонстрацию некой внешней системы, которая через REST сможет взаимодействовать с нашим порталом Битрикс24. Мы можем нажать на любую ячейку таблицы и перекрасить ее. В реальном режиме времени происходит обновление статуса аналогичной ячейки таблицы в отрытом слайдере приложения!
Давайте посмотрим, как работает эта магия.
Для начала посмотрим, что происходит в файле external. В нем живет очень простой обработчик клика на ячейку таблицы, который, с одной стороны переключает ее класс, а с другой стороны, делает ajax-вызов файла inform_app.php, передавая ему идентификатор и состояние нажатой ячейки таблицы.
В свою очередь, файл inform_app.php, получив запрос, делает ровно один вызов специального метода pull.application.event.add всего с двумя параметрами:
- COMMAND. Cтроковое обозначение команды, которая будет передана нашему приложению.
- PARAMS. массив произвольных параметров, которые мы хотим отправить.
Разработчик приложения сам определяет, какие команды и какие параметры ему нужны, потому что он же потом будет обрабатывать их получение на фронтэнде. В примере я посылаю приложению команду GRID_UPDATE и заодно передаю массив с идентификатором измененной ячейки и ее текущим состоянием.
Осталась последняя часть кода, реализованная в файле index.php.
Самое важное - здесь подключены две специальные js-библиотеки. Именно они позволят нам легко и просто сделать все остальное. В верстке страницы мы разместили точно такую же таблицу.
А дальше вы видите небольшой код на Java Script.
Сначала мы инициализируем готовый PullClient Битрикс24. Здесь нам важно правильно сформировать два параметра.
Первый restApplication – здесь нужен уникальный идентификатор, который связан и с конкретным приложением и с конкретным Битрикс24. В примере я достиг этого, объединив придуманный мною префикс с уникальным системным идентификатором портала.
Второй параметр – это идентификатор текущего пользователя приложения, который прямо сейчас открыл интерфейс приложения. Этот идентификатор получен в примере при помощи вызова метода profile.
Клиент подготовлен, и нам нужно лишь подписаться на получение уведомлений. Это происходит в функции callback, в которую и будут передаваться данные, отправленные из файла inform_app при помощи рест-запроса. Логика очень проста – если мы получили команду GRID_UPDATE, то дальше мы добавляем или удаляем класс указанной ячейки таблицы.
Давайте еще раз посмотрим работу примера, открыв на этот раз браузерные консоли на обеих страницах.
Когда мы нажимаем на ячейку в правом браузере с файлом external, мы видим, какая ячейка была нажата и видим ответ от inform_app, который возвращает нам результат выполнения рест запроса. Видно, что метод отработал без ошибок. Соответственно, в консоли левого браузера, с открытым интерфейсом приложения внутри Битрикс24, мы видим, какая команда и с какими параметрами получена.
Теперь вы научились работать с интерактивом в приложениях для Битрикс24 и сможете делать очень удобные для пользователей интерфейсы, которые в реальном времени будут показывать актуальную информацию без необходимости перезагрузки целой страницы.
Список ресурсов
Материалы уроку:
- Пример из урока example30.zip
- SDK CRest перейти
- Кабинет разработчика перейти