Компоненты настроек
Компоненты управления настройками (контролы) — это компоненты, которыми можно сконфигурировать панель настроек. В данном разделе представлено описание существующих системных контролов и их свойств (props
) с помощью которых можно конфигурировать компоненты настроек. Жирным шрифтом выделены те свойства, которые обязательно должны присутствовать в конфигурации. Более подробную информацию по типам данных, используемых для настройки, можно узнать из библиотеки @infomaximum/widget-sdk.
Необходимая информация о каждом поле записана в виде таблицы со следующими колонками:
- Свойство — имя свойства
- Описание — краткое описание того, за что данное поле отвечает
- Тип значения — тип значения свойства
- Значение по умолчанию — значение поля по умолчанию
Также в описании каждого поля указаны:
- Тип значения поля — тип значения поля, который определен в настройках виджета (
settings
) - Пример конфигурации — пример конфигурирования компонента настроек в методе
createPanelDescription
- Пример заполнения — пример заполнения настроек значением по умолчанию в методе
fillSettings
Input
Поле позволяет вводить любой текст. Тип значения поля — String.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
isBordered | Имеет ли поле границы (обводку) | boolean | true |
disabled | Имеет ли поле состояние заблокировано | boolean | false |
placeholder | Подсказка для поля | string | - |
maxLength | Максимальное количество символов, которое можно ввести в поле | number | - |
onFocus | Функция-обработчик фокуса на поле | function(e): void | - |
suffix | Добавление дополнительного текста (или символа) в конце поля | string null undefined | - |
{
key: "text",
accessor: "text",
type: EControlType.input,
title: "Input",
props: {
placeholder: "Введите текст",
maxLength: 40
}
}
InputNumber
Поле позволяет вводить число. С помощью передачи дополнительных свойств могут быть настроены минимальное и максимальное значение поля. Тип значения поля — Number.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
min | Минимальное значение | number | - |
max | Максимальное значение | number | - |
placeholder | Подсказка для поля | string | - |
step | Число, на которое увеличивается или уменьшается текущее значение. Это может быть целое или десятичное число | number | 1 |
unitLabel | Текстовая метка, которая отображает любую контекстную информацию о поле, например, единицы измерения | string | - |
bordered | Имеет ли поле границы (обводку) | boolean | false |
isClearable | Возможность очистить поле | boolean | false |
disabled | Может ли поле быть заблокированным | boolean | false |
{
key: "limit",
accessor: "limit",
type: EControlType.inputNumber,
title: "Лимит",
props: {
placeholder: "10",
min: 0,
max: 500
}
}
InputMarkdown
Поле обеспечивает подсветку синтаксиса, что улучшает визуальное восприятие и понимание структуры и форматирования текста, созданного с использованием Markdown. Также доступна всплывающая подсказка (при клике на иконку) с описанием поддерживаемого синтаксиса. Тип значения поля — String.
{
key: "markdown",
accessor: "markdown",
type: EControlType.inputMarkdown,
title: "Markdown"
}
InputRange
Поле позволяет вводить диапазон чисел. Тип значения поля — { min?: number; max?: number; unit: string }.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
units | Единицы измерения для диапазона значений | { key: string; label: string }[] | - |
{
key: "range",
accessor: "range",
type: EControlType.inputRange,
title: "Время",
props: {
units: [
{
key: "seconds",
label: "Секунды",
},
{
key: "minutes",
label: "Минуты",
},
],
},
}
Switch
Поле представляет из себя переключатель. Тип значения поля — Boolean.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
size | Размер переключателя | small default | small |
{
key: "isShowColor",
accessor: "isShowColor",
type: EControlType.switch,
title: "Отображать цвет",
}
Select
Поле с возможностью выбора значения из списка опций. Тип значения поля — String.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
placeholder | Подсказка для поля | string | "Выберите из списка" |
options | Список опций | ({ label: string, value: string, disabled: boolean })[] | - |
disabled | Имеет ли поле состояние заблокировано | boolean | false |
defaultValue | Значение по умолчанию | string | - |
status | Статус валидации поля | error warning | - |
{
key: "select",
accessor: "select",
type: EControlType.select,
title: "Список процессов",
props: {
options: [
"Process 1",
"Process 2",
"Process 3",
"Process 4"
].map(
(item, i) => ({
label: item,
value: item,
disabled: !(i % 2),
})
),
},
}
Formula
Поле с возможностью ввода формул. При нажатии на поле открывается редактор, в котором можно выбрать формулу из списка системных, или выбрать колонки таблицы, которая была добавлена в модель данных. Тип значения поля — String.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
disabled | Имеет ли поле состояние заблокировано | boolean | false |
titleModal | Заголовок редактора формул | string | Формула |
tabsConfig | Конфигурация вкладок доступных в редакторе | ('functions'/'columns'/'variables'/'colors')[] | ['columns', 'variables'] |
{
key: "formula",
accessor: "formula",
type: EControlType.formula,
title: "Формула",
props: {
disabled: false,
tabsConfig: ["columns", "colors", "functions", "variables"],
},
},
TypedFormula
Поле с возможностью написать формулу и получить тип данных для этой формулы. При нажатии на поле открывается редактор, в котором можно выбрать формулу из списка системных, или выбрать колонки таблицы, которая была добавлена в модель данных. Тип значения поля — {formula: string; dataType: ESimpleDataType;}.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
disabled | Имеет ли поле состояние заблокировано | boolean | false |
titleModal | Заголовок редактора формул | string | Формула |
tabsConfig | Конфигурация вкладок, доступных в редакторе | ('functions'/'columns'/'variables'/'colors')[] | ['columns', 'variables'] |
processGuid | Идентификатор процесса | string | - |
{
key: "typedFormula",
accessor: "typedFormula",
type: EControlType.typedFormula,
title: "Формула с типом данных",
props: {
disabled: false,
tabsConfig: ["columns", "colors", "functions", "variables"],
},
},
ColorPicker
Поле с возможностью выбора цвета. Чтобы настроить поле, используйте следующие режимы работы:
- FORMULA — вычислить цвет по формуле
- BASE — базовый режим с возможностью выбора цвета из палитры цветов
- GRADIENT — выбор градиента
- AUTO — цвета выбираются автоматически
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
defaultColor | Получить цвет по умолчанию для события | string | - |
modes | Режимы работы с полем | ('FORMULA'/'BASE'/'GRADIENT'/'AUTO')[] | ['BASE', 'FORMULA', 'GRADIENT'] |
processGuid | Идентификатор процесса, по которому будут настраиваться цвета событий | string | - |
Тип значения поля:
{
mode: EColorMode.FORMULA;
formula: string;
} |
{
mode: EColorMode.BASE;
value ? : string;
defaultColor ? : string;
} |
{
mode: EColorMode.GRADIENT;
startValue: string;
endValue: string;
} |
{
mode: EColorMode.AUTO;
}
{
key: "color",
accessor: "color",
type: EControlType.colorPicker,
title: "Цвет",
props: {
defaultColor: "#da1f2b",
modes: [
EColorMode.AUTO,
EColorMode.GRADIENT,
EColorMode.FORMULA
],
},
}
EventsColor
Поле позволяет гибко настроить отображение цветов событий у процесса.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
defaultColor | Получить цвет по умолчанию для события | string/function(eventName):string | - |
modes | Режимы работы с полем | ('FORMULA'/'BASE'/'GRADIENT'/'AUTO')[] | ['BASE', 'FORMULA', 'GRADIENT'] |
processGuid | Идентификатор процесса, по которому будут настраиваться цвета событий | string | - |
Тип значения поля:
{
defaultColor: string,
values: {
[eventName: string] : {
value: string
mode: string,
},
},
}
{
key: "eventsColor",
accessor: "eventsColor",
type: EControlType.eventsColor,
props: {
processGuid: settings.processGuid,
modes: [EColorMode.BASE],
defaultColor: "green",
},
}
DisplayCondition
Поле позволяет настроить условие отображения виджета.
Существует несколько режимов функционирования поля:
- Отключено — настройка отключена
- Переменная — если значением переменной является
truthy
, то виджет отображается. Еслиfalsey
, то виджет скрывается - Формула — если результатом выполнения формулы является
truthy
, то виджет отображается, еслиfalsey
, то виджет скрывается
Тип значения поля:
{
mode: EDisplayConditionMode.DISABLED;
} | {
mode: EDisplayConditionMode.FORMULA;
formula: string | null | undefined;
} | {
mode: EDisplayConditionMode.VARIABLE;
variableGuid: string | null | undefined;
variableValue: string | null | undefined;
}
{
key: "displayCondition",
accessor: "displayCondition",
type: EControlType.displayCondition,
}
FormattingTemplate
Для удобства ввода данных у поля есть всплывающая подсказка с примерами форматирования, возникающая при нажатии на иконку. Тип значения поля — String.
Свойство | Описание | Тип значения | Значение по умолчанию |
---|---|---|---|
format | Формат данных, который будет указан в поле (влияет на подсказку) | EFormatTypes | - |
{
key: "formattingTemplate",
accessor: "formattingTemplate",
type: EControlType.formattingTemplate,
props: {
format: EFormatTypes.DATETIME,
},
}
Была ли статья полезна?