Виджет "Кнопка" (DataCube.Widgets.Button) может использоваться для различных целей: отправки форм, запуска процессов, отображения выпадающих списков и многого другого.
Виджет "Кнопка" предоставляет гибкие возможности настройки внешнего вида и поведения. Он может быть сконфигурирован как:
- Простая кнопка: Стандартный режим работы, активация по клику.
- Кнопка с двумя состояниями (Выключатель): Кнопка может находиться в состоянии "включено" или "выключено". При клике состояние переключается.
- Групповая кнопка: Является частью группы переключателей. При активации одной кнопки в группе остальные деактивируются.
1. Общие настройки (common):
- Показать фильтры (showFilters): (опционально) Определяет, будет ли виджет отображаться на панели фильтров.
- Показать индикатор загрузки (showLoader): Управляет отображением индикатора загрузки. Доступные значения:
never: Никогда не показывать.- Другие значения могут быть определены в будущем.
- Скрыть рамку виджета (hideHandle): (опционально, по умолчанию отмечено) Позволяет скрыть рамку вокруг виджета на панели управления.
- Показывать меню виджета (widgetMenu): (опционально) Отображать меню виджета (шестерёнка) на панели.
2. Источник данных (source):
- Данные (source): Указывает источник данных, к которому привязан виджет.
3. Отображение (content):
- Режим (contentMode): Определяет режим отображения содержимого кнопки.
- Стандартный (contentModeSimple):
- Надпись (contentText): Текст, отображаемый на кнопке. Может быть привязан к источнику данных.
- Иконка (contentIcon): (опционально) Добавляет иконку на кнопку.
- Выбрать иконку (contentIconSource): Выбор источника иконки.
- из набора иконок (contentIconSourceFont):
- Иконка (contentIconFontData): Выбор иконки из набора. Используется редактор
JSB.TPL.FontIconPicker.
- из файла (contentIconSourceFile):
- Иконка (contentIconFileData): Загрузка иконки из файла. Используется редактор
JSB.Widgets.ImageLoader.
- Изменить иконку при наведении (contentHoverIconFileData): (опционально) Иконка, отображаемая при наведении.
- Изменить иконку при нажатии (contentActiveIconFileData): (опционально) Иконка, отображаемая при нажатии.
- Расположение (contentIconPosition): Положение иконки относительно текста.
слева от текста (contentIconPositionLeft)справа от текста (contentIconPositionRight)
- Отступ от текста (px) (contentIconPadding): (по умолчанию 4) Расстояние между иконкой и текстом.
- Установить размеры (contentIconSize): (опционально) Задает размеры иконки.
- Ширина (px) (contentIconWidth): (по умолчанию 20) Ширина иконки.
- Высота (px) (contentIconHeight): (по умолчанию 20) Высота иконки.
- Выравнивание (contentAlign): (по умолчанию
center) Выравнивание текста и иконки внутри кнопки.
- Встроенный виджет (contentModeWidget):
- Виджет (contentWidget): Встраивание другого виджета в качестве содержимого кнопки.
4. Поведение (behavior):
-
Режим работы (behaviorMode):
- Простая кнопка (behaviorModeSimple): Стандартный режим.
- Кнопка с двумя состояниями (behaviorModeTrigger):
- Начальное состояние (behaviorTriggerInitialState):
не установлено (behaviorTriggerInitialStateNormal)нажатое (behaviorTriggerInitialStateOn)
- Выполнять действия активации (behaviorTriggerInitialStateOnDoActions): (опционально) Выполнять действия при установке этого состояния.
отжатое (behaviorTriggerInitialStateOff)зависит от данных (behaviorTriggerInitialStateDataDriven)
- Переменные (behaviorTriggerInitialStateDataDrivenVariables): (множественный выбор) Поля из источника данных, значения которых будут использоваться в условии.
- Поле (varField): Поле данных.
- Изменить имя переменной (varName): (опционально) Задать своё имя для переменной.
- Условие активации (behaviorTriggerInitialStateDataDrivenExpression): JavaScript выражение, при истинности которого кнопка будет активна.
- Выполнять действия активации (behaviorTriggerInitialStateDataDrivenDoActions): (опционально) Выполнять действия при активации, если условие
behaviorTriggerInitialStateDataDrivenExpression истинно.
- Групповая кнопка (behaviorModeSwitch):
- Группа (behaviorSwitchGroup): (по умолчанию
group01) Название группы, к которой принадлежит кнопка. Кнопки с одинаковым названием группы образуют переключатель.
- Включена по умолчанию (behaviorSwitchActiveByDefault): (опционально) Если включено, то кнопка будет активна сразу после отрисовки.
- Выполнять действия активации(behaviorSwitchActiveByDefaultDoActions): (опционально) Выполнять действия при установке этого состояния.
- Разрешать отключать (behaviorSwitchAllowDeactivate): (опционально) Если включено, то кнопку можно деактивировать, даже если другие кнопки в группе неактивны.
-
Действия при клике/активации (behaviorClick):
- Установить кросс-фильтр (behaviorSetFilter): (опционально, множественный выбор) Позволяет добавить фильтр при клике на кнопку.
- Измерение/параметр (cubeField): Выбор измерения или параметра.
- Оператор (filterOp): Выбор оператора сравнения (
=, ≠, <, >, ≤, ≥).
- Фильтрующее значение (filterField): Значение, по которому будет фильтроваться.
- Логика внутри группы (filterLogic): Логический оператор, применяемый внутри группы фильтров (
И / ИЛИ).
- Скрытый фильтр (filterHidden): (опционально) Если включено, фильтр не будет отображаться на панели фильтров.
- Отобразить выпадающее окно/список (behaviorDropDown): (опционально) Позволяет отобразить выпадающее окно или модальное окно при клике на кнопку.
- Виджет (behaviorDropDownWidget): Виджет, который будет отображен в выпадающем окне.
- Режим отображения (behaviorDropDownMode):
выпадающее окно (behaviorDropDownModeDropDown)модальное окно (behaviorDropDownModePopup)
- Выравнивание (behaviorDropDownAlign): Выравнивание окна относительно кнопки.
- Ширина (px) (behaviorDropDownWidth): (по умолчанию 300) Ширина окна.
- Высота (px) (behaviorDropDownHeight): (по умолчанию 300) Высота окна.
- Закрывать окно (behaviorDropDownClose): Условия закрытия окна.
при установке фильтра (behaviorDropDownCloseOnFilter)вручную пользователем (behaviorDropDownCloseByUser)по сообщению (behaviorDropDownCloseByMessage)
- Уникальный ключ (behaviorDropDownCloseByMessageMsgKey): Идентификатор сообщения для закрытия окна.
- Установить иконку справа (behaviorDropDownIcon) (опционально) Иконка, которая будет отображаться в правой части кнопки
- Выбрать иконку (behaviorDropDownIconSource): Выбор источника иконки.
* из набора иконок (behaviorDropDownIconSourceFont):
- Иконка (behaviorDropDownIconFontData): Выбор иконки из набора. Используется редактор
JSB.TPL.FontIconPicker. По умолчанию fas fa-angle-down
* **из файла (behaviorDropDownIconSourceFile):**
* **Иконка (behaviorDropDownIconFileData):** Загрузка иконки из файла. Используется редактор `JSB.Widgets.ImageLoader`.
* **Изменить иконку при наведении (behaviorDropDownHoverIconFileData):** (опционально) Иконка, отображаемая при наведении.
* **Изменить иконку при нажатии (behaviorDropDownActiveIconFileData):** (опционально) Иконка, отображаемая при нажатии.
- Отступ от края (px) (behaviorDropDownIconPadding): (по умолчанию 6) Расстояние между иконкой и краем.
- Установить размеры (behaviorDropDownIconSize): (опционально) Задает размеры иконки.
- Ширина (px) (behaviorDropDownIconWidth): (по умолчанию 20) Ширина иконки.
- Высота (px) (behaviorDropDownIconHeight): (по умолчанию 20) Высота иконки.
- Уведомлять API-окружение (behaviorCallApiOnClick): (опционально) Отправляет уведомление API-окружению при клике.
- Поля аргументов (rowClickParams): (множественный выбор) Поля из источника данных, которые будут переданы в уведомление.
- Выполнить операцию (clickToolbarAction): (опционально) Вызов операции при клике на кнопку.
-
Действия при наведении (behaviorHover):
- Отобразить всплывающее окно (тултип) (behaviorTooltipWidget): (опционально) Позволяет показать тултип при наведении на кнопку.
- Содержимое окна(behaviorTooltipWidgetType):
- Простой тултип (behaviorSimpleTooltip):
- Содержимое (behaviorSimpleTooltipContent): Текст тултипа.
- Встроенный виджет(behaviorTooltipNewWidget):
- Встроенный виджет(embeddedWidget): виджет, отображаемый в тултипе.
- Ширина (px) (behaviorEmbeddedTooltipWidth): (по умолчанию 400) Ширина окна.
- Высота (px) (behaviorEmbeddedTooltipHeight): (по умолчанию 300) Высота окна.
- Виджет визуализации(behaviorTooltipExistedWidget):
- Виджет визуализации(completeWidget): выбор готового виджета визуализации.
- Ширина (px) (behaviorCompleteTooltipWidth): (по умолчанию 400) Ширина окна.
- Высота (px) (behaviorCompleteTooltipHeight): (по умолчанию 300) Высота окна.
- Уведомлять API-окружение (behaviorCallApiOnHover): (опционально) Отправляет уведомление API-окружению при наведении.
- Поля аргументов (rowClickParamsHover): (множественный выбор) Поля из источника данных, которые будут переданы в уведомление.
- Выполнить операцию (hoverToolbarAction): (опционально) Вызов операции при наведении на кнопку.
5. Панель инструментов (toolbarActions):
- toolbarActionGroupMenu: Скрытое поле, для работы с группой операций
- toolbarActionRowMenu: Скрытое поле, для работы с операциями над строкой.
6. Стили (backStyle):
- wDrillDown: Скрытое поле
- Фон (wBackground):
- Цвет фона (wBackgroundColor): (опционально, по умолчанию
rgb(79, 123, 163)) Цвет фона кнопки.
- Граница (wBorder):
- Тип границы (wBorderType): (по умолчанию
solid) Тип границы.
- Цвет границы (wBorderColor): (по умолчанию
rgb(79, 123, 163)) Цвет границы.
- Толщина границы (wBorderWidth): (по умолчанию 2) Толщина границы в пикселях.
- Текст (wText):
- Цвет текста (wTextColor): (опционально, по умолчанию
rgb(255,255,255)) Цвет текста на кнопке.
- Скругление углов (wCorners):
- Скругление всех углов (wCornersAll): (по умолчанию 6) Радиус скругления углов в пикселях.
- Изменения при наведении (wHoverStyle):
- Цвет фона (wHoverBackgroundColor): (опционально, по умолчанию
rgb(255,255,255)) Цвет фона при наведении.
- Изображение фона (wHoverBackgroundImageIcon): (опционально) Изображение фона при наведении.
- Цвет текста (wHoverTextColor): (опционально, по умолчанию
rgb(79, 123, 163)) Цвет текста при наведении.
- Толщина обводки(px) (wHoverBorderWidth): (опционально) Толщина обводки при наведении.
- Цвет обводки (wHoverBorderColor): (опционально) Цвет обводки при наведении.
- Прозрачность (wHoverTransparency): (опционально, по умолчанию 0) Прозрачность кнопки при наведении.
- CSS-стиль (wHoverCss): (опционально) Дополнительные CSS стили при наведении.
- Изменения при нажатии (wActiveStyle):
- Цвет фона (wActiveBackgroundColor): (опционально, по умолчанию
rgb(255,255,255)) Цвет фона при нажатии.
- Изображение фона (wActiveBackgroundImageIcon): (опционально) Изображение фона при нажатии.
- Цвет текста (wActiveTextColor): (опционально, по умолчанию
rgb(79, 123, 163)) Цвет текста при нажатии.
- Толщина обводки(px) (wActiveBorderWidth): (опционально) Толщина обводки при нажатии.
- Цвет обводки (wActiveBorderColor): (опционально) Цвет обводки при нажатии.
- Прозрачность (wActiveTransparency): (опционально, по умолчанию 0) Прозрачность кнопки при нажатии.
- CSS-стиль (wActiveCss): (опционально) Дополнительные CSS стили при нажатии.
7. Дополнительные возможности:
- Передать состояние кнопки (translateButtonState): Доступен при использовании операции
Workflow_Integration_RunProcessWidgetOperation. Позволяет передать текущее состояние кнопки (активна/неактивна) в порт данных.
- События (events): Виджет генерирует события
click, activate, deactivate, mouseOver, mouseOut.
Виджет "Кнопка" является мощным и гибким инструментом для построения интерактивных интерфейсов в DataCube. Широкий спектр настроек позволяет адаптировать его под любые задачи и требования.