битрикс24 кастомизация мобильного приложения

Доработка функционала мобильного приложения Битрикс24

Компания-заказчик производит и поставляет элементы кухонной сантехники и имеет большую партнёрскую сеть во многих городах страны. Процесс реализации продукции происходит следующим образом: у компании есть партнёры, чьи представители при реализации своих услуг и товаров предлагают в дополнение приобрести необходимые кухонные сантехнические системы.

Для лучшего понимания ситуации приведем изображение:

В связи с чем компании-заказчику нужно вести учёт всей партнёрской сети (включая сеть представителей партнёров) и постоянно расширять этот список, пополнять новыми организациями. При этом есть потребность в мобильности всей системы учёта, чтобы сотрудники компании могли прямо на месте (на территории партнёра) проводить опрос (15-20 пунктов) и вносить полученную информацию в общую базу, или же иметь доступ к уже имеющейся информации.

Для решения вопроса выбран Битрикс24 коробочной версии. Однако мобильная версия продукта обладает сильно ограниченными возможностями, которых недостаточно для полноценной работы сотрудников компании-заказчика.

Соответственно была поставлена задача по доработке мобильного приложения Битрикс24:

Реализовать в Битрикс24 функционал, благодаря которому сотрудники смогут онлайн, вне зависимости от своего местоположения, посредством мобильного устройства вносить, изменять или использовать имеющуюся информацию о партнёрах.

Осуществить такой функционал было возможно двумя решениями:

Плюс этого решения — широкие возможности визуализации страницы под нужды заказчика;

Минусы — затратность решения и образование дополнительных точек взаимодействия с системой (что приводит к необходимости постоянного контроля за правильностью работы системы и, тем самым, требует больших временных ресурсов).

Плюсы решения — упрощение и ускорение работы с базой данных о партнёрах.

Из минусов можно отметить только более сложную реализацию, т. к. в документации Б24 практически отсутствуют готовые кейсы и инструкции по решению данного вопроса.

Основная цель проекта заключалась в автоматизации процессов, улучшении ведения базы данных и сокращении временных затрат. Первый вариант не подходил для этой задачи.

Поэтому был выбран второй — модернизация мобильного приложения. В отсутствии необходимой документации от производителя (Битрикс24), это действительно сложная задача. Но, забегая вперёд, отметим, что благодаря слаженности и профессионализму наших разработчиков, вопрос был решён грамотно и в приемлемые сроки.

Реализация

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

В результате процесс взаимодействия сотрудника с системой выглядел следующим образом:

Результаты реализации проекта

Подобное решение мы можем рекомендовать компаниям, обладающим большим штатом сотрудников, которые ведут деятельность на территории клиентов. Благодаря кастомизации мобильного приложения Битрикс24, пользователям не придётся выполнять двойную работу (вносить информацию в мобильное устройство, а затем вручную переносить её в общую базу посредством компьютера), а значит организация получит не только значительную финансовую выгоду, но и минимум ошибочных данных!

Звоните нам и обращайтесь за подобным проектом, мы сможем грамотно реализовать внедрение, настройку и интеграцию Bitrix24.

Нужно оперативно оценить задачу?
Свяжитесь с менеджером данного проекта!

У вас похожая задача? Оставьте заявку, и наши специалисты свяжутся с вами и подробно проконсультируют.

Источник

Битрикс24 Возможности адаптации мобильного приложения под требования.

Важно! На нашем форуме собраны тысячи вопросов и ответов (с 2015 года). Но часть из них может оказаться не актуальными с позиции сегодняшнего дня. Если у вас нет времени искать нужный ответ и проверять его актуальность, то просто оставьте ваши координаты, мы с вами свяжемся и поможем в решении вопроса.

Добрый день, уважаемые коллеги.

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

Спасибо.
С уважением,
фаниль шафиков

Добрый день, коллега.

Ответы на перечень вопросов по адаптации мобильного приложения.

Заменить видеогаллерею на «Живую ленту» или вставлять видео прямо на страницу.

С уважением,
модератор форума Пинол
Б24(коробка)

Добрый день, уважаемый коллега.

С уважением,
фаниль шафиков

Добрый день, коллега.

Это отдельный продукт, который нужен для создания мобильных приложений, но это для БУС, а не для Битрикс24.

