- Анализ предстоящей работы
- Улучшаем опросы в коробочной версии Битрикс24
- Доработка опросов Битрикс24 — плюсы и минусы
- Бюджет доработок
Нашему заказчику потребовалась разработка функционала опросов для отдела кадров.
Бизнес-цель: проведение различных опросов сотрудников через корпоративный портал, проведение конкурсов на лучшие рисунки детей сотрудников.
Изначально мы решили дорабатывать стандартный модуль опросов корпоративного портала Bitrix24. В этом модуле были почти все нужные нам функции и имелся конструктор для создания новых опросов. Аналогичная разработка “с нуля” заняла бы больше 250 часов.
Вам может быть интересно:
Внедрение Битрикс24 Доработка Битрикс24
Пример опроса:
Потребовались следующие доработки:
- Радио-кнопки. Выстроить радио-кнопки ответов в виде горизонтальной шкалы ответов. Это было требование заказчика, потому что у них в организации бумажный шаблон опросов имеет именно горизонтальную шкалу ответов и отходить от шаблона было нельзя.
- Валидация. Добавить валидацию текстовых и цифровых ответов. Банальная “Защита от дурака”, чтобы пользователи не могли вместо цифры ввести букву.
- Изображения. Добавить в качестве ответов изображения. Для конкурса детских рисунков. В конкурсе надо выбрать одно изображение из нескольких десятков.
Требования:
- Все изменения надо вносить таким образом, чтобы при обновлении версии Корпоративного портала изменения остались и контент-менеджер мог работать с новыми доработками без привлечения программиста.
- При анализе задачи надо рассматривать разные варианты решения проблемы. С использованием стандартного функционала 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
Как добавить изображения в качестве ответов на вопрос? Зачем это понадобилось? Всё очень просто. У заказчика устраиваются конкурсы на лучшие детские рисунки. Рисунков много, а выбрать можно только один. При решении задачи нам частично помог наш же код из решения Радио-кнопок. Это было забавно и очень красиво вписывалось в функционал и дизайн.
Во первых в стандартном функционале нет возможности размещения изображений в ответы к вопросу. Как же быть в этом случае? Где контент-менеджеру добавить изображения? Напрашивалось решение привязать папку с изображениями к конкретному голосованию и выводить список этих изображений в публичном разделе, но в этом случае непонятно как привязать конкретный ответ к конкретному изображению, поэтому это решение признали не корректным.
И тут мы вспомнили о поле Параметры. Так как выбор одного значения из нескольких то input type radio нам также подходил. В поле параметры добавили ещё один параметр img=”1.jpg” значение этого параметра совпадало с изображением в определённой папке.
Как только техническая сторона вопроса была решена, мы столкнулись с некорректной работой стилей и опять пришлось через JS добавлять новые стили при применении параметра img в ответе.
В итоге получилось очень красивое голосование за фотографии на основании стандартного функционала. Почти идеальный конструктор :-).
Доработка опросов Битрикс24 — плюсы и минусы
Данные методы разработки могут быть применены и в других стандартных модулях корпоративного портала Bitrix24.
Плюсы:
- уменьшение трудозатрат разработки
- не затрагивает стандартный функционал обновлений Bitrix24
- можно красиво реализовать многие пожелания заказчика
Минусы:
- недостаточная гибкость настройки
- нельзя изменить или отключить добавленный функционал без технического специалиста
- применение новых стилей через проверку дом-дерева через JS
Бюджет доработок
Мы смогли реализовать все пожелания заказчика. Итоговый бюджет реализации составил 80 часов работы специалиста. Ставка часа на такие работы — 2 200 рублей. Заказчик работу принял и был доволен.
Зачастую правильно дорабатывать существующий функционал, а не писать свой код с нуля.
ИНТЕРВОЛГА умеет дорабатывать стандартный функционал Битрикс24. Если у вас есть подобные задачи — обращайтесь.
Статьи по теме
