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

Кастомизация внешнего вида вьювера

Компонент вьювер отчетов содержит предустановленные CSS-стили, которые и определяют его внешний вид. У главных компонентов генератора отчетов – вьювера и дизайнера – есть свойство CustomCss со следующим описанием: Gets or sets a path to the custom css file. Таким образом, данное свойство позволяет указать путь к CSS-файлу, который будет использоваться вместо встроенных стилей, то есть переопределит их и будет является основой внешнего вида компонентов.Обратите внимание!

Указанные действия относятся ко вьюверам продуктов для всех платформ, кроме JavaScript. Об изменениях в продуктах Reports.JS и Dashboards.JS в целом и об избавлении от CSS-файлов в частности мы писали в этой статье.
Под изменением внешнего вида подразумевается изменение визуального отображения элементов на панели – цвета, границы, размера и многого другого.

Как указать пользовательский CSS-файл для вьювера отчетов?

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

В исходном коде необходимый CSS-файл собирается путем объединения всех CSS-файлов (находящихся в соответствующей каждой теме папке) в один. При этом на стороне сервера происходит подмена констант на соответствующие цвета для каждой темы, поэтому собирать пользовательский CSS-файл, используя исходный код, не очень удобно.
styles

Лучше всего скачать содержимое CSS-файла, который будет взят за основу, как базовый, прямо в браузере. Для этого нажмите F12, перейдите во вкладку Source. Вы сможете найти стили дизайнера и вьювера, а затем скачать их как файл:

css
После замены необходимых классов необходимо указать путь к пользовательскому CSS-файлу через свойство CustomCss, о котором мы писали выше.

Примеры глубокой кастомизации вьювера

Как мы уже упоминали, изменение в базовом CSS-файле позволит вам изменить внешний вид компонентов. Если же вам требуется более глубокая кастомизация, то есть, например, поменять кнопки местами, изменить расположение элементов, добавить пункт меню и так далее, необходимо использовать JavaScript-код. Примеры таких изменений во вьювере вы можете найти в нашей документации.
Если у вас остались вопросы, свяжитесь с нами.
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.