С уважением,
модератор форума Пинол
Б24(коробка)

Добрый день, коллега.

То, что мы оценим, мы выложим в Коммерческое предложение, понятное дело.
Полагаю, что Вам требуется установка Демо версии продукта, поскольку если Вы не можете ее стандартно посовать и настроить, то еще затраты будут на стандартное внедрение.

С уважением,
модератор форума Пинол

Добрый день, уважаемый коллега.

С уважением,
фаниль шафиков

Добрый день, коллега.

С уважением,
модератор форума Пинол

Добрый день, уважаемый коллега.

Пока по документам стоит запарковать. Но иметь ввиду, что возможна доработка.

С уважением,
фаниль шафиков

Добрый день, коллега.

Прошу проверить по каждому пункту, все ли мы для Вас оценили, что требуется?

С уважением,
модератор форума Пинол

Добрый день, уважаемый коллега.

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

Источник

Создание приложения для Bitrix24 с нуля

Для расширения функциональности Bitrix24 удобно использовать приложения. В данной статье описано создание с нуля локального serverless приложения.

Для установки нашего приложения нам понадобится собственно портал bitrix24, в котором мы обладаем правами администратора или правом установки и редактирования приложений.

Если такого портала нет — создать его можно здесь.

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

Официальная javascript-библиотека

Создадим папку с произвольным названием и в ней единственный пока файл index.html со следующим содержанием (исходный код):

Помещаем файл index.html в zip-архив и указываем этот архив в качестве значения поля Загрузите архив с вашим приложением (zip)* в диалоге создания приложения.
Затем нажимаем кнопку «Сохранить»

Посмотрим, что у нас получилось.

Кликаем по Перейти к приложению и видим… пустое место на месте нашего приложения.

Все необходимое для нас на данном этапе находится сейчас в консоли разработчика.

Мы видим, что наше приложение успешно получило данные необходимые для авторизации.

Официальная javascript-библиотека c promise

Использование callback-функций имеет свои преимущества, но не всем нравится или не всегда подходит к ситуации.
Поэтому попробуем получить тот же результат в promise-стиле. Для этого изменим наш index.html (исходный код)

Опять архивируем, опять обновляем наше приложение, опять смотрим, опять все работает.

Инструменты разработки

В папке нашего проекта инициализируем npm:

Установим необходимые пакеты:

Состояние проекта после всех изменений можно посмотреть здесь.

Создадим в корне нашего проекта файл server.js

Создадим папки src и public
В папку public перенесем index.html и изменим его содержимое на:

В папке src создадим файлы

Если package.json еще не создан, выполним:

Добавим скрипты в package.json :

Далее так как и команда start и команда watch не заканчиваются, их нужно запускать параллельно. Для этого в двух командных строках запускаем

Завершим настройку среды разработки редактированием нашего приложения в Bitrix24.
Перейдем в диалог редактирования нашего приложения и укажем в поле
Укажите ссылку* значение http://127.0.0.1:3000/

Перейдите к просмотру вашего приложения:
Вы должны увидеть приветствие с именем текущего пользователя:

Если использовать официальную библиотеку, то отличаться будут только два файла:

Итоговый код проекта для использования официальной библиотеки здесь.

Ознакомиться со всеми возможными методами и возможностями API можно здесь.

Исходный код можно увидеть здесь.

И последнее замечание. Описанные выше способы и методы не являются набором лучших практик. Это скорее предложение к конструктивному обсуждению.

UPD: желающих высказаться о 1С-Битрикс или Битрикс24 прошу сделать небольшое интеллектуальное усилие и осознать, что статья не о Битрикс24 и совсем не о 1С-Битрикс.
Это если в Питере прохожий объясняет другому, как пройти к Петропавловской крепости и тут третий вмешивается с репликой:
«Да тиран был ваш Петр I. Тиран и деспот. И усы у него дурацкие».

Если есть конструктивные замечания к коду в СТАТЬЕ или к подходам или к используемым паттернам — добро пожаловать.

Источник

Изменяем пользовательский интерфейс коробочного Битрикс24

Всем привет!
Продолжаем учиться правильно кастомизировать Битрикс24

В изучении этой темы вам поможет исходный код примеров из статьи, а так же запись вебинара, на котором мы показали решения «в живую»:

