Кастомный дизайн стенда ELMA365

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

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

Для такой задачи можно использовать root-виджет (виджет с расширением «Корневой компонент»).

Создадим новый модуль «Дизайн страниц». Перейдем на вкладку «Виджеты» и создадим виджет «Стили страниц». Обязательно укажем при создании виджета «Расширение» – «Корневой компонент»



Вынесем на форму в конструкторе виджет «Код». В настройках виджета выберем чекбокс «Не показывать содержимое в режиме конструктора» и в появившемся поле впишем удобное нам название виджета, например, «ALL STYLES».

Попробуем изменить дизайн стенда. Например, мы хотим:

1. Раскрасить все кнопки с цветным фоном (по дефолту для них установлен синий фон #1e6599) в цвет #a64d79
2. Раскрасить хэдер на главной странице и странице приложения в цвет #f7ebf3
3. Убрать кнопку с настройками приложения (иконка в виде шестеренки) со страницы

1 задача

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



Переходим в браузере в Инструменты разработчика (DevTools), находим нужный нам элемент в HTML-структуре страницы. Смотрим стили этого элемента. Находим в стилях свойство, которое нам нужно. В данном примере это будет свойство «background».



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

Поэтому мы изменим в виджете «Код» значение переменной «--el-component-button-color-primary», которая отвечает за фон нужных нам кнопок. Не забудем также и про hover и зададим для переменной, соответствующей hover, более темный цвет #823c5f.

Для этого добавим следующий код в виджет «ALL STYLES»:

Код:

<style>
    /* настройка цвета кнопок через переменные */
    :root {
        --el-component-button-color-primary: #a64d79 !important;
        --el-component-button-color-primary-hover: #823c5f !important;
    }
</style>

Важно указывать модификатор «!important» для того, чтобы наш стиль был с большим приоритетом.

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



Учитываем также, что стили действуют на весь стенд, так как мы используем root-виджет. И то, что мы изменили значение переменной, которая используется для разных кнопок на стенде. Например, на кнопке для создания задачи на странице раздела «Задачи».



2 задача

Далее попробуем поменять цвет фона хэдера на главной странице (шапка страницы, где расположены кнопки). Применим цвет #f7ebf3 для свойства «background».

Добавим в виджет следующий код:

Код:

    /* настройка цвета фона для хэдера с поиском на странице приложения */
    app-main-header {
        background: #f7ebf3 !important;
    }

Опубликуем виджет, проверим изменения на странице.



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



Видим, что там также поменялся цвет. Это произошло, т.к. мы меняли свойство для тега «app-main-header», а он используется и на главной странице, и на странице приложений.

3 задача

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

Введем в виджет следующий код:

Код:

    /* убрана иконка шестеренки на странице приложения возле заголовка */
    .elma-breadcrumbs__inner > span.icons-bar.elma-icons {
        display: none !important;
    }

Опубликуем виджет. Проверим, что у нас действительно пропала кнопка настроек с иконкой шестеренки:



Итоговый код виджета:

Код:

<style>
    /* настройка цвета кнопок через переменные */
    :root {
        --el-component-button-color-primary: #a64d79 !important;
        --el-component-button-color-primary-hover: #823c5f !important;
    }

    /* настройка цвета фона для хэдера с поиском на странице приложения */
    app-main-header {
        background: #f7ebf3 !important;
    }

    /* убрана иконка шестеренки на странице приложения возле заголовка */
    .elma-breadcrumbs__inner > span.icons-bar.elma-icons {
        display: none !important;
    }
</style>

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

Во вложениях приведен пример готового пользовательского модуля «Дизайн страниц».

Спасибо! пригодилось)