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

Пользователь может изменить высоту и ширину виджета в режиме конструирования. Минимальная ширина виджета - 3 блока, минимальная высота виджета - 2 блока. Виджет должен поддерживать изменение высоты и ширины контейнера. Для этого в опции прикладного шаблона виджета приходят следующие значения:
- widgetHeight - высота виджета в px;
- widgetWidth - ширина виджета в px. Минимальное значение 360px.
В зависимости от полученных опций ширины и высоты, прикладной разработчик должен перестроить содержимое виджета. Так же разработчик может задать минимальную высоту виджета. Для этого в поле meta описать опцию:
- minHeight:
number
- минимальная высота виджета в блоках. Нужно использовать только тогда, когда это действительно нужно и с меньшей высотой ваш виджет не может работать.
// TypeScript
{
...
"meta": {
"minHeight": 3
},
...
}
На примере ниже, виджет занимает минимальную ширину в 3 блока и минимальную высоту в 2 блока. В режиме конструирования размер виджета можно изменить потянув за нижнюю или боковую границу.



Настройка отступов внутри виджета
Для настройки горизонтальных отступов внутри виджета дашборда, в поле meta можно задать опцию padding.
// TypeScript
{
...
"meta": {
"padding": {
"left": "null",
"right": "null"
}
},
...
}
В примере выше, у виджета не будет отступов между краями и прикладным контентом.
Возможные варианты значения отступов: null, 3xs, 2xs, xs, s, st, m, l, xl, 2xl, 3xl; Каждый из вариантов соответствует значению платформенной css переменной --offset_<value>.
Настройка заголовка
Заголовок виджета располагается в верхней части виджета, отображается средствами платформы. Текст заголовка - значение, указанное в поле info.title.
// TypeScript
{
...
"info": {
"title": "Заголовок"
},
...
}

Для настройки заголовка, в поле meta можно задать опции указанные ниже.
- headerContentTemplate:
string
- шаблон, который будет отображаться справа от заголовка виджета.
// TypeScript
{
...
"meta": {
"headerContentTemplate": "HowEasy/templates/headerContentTemplate"
},
...
}

- headerVisible:
boolean
- флаг отображения заголовка:false
- не показывать заголовок.
Скрывается не только текст заголовка, а целиком верхняя область заголовка виджета, при этом маркер не скрывается.
Скрывать стандартный заголовок нужно только тогда, когда содержимое виджета должно отображаться на одном уровне с заголовком.

Если вы скрыли свой заголовок, вы обязаны добавить к себе верстку стандартный заголовк с помощью использования компонента Dashboard.dashboard:Heading.
Dashboard.dashboard:Heading - компонент заголовка, который необходимо разместить в прикладном контенте виджета. Компонент не имеет опций. Все необходимые настройки в заголовок будут переданы через контекст автоматически.
// TypeScript
{
...
"meta": {
"headerVisible": false
},
...
}
- getTitleCallback:
string
- путь до функции, которая вернет заголовок виджета. Принимает на вход загруженные данные виджета. Возвращает заголовок виджета типа string. Применяется в случае, когда заголовок виджета зависит от настроек виджета.
// TypeScript
{
...
"meta": {
"getTitleCallback": "HowEasy/callbacks/getTitleCallback"
},
...
}
- headerClickCallback:
string
- путь до функции, которая будет вызвана при клике на заголовок виджета. Используется для перехода по ссылке, открытия окна и т.д.
// TypeScript
{
...
"meta": {
"headerClickCallback": "HowEasy/callbacks/headerClickCallback"
},
...
}
Принимает на вход:
- id - идентификатор виджета,
- props - настройки виджета,
- opener - открывающий контрол.
Ограничение контента виджета по высоте
При изменении высоты виджета в режиме конструирования, контент виджета обрезается в соответствии с установленной высотой. Если контент виджета больше минимальной высоты в 2 блока, должна быть описана функция moreButtonClickCallback в поле meta. В этом случае в виджете средствами платформы отображается кнопка "Раскрыть". В обработчике moreButtonClickCallback нужно открыть окно, в котором отобразится полная информация, представленная в виджете.