Под катом подробная статья, слово коллегам из Интерволги:

[spoiler]

Отличие подходов к доработке Б24 и сайта на БУС

Считайте Битрикс24 сайтом, разработанным на БУС – платформа, технологии – те же. Битрикс24, как и любой другой сайт, включает шаблоны сайта, публичную часть (разделы и страницы), компоненты и шаблоны компонентов. Однако при установке обновлений публичная часть тоже обновляется. Поэтому публичную часть, шаблоны сайта и компонентов так же можно считать ядром Битрикс24.

Как известно, вносить изменения в ядро нельзя. В Битрикс24 это означает, что нельзя изменять не только файлы Bitrix Framework, но и публичную часть, шаблоны сайта и компонентов. Как минимум потому, что ваши изменения будут удалены при очередном обновлении.

С копированием шаблонов компонентов ситуация еще интереснее.

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

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

Контекстное меню сущности CRM в списке

Вкладка в карточке сущности CRM

Действие в ленте сущности CRM

Карточка звонка

Типы пользовательских полей
Также REST-приложения могут регистрировать собственные типы пользовательских полей. Они могут быть использованы везде, где есть возможность добавить такие поля.

Пример поля REST-приложения в карточке CRM. Просмотр:

Если вы посмотрите на код шаблона сайта (/bitrix/templates/bitrix24), то увидите некоторое количество вызовов ShowViewContent. Штатные компоненты системы используют эти отложенные области для встраивания своих элементов. Но и вы тоже можете добавлять свою верстку!

Важно! Это «недокументированная возможность». Названия областей могут измениться со временем без предупреждения.

В качестве примера добавим свою кнопку в строку заголовка [ пример на вебинаре ]. Следующий код можно запустить из init.php.

Кнопку мы создаем с помощью модуля UI-библотека (ui). Сначала подключаем расширения «стили кнопок» (ui.buttons) и «иконки для кнопок» (ui.buttons.icons) с помощью класса Extension главного модуля. После этого необходимые стили будут загружены браузером.

Саму кнопку «Отчет» формируем с помощью HTML. Она ничего не делает, цель — научиться встраивать элементы.

У нас получится следующее:

3. Типы пользовательских полей

Можно использовать возможность типов пользовательских полей встраивания в карточки сущностей. Не обязательно делать настоящее поле, можно вывести свою верстку.

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

Чтобы создать свой тип пользовательского поля в коробке, необходимо объявить класс этого поля и зарегистрировать его в системе с помощью события OnUserTypeBuildList [ пример на вебинаре ]

Наследовать класс своего поля от класса другого поля может быть удобно, однако вы рискуете получить неправильную форму наследования. Поэтому, рекомендуется наследовать свой класс от TypeBase — базового класса всех типов пользовательских полей.

Важно определить константу USER_TYPE_ID (именно с таким именем). Она используется системой для различения типов полей.

Метод GetUserTypeDescription должен возвращать описание поля для системы: ID типа поля, класс-обработчик поля, название в интерфейсе управления пользовательскими полями, методы визуализации поля. Этот метод должен являться обработчиком события OnUserTypeBuildList.

Метод GetDBColumnType используется при создании поля нашего типа в какой-либо сущности. Он возвращает физический тип данных для СУБД.

Нас интересуют методы GetPublicView и GetPublicEdit. С помощью них происходит визуализация поля в карточках сущностей в публичной части. Они оба должны возвращать HTML. Выведем кнопки разных цветов с помощью модуля ui.

Помните, что некоторые карточки сущностей не отображают поле в режиме просмотра, если оно не заполнено. Чтобы быть уверенным, что при сохранении данных поле оказалось заполненным, в методе GetPublicEdit также выводится скрытый input.

Обратите внимание, что CJSCore автоматически передает на клиент необходимые языковые строки в зависимости от текущего языка. Получить к ним доступ можно с помощью JS-функции BX.message.

Перезагрузите страницу, откройте панель инструментов разработчика в браузере и выполните следующий JS-код в консоли:

Вы должны увидеть приветственное сообщение.

Важно! Весь JS-код, добавленный с помощью классов CJSCore, Asset или функций AddHeadScript, SetAdditionalCSS, будет объединен в один файл, если это включено в настройках главного модуля. При этом удаление вызова CJSCore::Init не приведет к удалению вашего кода из файла с объединенным кодом. Это значит, что вы не можете управлять загрузкой вашего кода на сторону клиента путем вызова или не вызова CJSCore::Init. Следует применять другой подход.

