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

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

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

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

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

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

Input

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

{
  key: "text",
  accessor: "text",
  type: EControlType.input,
  title: "Input",
  props: {
  placeholder: "Введите текст",
  maxLength: 40
  }
}

InputNumber

Поле позволяет вводить число. С помощью передачи дополнительных свойств могут быть настроены минимальное и максимальное значение поля. Тип значения поля — Number.

{
  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 }.

{
  key: "range",
  accessor: "range",
  type: EControlType.inputRange,
  title: "Время",
  props: {
    units: [
      {
        key: "seconds",
        label: "Секунды",
      },
      {
        key: "minutes",
        label: "Минуты",
      },
    ],
  },
}

Switch

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

{
  key: "isShowColor",
  accessor: "isShowColor",
  type: EControlType.switch,
  title: "Отображать цвет",
}

Select

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

{
  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.

{
  key: "formula",
  accessor: "formula",
  type: EControlType.formula,
  title: "Формула",
  props: {
    disabled: false,
    tabsConfig: ["columns", "colors", "functions", "variables"],
  },
},

TypedFormula

Поле с возможностью написать формулу и получить тип данных для этой формулы. При нажатии на поле открывается редактор, в котором можно выбрать формулу из списка системных, или выбрать колонки таблицы, которая была добавлена в модель данных. Тип значения поля — {formula: string; dataType: ESimpleDataType;}.

{
  key: "typedFormula",
  accessor: "typedFormula",
  type: EControlType.typedFormula,
  title: "Формула с типом данных",
  props: {
    disabled: false,
    tabsConfig: ["columns", "colors", "functions", "variables"],
  },
},

ColorPicker

Поле с возможностью выбора цвета. Чтобы настроить поле, используйте следующие режимы работы:

• FORMULA — вычислить цвет по формуле
• BASE — базовый режим с возможностью выбора цвета из палитры цветов
• GRADIENT — выбор градиента
• AUTO — цвета выбираются автоматически

Тип значения поля:

{
  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,
  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.

{
  key: "formattingTemplate",
  accessor: "formattingTemplate",
  type: EControlType.formattingTemplate,
  props: {
    format: EFormatTypes.DATETIME,
  },
}