Войти

Настройка отображения виджета для дашборда

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

Настройка размера виджета

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

Пользователь может изменить высоту и ширину виджета в режиме конструирования. Минимальная ширина виджета - 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"
   },
   ...
}

Принимает на вход:

  1. id - идентификатор виджета,
  2. props - настройки виджета,
  3. opener - открывающий контрол.

Ограничение контента виджета по высоте

При изменении высоты виджета в режиме конструирования, контент виджета обрезается в соответствии с установленной высотой. Если контент виджета больше минимальной высоты в 2 блока, должна быть описана функция moreButtonClickCallback в поле meta. В этом случае в виджете средствами платформы отображается кнопка "Раскрыть". В обработчике moreButtonClickCallback нужно открыть окно, в котором отобразится полная информация, представленная в виджете.

  • moreButtonClickCallback: string- путь до функции, которая будет вызвана при клике на кнопку раскрытия при обрезании части контента виджета.

Принимает на вход:

  1. id - идентификатор виджета,
  2. props - настройки виджета,
  3. opener - открывающий контрол.
// TypeScript
{
   ...
   "meta": {
      "moreButtonClickCallback": 'HowEasy/callbacks/moreButtonClickCallback'
   },
   ...
}

Настройка пустого состояния

Возможна ситуация, когда в виджете нет данных для отображения. Пользователь в режиме конструирования может настроить скрытие пустого виджета.

Если пользователь выберет "Скрывать виджет, если в нём нет данных" и функция isEmptyCallback вернёт true, то в режиме просмотра виджет будет скрыт, а в режиме конструирования будет отображен с шаблоном designtimeConfig. isEmptyCallback указать в поле meta.

  • isEmptyCallback: string - путь до функции, которая будет вызвана при проверке пустоты данных для виджета. Функция должна быть синхронная и возвращать true или false в зависимости от наличия данных в виджете для отображения.

Принимает на вход:

  1. загруженные данные виджета
  2. 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]
   },
   ...
}
© 2022 Тензор. Все права защищены.