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

В этой статье

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

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

Для работы с настройками виджета в IDefinition представлено 2 метода:

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

Основные поля в конфигурации панели

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

Поле displayRecords содержит конфигурацию настроек отображения виджета, которая доступна на вкладке настройки визуального отображения.

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

Пример конфигурации панели для добавления заголовка

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

Заметка

Заголовок — стандартная функциональность виджета, которую можно добавить с помощью передачи флага useTitle через конфигурацию панели. В примере ниже показано, как добавить заголовок вручную. Это поможет понять, как добавлять другие поля для управления настройками виджета.

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

export interface WidgetSettings extends IBaseWidgetSettings {
  title: string;
}

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

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

Панель настроек содержит:

Поле для ввода заголовка интерфейса IControlRecord. Тип поля input
Разделитель интерфейса IDividerRecord. Тип поля divider. Разделитель позволяет визуально отделить поля друг от друга

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

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

Добавление разрезов и мер в панель

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

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

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

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

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

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

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

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

Да

Нет

Определение виджета

Компоненты настроек