Как кастомизировать интерфейс Битрикс24?

Question

[Iamman]

Всем привет!
Возникла потребность добавлять в карточку задачи в bitrix24 определенный текст. Нашел в доках возможность разработки локального приложения и встраивания его в заданные места интерфейса, а также упоминание о JS SDK:
https://dev.1c-bitrix.ru/rest_help/application_emb...
Методы подробно не описаны и непонятно что с ними делать.
Вопрос, можно ли сделать встраивание только с помощью JS, чтобы обойтись статичным локальным приложением? И в ту ли я сторону копаю или может есть способы попроще решить мою задачу?

Answer 1

[ReaverJS]

Привет!

можно ли сделать встраивание только с помощью JS, чтобы обойтись статичным локальным приложением?

Правильно ли я понял что локальное - имеется в виду хостинга у вас нет?
В документации Битрикс написано следующее:

Важно: Следствием вышеуказанных пунктов является то, что механизм встраивания доступен только для серверных приложений!

Так что... можно!

1) Закидываем в архив zip наше приложение (или только index.html)
2) Регистрируем приложение в битрикс (разработчикам > готовые сценарии > локальное приложение)
Настраиваем права (обязательно, placements)
3) Теперь ваше приложение можно открыть в битриксе. Заходим в Разработчикам > интеграции, ищем наше приложение и через контекстное меню жмем "Перейти к приложению"
Нам надо посмотреть куда его закинул Битрикс. Можно через дев тулзы найти iFrame с нашим приложением и скопировать адрес.
4) Осталось зарегистрировать место встраивания.
Тут несколько вариантов.

Вариант 1. Открываем входящие вебхуки, кидаем запрос на bind (можно просто открыть в браузере).
https://dev.1c-bitrix.ru/rest_help/application_emb...

{{url вебхука, который вам выдали}}/placement.bind?PLACEMENT=TASK_VIEW_TAB&HANDLER={{адрес из шага 3}}&TITLE={{My awesome APP}}

Вариант 2. В нашем же приложении с помощью JS-библиотеки Б24 - регаем обработчик методом BX24.callMethod. Там же можно сразу указать HANDLER как текущий url iFrame-а.

Вариант 3. Берем мои файлы index.html и placements.js, добавляем к ним страницу, которую надо отображать (к примеру my-awesome-page.html). Архивируем это все и на шаге 1 - заливаем этот архив.
Тогда в приложении будет открываться уже моя страница. На ней 3 кнопки - зарегать плейсмент, удалить плейсмент, вывести в консоль список текущих плейсментов.
Жмем "добавить" - указываем PLACEMENT (код места встраивания), HANDLER (адрес страницы которую надо встроить - т.е. адрес iFrame-а + /my-awesome-page.html), TITLE.
Код (html - index.html, js - placements.js) В CODEPEN - не работает! Только при запуске из-под Битрикс24:

Тут же можно посмотреть как регаются плейсменты (но лучше нет, т.к. плохой код)

5) Готово. Идем проверять.

Comments

[Iamman]

Респект за такой подробный ответ!
Я завис как раз на шаге 4. Чтобы забиндить хэндлер, нужно знать url приложения, но он неизвестен пока не загрузишь архив с кодом, в котором уже должен быть указан url, такой вот замкнутый круг) А ваши способы весьма находчивы)

[Андрей Николаев]

Iamman, это не рекомендуемый способ, а скорее даже из разряда черной магии.
Никто не гарантирует работоспособность такого решения в будущем (при обновлениях системы).

Что же касается вашего вопроса в комментарии, посмотрите в сторону window.location который содержит нужную информацию.

[ReaverJS]

Андрей Николаев, 2 года полет нормальный) Но в теории - да, url может поменяться.

[ReaverJS]

Но сейчас со статичными хостингами проблем нет никаких - gitHub pages / firebase!
Бесплатные, удобный деплой! Так что мудрить нет смысла.

[Iamman]

Андрей Николаев, а что мне даст window.location? Имеете в виду, что я могу из url получить id задачи? Это да, хотя и через bx24 можно.