Компоненты настроек
8 800 555-89-02
Войти
For developers
CTRL+K
Standalone2410

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

В этой статье
  • Компоненты настроек
  • Input
  • InputNumber
  • InputMarkdown
  • InputRange
  • Switch
  • Select
  • Formula
  • TypedFormula
  • ColorPicker
  • EventsColor
  • DisplayCondition
  • FormattingTemplate

Компоненты управления настройками (контролы) — это компоненты, которыми можно сконфигурировать панель настроек. В данном разделе представлено описание существующих системных контролов и их свойств (props) с помощью которых можно конфигурировать компоненты настроек. Жирным шрифтом выделены те свойства, которые обязательно должны присутствовать в конфигурации. Более подробную информацию по типам данных, используемых для настройки, можно узнать из библиотеки @infomaximum/widget-sdk.

Необходимая информация о каждом поле записана в виде таблицы со следующими колонками:

  • Свойство — имя свойства
  • Описание — краткое описание того, за что данное поле отвечает
  • Тип значения — тип значения свойства
  • Значение по умолчанию — значение поля по умолчанию

Также в описании каждого поля указаны:

  • Тип значения поля — тип значения поля, который определен в настройках виджета (settings)
  • Пример конфигурации — пример конфигурирования компонента настроек в методе createPanelDescription
  • Пример заполнения — пример заполнения настроек значением по умолчанию в методе fillSettings

Input

Поле позволяет вводить любой текст. Тип значения поля — String.

Input

СвойствоОписаниеТип значенияЗначение по умолчанию
isBorderedИмеет ли поле границы (обводку)booleantrue
disabledИмеет ли поле состояние заблокированоbooleanfalse
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.

InputNumber

СвойствоОписаниеТип значенияЗначение по умолчанию
minМинимальное значениеnumber-
maxМаксимальное значениеnumber-
placeholderПодсказка для поляstring-
stepЧисло, на которое увеличивается или уменьшается текущее значение. Это может быть целое или десятичное числоnumber1
unitLabelТекстовая метка, которая отображает любую контекстную информацию о поле, например, единицы измеренияstring-
borderedИмеет ли поле границы (обводку)booleanfalse
isClearableВозможность очистить полеbooleanfalse
disabledМожет ли поле быть заблокированнымbooleanfalse
Пример конфигурации поля
Пример заполнения
{
  key: "limit",
  accessor: "limit",
  type: EControlType.inputNumber,
  title: "Лимит",
  props: {
    placeholder: "10",
    min: 0,
    max: 500
  }
}

InputMarkdown

Поле обеспечивает подсветку синтаксиса, что улучшает визуальное восприятие и понимание структуры и форматирования текста, созданного с использованием Markdown. Также доступна всплывающая подсказка (при клике на иконку) с описанием поддерживаемого синтаксиса. Тип значения поля — String.

InputMarkdown

Пример конфигурации поля
Пример заполнения
{
  key: "markdown",
  accessor: "markdown",
  type: EControlType.inputMarkdown,
  title: "Markdown"
}

InputRange

Поле позволяет вводить диапазон чисел. Тип значения поля — { min?: number; max?: number; unit: string }.

InputRange

СвойствоОписаниеТип значенияЗначение по умолчанию
unitsЕдиницы измерения для диапазона значений{ key: string; label: string }[]-
Пример конфигурации поля
Пример заполнения
{
  key: "range",
  accessor: "range",
  type: EControlType.inputRange,
  title: "Время",
  props: {
    units: [
      {
        key: "seconds",
        label: "Секунды",
      },
      {
        key: "minutes",
        label: "Минуты",
      },
    ],
  },
}

Switch

Поле представляет из себя переключатель. Тип значения поля — Boolean.

Switch

СвойствоОписаниеТип значенияЗначение по умолчанию
sizeРазмер переключателяsmall
default
small
Пример конфигурации поля
Пример заполнения
{
  key: "isShowColor",
  accessor: "isShowColor",
  type: EControlType.switch,
  title: "Отображать цвет",
}

Select

Поле с возможностью выбора значения из списка опций. Тип значения поля — String.

Select

СвойствоОписаниеТип значенияЗначение по умолчанию
placeholderПодсказка для поляstring"Выберите из списка"
optionsСписок опций({ label: string, value: string, disabled: boolean })[]-
disabledИмеет ли поле состояние заблокированоbooleanfalse
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.

Formula

СвойствоОписаниеТип значенияЗначение по умолчанию
disabledИмеет ли поле состояние заблокированоbooleanfalse
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;}.

TypedFormula

СвойствоОписаниеТип значенияЗначение по умолчанию
disabledИмеет ли поле состояние заблокированоbooleanfalse
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 — цвета выбираются автоматически

ColorPicker

СвойствоОписаниеТип значенияЗначение по умолчанию
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

Поле позволяет гибко настроить отображение цветов событий у процесса.

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

Поле позволяет настроить условие отображения виджета.

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.

FormattingTemplate

СвойствоОписаниеТип значенияЗначение по умолчанию
formatФормат данных, который будет указан в поле (влияет на подсказку)EFormatTypes-
Пример конфигурации поля
Пример заполнения
{
  key: "formattingTemplate",
  accessor: "formattingTemplate",
  type: EControlType.formattingTemplate,
  props: {
    format: EFormatTypes.DATETIME,
  },
}

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

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