Настройки виджета
Настройка виджета производится пользователем через панель настроек. Разработчики могут конфигурировать эту панель, определяя набор полей различных типов для удобного управления настройками виджета.
Для работы с настройками виджета в IDefinition представлено 2 метода:
createPanelDescriptionдля конфигурации панели. Метод возвращает конфигурацию панели настроек виджета интерфейсаIPanelDescriptionfillSettingsдля инициализации настроек виджета. Метод создаёт поля в объекте настроек и заполняет их значениями по умолчанию) класса, реализующего интерфейс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 ??= [];
}
}
В результате получаем панель настроек с возможностью добавить заголовок, а также разрезы и меры.
Была ли статья полезна?