• +7 (495) 648-57-90
  • +7 (8442) 95-99-99

Дорабатываем опросы в CRM Битрикс24

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

Бизнес-цель: проведение различных опросов сотрудников через корпоративный портал, проведение конкурсов на лучшие рисунки детей сотрудников.

Изначально мы решили дорабатывать стандартный модуль опросов корпоративного портала Bitrix24. В этом модуле были почти все нужные нам функции и имелся конструктор для создания новых опросов. Аналогичная разработка “с нуля” заняла бы больше 250 часов.

Вам может быть интересно:

Внедрение Битрикс24 Доработка Битрикс24

Пример опроса:

Доработанные опросы Битрикс24

Потребовались следующие доработки:

  1. Радио-кнопки. Выстроить радио-кнопки ответов в виде горизонтальной шкалы ответов. Это было требование заказчика, потому что у них в организации бумажный шаблон опросов имеет именно горизонтальную шкалу ответов и отходить от шаблона было нельзя.
  2. Валидация. Добавить валидацию текстовых и цифровых ответов. Банальная “Защита от дурака”, чтобы пользователи не могли вместо цифры ввести букву.
  3. Изображения. Добавить в качестве ответов изображения. Для конкурса детских рисунков. В конкурсе надо выбрать одно изображение из нескольких десятков.

Требования:

  1. Все изменения надо вносить таким образом, чтобы при обновлении версии Корпоративного портала изменения остались и контент-менеджер мог работать с новыми доработками без привлечения программиста.
  2. При анализе задачи надо рассматривать разные варианты решения проблемы. С использованием стандартного функционала Bitrix24 или без.

Анализ предстоящей работы

Стандартные возможности модуля опросов Bitrix24 имеют ограничения.

Настройки опросов Bitrix24

Если посмотрим на административную панель настроек, то видим ограниченные настройки для ответов.

Можно добавить Название ответа, Тип поля, Ширина, Высота, Параметры, Сорт, Цвет.

Давайте разберёмся, за что отвечают эти параметры. Для примера возьмём Тип поля text.

Так было изначально и заказчика не устраивало:

Стандартный вид радио-кнопок

Мы улучшили отображение и сделали горизонтальный дизайн. Как это выглядит, показано ниже. Сначала рассмотрим свойства:

Название ответа — слово, которое попадёт в тэг

<label>0 абсолютно не интересно</label>

Тип поля — параметр type тэга input ( type="radio" )

Ширина и высота для параметров тэга input типа text или text-area отвечают за ширину и высоту текстового поля.

Сорт — сортировка вывода ответов.

Цвет — цвет текста.

Параметры — самый интересный параметр. С помощью этого параметра в тэг input можно добавить любые дополнительные параметры. Один или несколько. Данный параметр можно использовать для валидации, добавления изображений или другой информации, при этом не меняя логики работы самого портала.

Улучшаем опросы в коробочной версии Битрикс24

Горизонтальная шкала в опросах

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

Но как же быть? Нам надо решить задачу. Если стили перезатрутся, то как добавить стили чтобы они остались?

Решение, которое мы придумали было следующее. JS проверяет, есть ли на странице класс для стандартных голосований и если внутри класса есть тэг <input type="radio" />

Если такой тэг имеется то JS изменяет стили, дополняя их красотой.

Подключается JS только на странице публичного вывода голосований и опросов.

Доработанный дизайн радио-кнопок

Минусы этого метода. Применяется для всех тэгов  <input type="radio" />, что не везде будет красиво выглядеть. И, к сожалению нельзя вынести в административный раздел настройку применения этого стиля, потому что это стандартные настройки и все изменения будут удалены при обновлении.

Валидация ответов

Стандартный функционал корпоративного портала вообще не подразумевает проверки введённых значений в ответах.

Но как же это реализовать, если в самой работе нет и намёков на проверку?

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

Настройка параметров