В custom_stuff.js следует лишь объявить все необходимые функции и классы, которые вам понадобятся для решения задачи (например, «добавить кнопку», «показать диалог подтверждения»).

Если же необходим запуск каких либо функций при загрузке страницы, то следует добавить на страницу еще один небольшой скрипт, который это сделает. Добавить этот скрипт можно с помощью метода Asset::addString (на замену AddHeadString). Он не будет объединен с другим JS-кодом, таким образом, вы можете контролировать запуск кода из custom_stuff.js со стороны сервера.

Например, чтобы метод helloWorld автоматически вызывался после загрузки каждой страницы, нужно сделать следующее:

Теперь рассмотрим несколько примеров.

Пример 1. Кнопка «поблагодарить сотрудника» на странице профиля
[ пример на вебинаре ]

На странице профиля есть небольшой блок действий. Добавим в него пункт «Поблагодарить сотрудника», вот сюда

Для начала добавим в custom_stuff.js функцию, которая создает кнопку.

Здесь узел, представляющий кнопку, создается с помощью функции BX.create (тег a с соответствующим текстом). Также к нему сразу привязывается обработчик клика.

С помощью функции BX.findChildByClassName выполняется поиск узла DOM-дерева — блока действий на странице профиля, а, затем, в нем выполняется поиск контейнера (группы действий). Мы берем первый найденный контейнер и добавляем в него созданную кнопку с помощью метода appendChild.

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

Здесь мы получаем шаблон пути (ЧПУ) к странице профиля из настроек модуля «Интранет» с помощью Option::get, а затем проверяем соответствие текущего URL данному шаблону с помощью CComponentEngine::parseComponentPath.

Посмотрим, что получилось.

Теперь реализуем обработчик клика по этому пункту. Выведем всплывающее окно с полем ввода текста.

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

Про параметры всплывающего окна можно узнать из записи вебинара.

Посмотрим, что получилось.

На событие клика по кнопке «Отправить начальнику» запускается функция helloWorld. При выполнении реальной задачи, вы, например, могли бы сделать AJAX-запрос, который выполняет настоящую отправку сообщения.

Пример 2. Создание документа на диске из шаблона
[ пример на вебинаре ]

При нажатии на кнопку «Создать документ» в диске появляется окно, в котором можно выбрать, создать документ на компьютере или в облачном сервисе. Добавим в это окно выбор шаблона документа.

В данном случае мы не можем добавить нужную верстку сразу после загрузки страницы, т. к. всплывающее окно появляется в DOM-дереве в момент его открытия. В этом случае мы можем проверить, существуют ли какие-нибудь события, связанные с открытием этого окна.

Выполните в консоли браузера следующий код.

Теперь нажмите кнопку «Создать документ». В консоли браузера должно появиться следующее.

Значит, существуют события, связанные со всплывающим окном, одним из которых мы воспользуемся.

На самом деле фрагмент DOM-дерева для всплывающего окна будет готов уже к моменту onPopupWindowIsInitialized. В целях демонстрации мы подпишемся на событие onAfterPopupShow, чтобы добавить верстку для выбора шаблона.

Создадим функцию в custom_stuff.js, которая регистрирует обработчик события onAfterPopupShow с помощью функции BX.addCustomEvent.

Обратите внимание, что обработчик события onAfterPopupShow будет вызываться при каждом открытии любого всплывающего окна. Поэтому в самом начале мы проверяем, обрабатываем ли мы открытие окна создания документа или нет. Узнать ID всплывающего окна можно из лога событий.

На этот раз HTML-код выбора шаблона довольно объемный. Получим его с сервера с помощью AJAX. Мы используем функцию BX.ajax.get, чтобы выполнить запрос.

Важно! Не забывайте передавать параметр sessid и проверять его в обработчике запроса. Это необходимо для предотвращения некоторых атак.

Полученный код добавим во всплывающее окно. Ссылка на узел DOM-дерева хранится в поле contentContainer объекта всплывающего окна.

