Доступный Bitrix24 [кастомизация страниц облачного портала с помощью пользовательских скриптов браузера]

Надоело ждать когда разработчики Bitrix24 внедрят места встраивания для приложений? Не нужно ждать! Кастомизируй интерфейс Bitrix24 как захочешь прямо сейчас!

Общий принцип работы

1) Пользователь (клиент) ставит расширение браузера

для Firefox - https://addons.mozilla.org/ru/firefox/addon/greasemonkey/

для Microsoft Edge, Chrome, Opera, Яндекс.Браузер, Firefox - https://tampermonkey.net/

2) Разработчик реализует и на любом хостинге публикует код пользовательского скрипта выполняющий кастомизацию страницы (в виде javascript файла whatever.user.js)

3) Перейдя по такой ссылке клиент может очень просто установить/обновить этот скрипт

По сравнению с разработкой полноценного расширения под каждый браузер и прохождения процесса публикации его в маркетплейсе Google/Mozilla/Microsoft Store и т.п. - затраты по времени минимальны!

Рассмотрим простой пример

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

Реализация

// ==UserScript==
// @name Bitrix24 - Правки и улучшения на страницах
// @namespace https://github.com/rivetweb/
// @version 1
// @author rivetweb
// @description Правки и улучшения на страницах портала Bitrix24
// @grant none
// @include https://*.bitrix24.ru/*
// ==/UserScript==

// поправить ширину селекторов для страниц редактирования элементов списков
var pagePath = location.pathname;
if ((pagePath.indexOf('/lists/') >= 0
|| pagePath.indexOf('/bizproc/processes/') >= 0)
&& pagePath.indexOf('/element/') > 0) {
var items = document.querySelectorAll(
'.bx-field-value select[multiple][name^="PROPERTY_"]');
for (var i = 0, l = items.length; i < l; i++) {
items[i].style.width = '100%';
}
}

Без расширения - название элементов в селекторе не влазит

С расширением - название элементов в селекторе видны полностью!

Еще более крутые варианты применения

- добавить кнопку для открытия слайдера в котором можно отредактировать местоположение объекта на карте и настроить его атрибуты

- встроить пользовательское поле ввода или блок полей - данные которого берутся с сайта

- скрыть некоторые лишние поля в зависимости от типа объекта

- добавить кнопку публикации на сайт или запуска другого процесса - например согласования изменений

и т.д.

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

https://github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

https://medium.freecodecamp.org/applying-javascript-user-scripts-2e505643644d

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