В частности, мы настроили валидацию на параметре placeholder="0-100". Это убивает сразу двух зайцев. Во первых задание этого параметра автоматически подставит в поле ответа нужную нам маску и адекватный человек воспользуется подсказкой и введёт корректные данные, а “защиту от дурака” нам подскажут введённые в этот параметр данные.

Мы добавили следующую проверку:

Если цифра одна, например (placeholder="5"), то при введении других данных, кроме этой цифры выдаст ошибку.

Если цифр несколько (диапазон от 0 до 100, прописан как placeholder="0-100"), то  при введении других данных, кроме цифр этого диапазона выдаст ошибку.

Если введены буквы (placeholder="Иванов И.И."),  то  при введении других данных, кроме букв выдаст ошибку.

Таким образом была добавлена очень гибкая настройка и базовая “защита от дурака”,  и не нарушена стандартная логика работы модуля опросов.

Изображения в качестве ответов в опросах Битрикс24

Как  добавить изображения в качестве ответов на вопрос? Зачем это понадобилось? Всё очень просто. У заказчика устраиваются конкурсы на лучшие детские рисунки. Рисунков много, а выбрать можно только один. При решении задачи нам частично помог наш же код из решения Радио-кнопок. Это было забавно и очень красиво вписывалось в функционал и дизайн.

Изображения в качестве ответов в опросах Битрикс24

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

И тут мы вспомнили о поле Параметры. Так как выбор одного значения из нескольких то input type radio нам также подходил. В поле параметры добавили ещё один параметр img=”1.jpg” значение этого параметра совпадало с изображением в определённой папке.

Как только техническая сторона вопроса была решена, мы столкнулись с некорректной работой стилей и опять пришлось через JS добавлять новые стили при применении параметра img в ответе.

В итоге получилось очень красивое голосование за фотографии на основании стандартного функционала. Почти идеальный конструктор :-).

Доработка опросов Битрикс24 — плюсы и минусы

Данные методы разработки могут быть применены и в других стандартных модулях корпоративного портала Bitrix24. Это как раз один из тех немногих случаев, когда делать операцию на гландах через ж”№; оказывается наиболее верным решением.

Плюсы:

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

Минусы:

  • недостаточная гибкость настройки
  • нельзя изменить или отключить добавленный функционал без технического специалиста
  • применение новых стилей через проверку дом-дерева через JS

Бюджет доработок

Мы смогли реализовать все пожелания заказчика. Итоговый бюджет реализации составил 80 часов работы специалиста. Ставка часа на такие работы — 2 200 рублей. Заказчик работу принял и был доволен.

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

Доработка опросов Битрикс24 выгоднее, чем разработка функционала с нуля

ИНТЕРВОЛГА умеет дорабатывать стандартный функционал Битрикс24. Если у вас есть подобные задачи — обращайтесь.

Оцените статью:

Комментарии (2)

...
  • Виталий
  • 02.02.2018 10:57:17
Коллеги, извините, но насколько я понял - тому кто будет создавать голосование нужно будет каждый раз прописывать этот параметр img scr, класть рисунок в нужную папку. А если названия совпадут?Не совсем очевидное решение.
...
  • Павлов Дмитрий
  • 05.02.2018 15:00:05
Разработка для корпоративного портала имеет свои особенности.В частности такое решение было принято по двум причинам:1. Чтобы при обновлении модуля опросов остались внесённые изменения.2. Чтобы уменьшить бюджет разработки.Да, решение не самое удачное в плане юзабилити, нельзя мышкой выбрать папку и файл, но этот вариант оказался оптимальным при решении вопроса.В нашем решении для удобства администрирования упростили путь до одной папки. Так как  нельзя поместить в одну папку несколько файлов с одинаковым именем, то при копировании надо будет одинаковые файлы переименовать. Но можно внутри поля параметры указать и другие параметры, например путь к изображениям, название изображений, другие скрытые значения.

Оставить Ответить на комментарий:

Вы можете войти, используя аккаунт одной из социальных сетей