В целях демонстрации обработчик AJAX-запроса просто отдает верстку для шаблонов. При решении реальной задачи будет уместно вызвать компонент, генерирующий эту верстку.

Осталось сделать запускающий скрипт. Поскольку код на клиенте проверяет, открывается ли окно создания документа или другое. Значит мы можем подписываться на событие открытия окна на любой странице. Поэтому просто будем выполнять следующий код на каждом хите.

Теперь при открытии окна создания документа выводится список шаблонов.

Пример 3. Дополнительные поля в карточках ранней версии канбана
[ пример на вебинаре ]

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

Весь интерфейс канбана строится на стороне клиента с помощью JS. В этом легко убедиться, отключив выполнение JS в браузере. Перед нами стоит задача добавления поля в карточку канбана.

Прежде чем переходить к «грубым» хакам, рассмотрим пример того, как можно дождаться появления на странице карточек, а затем выполнить свой код.

Реализуем функцию, которая выполняется через равные промежутки времени и проверяет наличие нужного нам элемента в DOM-дереве.

Таким образом, когда сетка канбана появится на странице, будет выполнена функция CustomStuff.addHelloWorldToKanban.

Существует и другой метод ожидания элемента DOM-дерева: с помощью MutationObserver.

Теперь реализуем функцию, которая добавит «Hello World!» в каждую карточку.

Функцию CustomStuff.extendKanbanOnFirstLoad будем вызывать, когда открывается любая страница раздела канбана лидов.

Посмотрим, что получилось.

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

Пример 4. Подтверждение на получение публичной ссылки в диске
[ пример на вебинаре ]

Существуют задачи, которые предыдущим способом делать либо дорого, либо вообще не возможно.

JS — особенный язык В нем позволяется заменить любую функцию или метод на свою реализацию.

Например, в контекстном меню объекта диска есть пункт «Получить публичную ссылку». Никаких событий при этом не происходит. Рассмотрим обработчик события клика по этому пункту меню.

Видим, что у некоторого объекта вызывается метод openExternalLinkDetailSettingsWithEditing, который создает публичную ссылку и показывает ее во всплывающем окне. Мы хотим запросить подтверждение на получение ссылки перед тем, как она будет показана. Для этого нам не надо знать реализацию метода получения ссылки. Мы заменим оригинальный метод на свой, который будет сначала запрашивать подтверждение, а потом просто вызывать оригинал.

Прежде всего нам нужно узнать, к какому классу относится метод и какая у него сигнатура.

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

Далее можно сделать поиск по коду и узнать, что полное имя класса (с пространством имен) будет BX.Disk.FolderListClass. Ну или интуицию включить

Далее необходимо найти сигнатуру метода, который мы хотим заменить, чтобы узнать, какие аргументы он принимает. Для этого нужно открыть исходный код этого класса.

Посмотрим, что получилось.

Теперь, если нажать на этот пункт меню, появится всплывающее окно для подтверждения. Публичная ссылка появится только если нажать «Да».

Бонус: работа с боковой панелью-слайдером
[ пример на вебинаре ]

В последнее время все чаще используется панель-слайдер в интерфейсе КП. Например, при создании задачи, открытии карточки CRM и т. п.

Дело в том, что клик по кнопке, которая открывает слайдер, обрабатывается не на этапе всплытия, а на этапе перехвата, при чем на элементе html. Это значит, что если понадобится выполнить какой-то код перед открытием слайдера, обработчик клика уже не подойдет.

В данном примере мы сделаем окно с подтверждением при создании новой группы соц. сети.

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

Определить, что в данный момент открывается именно страница создания группы можно только по URL. Далее, используем event.denyAction(), чтобы остановить открытие страницы в слайдере и вызываем окно подтверждения. Когда согласие будет получено, еще раз запускаем открытие страницы в слайдере с помощью BX.SidePanel.Instance.open(. ), но на этот раз не останавливаем открытие.

Код всплывающего окна почти не отличается от предыдущего примера.

Теперь при нажатии кнопки «Создать» на странице групп, сначала появляется такое окно.

Также, иногда бывает полезно узнать, открывается ли текущая страница в слайдере или нет. В этом случае достаточно посмотреть на параметр запроса IFRAME. Он будет равен Y, если страница открывается в слайдере.

Кстати, да, в слайдерах находится iframe, в котором и открываются все страницы.

Источник