Настройки виджета
8 800 555-89-02
Войти
For developers
CTRL+K
Standalone2407

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

В этой статье
  • Настройки виджета
  • Пример добавления конфигурации настроек данных

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

Изображение

Панель конфигурируется методами createPanelDescription (метод возвращает конфигурацию панели настроек виджета) и fillSettings (создаёт поля в объекте настроек и заполняет их значениями по умолчанию) класса, реализующего интерфейс IDefinition.

public createPanelDescription(context: IWidgetsContext, settings: WidgetSettings): IPanelDescription<WidgetSettings> {
  return {
    dataRecords: [],
    displayRecords: [],
    groupSetDescriptions: {}
  }
}

где:

  • dataRecords — содержит конфигурацию настроек данных виджета, которая доступна на вкладке настройки работы с данными

Изображение

  • groupSetDescriptions — позволяет конфигурировать настройки мер и разрезов

Изображение

Пример добавления конфигурации настроек данных

В качестве примера сконфигурируем настройку добавления заголовка. Для этого объявим класс Definition и реализуем интерфейс IDefinition.

import {
  EControlType,
  type IDefinition,
  type IGroupSettings,
  type IPanelDescription,
  type IWidgetsContext,
} from "@infomaximum/widget-sdk";

export interface WidgetSettings extends IBaseWidgetSettings {
  header: string;
}

export class Definition implements IDefinition<WidgetSettings, IGroupSettings> {
  public createPanelDescription(
    context: IWidgetsContext,
    settings: WidgetSettings
  ): IPanelDescription<WidgetSettings> {
    return {
      dataRecords: [
        {
          key: "header",
          accessor: "header",
          type: EControlType.input,
          props: { isBordered: false, placeholder: "Введите заголовок" },
        },
        { type: "divider" },
      ],
    };
  }

  public fillSettings(
    settings: Partial<WidgetSettings>,
    context: IWidgetsContext
  ) {
    settings.header ??= "";
  }
}

Панель настроек содержит поле для ввода заголовка (тип поля input) и разделитель (тип поля divider). Разделитель позволяет визуально отделить поля друг от друга.

Поля конфигурации:

  • key — уникальный идентификатор поля
  • accessor — ключ в объекте настроек виджета, по которому можно получать значения данного поля
  • type — тип контрола (EControlType.input). В данном случае поле для ввода текста с типом input
  • props — дополнительные свойства, такие как isBordered (граница поля) и placeholder
  • title — заголовок поля
  • description — рекурсивное определение конфигурации
  • shouldDisplay — функция-предикат, которая определяет, должен ли компонент отображаться на основе определенных условий или значений (например, учитывая значение другой настройки)

Для инициализации поля значением по умолчанию используется метод fillSettings . Данный метод ничего не возвращает, его основная задача — инициализировать поле значением по умолчанию, модифицируя объект настроек.

В результате получим поле, в котором можно указать заголовок для виджета.

Изображение

Значение этого поля можно получить из объекта settings по ключу, который является значением поля accessor.

Для возможности выбора разрезов и мер конфигурацию необходимо объявлять в секции groupSetDescriptions. Добавим возможность выбора разрезов и мер:

import {
  EControlType,
  EWidgetIndicatorType,
  type IBaseWidgetSettings,
  type IDefinition,
  type IGroupSettings,
  type IPanelDescription,
  type IWidgetDimension,
  type IWidgetDimensionHierarchy,
  type IWidgetMeasure,
  type IWidgetsContext,
} from "@infomaximum/widget-sdk";

export interface WidgetSettings extends IBaseWidgetSettings {
  header: string;
  dimensions: (IWidgetDimension | IWidgetDimensionHierarchy)[];
  measures: IWidgetMeasure[];
}

export class Definition implements IDefinition<WidgetSettings, IGroupSettings> {
  public createPanelDescription(
    context: IWidgetsContext,
    settings: WidgetSettings
  ): IPanelDescription<WidgetSettings> {
    return {
      dataRecords: [
        {
          key: "header",
          accessor: "header",
          type: EControlType.input,
          props: { isBordered: false, placeholder: "Введите заголовок" },
        },
        { type: "divider" },
      ],

      groupSetDescriptions: {
        dimensions: {
          accessor: "dimensions",
          title: "Разрезы",
          maxCount: Infinity,
          addButtons: [
            {
              title: "Добавить разрез",
              indicatorType: EWidgetIndicatorType.DIMENSION,
            },
          ],
        },
        measures: {
          accessor: "measures",
          title: "Меры",
          maxCount: Infinity,
          addButtons: [
            {
              title: "Добавить меру",
              indicatorType: EWidgetIndicatorType.MEASURE,
            },
          ],
        },
      },
    };
  }

  public fillSettings(
    settings: Partial<WidgetSettings>,
    context: IWidgetsContext
  ) {
    settings.header ??= "";
    settings.dimensions ??= [];
    settings.measures ??= [];
  }
}

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

Изображение

Была ли статья полезна?

Да
Нет
Предыдущая
Определение виджета
8 (800) 555-89-028 (495) 150-31-45team@infomaximum.com
Для бизнеса
© 20102024. ООО «Инфомаксимум»
Мы используем файлы cookies, чтобы сайт был лучше для вас.