- moreButtonClickCallback:
string
- путь до функции, которая будет вызвана при клике на кнопку раскрытия при обрезании части контента виджета.
Принимает на вход:
- id - идентификатор виджета,
- props - настройки виджета,
- opener - открывающий контрол.
// TypeScript
{
...
"meta": {
"moreButtonClickCallback": 'HowEasy/callbacks/moreButtonClickCallback'
},
...
}
Настройка пустого состояния
Возможна ситуация, когда в виджете нет данных для отображения. Пользователь в режиме конструирования может настроить скрытие пустого виджета.

Если пользователь выберет "Скрывать виджет, если в нём нет данных" и функция isEmptyCallback вернёт true, то в режиме просмотра виджет будет скрыт, а в режиме конструирования будет отображен с шаблоном designtimeConfig. isEmptyCallback указать в поле meta.
- isEmptyCallback:
string
- путь до функции, которая будет вызвана при проверке пустоты данных для виджета. Функция должна быть синхронная и возвращать true или false в зависимости от наличия данных в виджете для отображения.
Принимает на вход:
- загруженные данные виджета
- props - настройки виджета
// TypeScript
{
...
"meta": {
"isEmptyCallback": 'HowEasy/callbacks/isEmptyCallback'
},
...
}
Настройка виджета со скроллом
Есть виджеты, которые подгружают данные по скроллу (пример - виджет "Новости"). Такой виджет всегда располагается в последнем блоке дашборда в скроллируемой области. Если разрабатываете виджет со скроллом, установите в поле meta.allowScroll значение true.
- allowScroll:
boolean
- признак того, что виджет поддерживает подгрузку по скроллу.
// TypeScript
{
...
"meta": {
"allowScroll": true
},
...
}
Настройка фона виджета
В редакторе дашбордов, для всех виджетов можно настроить фон с помощью стандартного диалога редактирования.
При выборе фона, виджет проставляет соответствующий цвет в css переменную --widget_background-color. Эту переменную можно использовать в прикладной верстке виджета, например для того, чтобы сделать замыливание контента.
Пример использования css переменной --widget_background-color:
.myClass {
...
background: linear-gradient(to top, var(--widget_background-color), transparent);
}
В опцию color виджуте будет передан выбранный стиль. В зависимости от стиля виджета, вы можете настроить дочерние контролы, например список.
Базовые свойства виджета
У всех виджетов для дашборда есть базовые свойства:
- height: number - Высота виджета в блоках. Подробнее про размеры виджета читайте в разделе "Настройка размера виджета".
- layout: Dashboard/interface:ILayoutConfig - Раскладка виджета. Определяет наличие маркера, фона и заголовка.
- emptyHidden: boolean - Определяет, должен ли скрываться виджет, при отсутствии данных. Применяется только при указании поля meta.isEmptyCallback.
- color: string - Стиль виджета.
От указанного стиля виджета, зависит цвет маркера и цвет фона виджета. Возможны 8 стилей виджета:
- primary
- brand
- info
- danger
- success
- warning
- secondary
- unaccented
У всех базовых свойств есть значения по умолчанию:
- height = 4
- color = 'brand'
- layout = {heading: true, marker: true, background: true}
- emptyHidden = false
Значения базовых свойств приходят в опции виджета вместе со значениями прикладных свойств. Название опции соответствует названию свойства. Если для виджето свойство не настроено, то будете передано значение по умолчанию.
Базовые свойства виджета редактируются с помощью PropertyGrid вместе с прикладными свойствами:

Изменение значений по умолчанию для базовых свойств виджета
Значения по умолчанию можно изменить для своего виджета. Для этого нужно при описании виджета в .widget файле указать нужное свойство и указать для него необходимое defaultValue.
Пример изменения свойств по умолчанию:
// TypeScript
{
...
"propTypes": [{
"name": "color",
"defaultValue": "success"
}, {
"name": "layout",
"defaultValue": {"heading": false, "marker": true, "background": true}
}, {
"name": "height",
"defaultValue": 3
}, {
"name": "emptyHidden",
"defaultValue": true
}]
...
}
Скрытие категорий уведомлений при отображении виджета
Если ваш виджет дублирует определенные категории уведомлений, вы можете их указать при описании виджета. В таком случае если ваш виджет будет построен одновременно с виджетом уведомлений, в виджете уведомлений не будет указанных категорий уведомлений.
Для настройки вам нужно в поле meta настроить поле hiddenNoticeCategories.
Список соответствия идентификаторов и названий категорий уведомлений можно посмотреть здесь.
// TypeScript
{
...
"meta": {
"hiddenNoticeCategories": [19, 23]
},
...
}