Кнопка

В этой статье

Кнопка

Виджет позволяет добавить в дашборд панель с кнопками, при нажатии на которые выполняется назначенное действие по клику.

Заметка

На кнопку можно назначить несколько действий. В этом случае при нажатии на кнопку отображается меню со всеми добавленными действиями.

Настройка данных

Чтобы настроить виджет, добавьте его в образ и в боковой панели справа нажмите + Кнопка.

Для виджета можно указать заголовок и описание. Для кнопки можно настроить:

Название
Тип — Основная, Второстепенная или Ссылка. От типа кнопки зависит ее вид на панели
Действия по клику
Настройки отображения:
- Цвет кнопки (только для типа Основная)
- Цвет текста
- Цвет обводки (только для типа Второстепенная)
- Подсказка (текст, который появляется при наведении на кнопку в режиме просмотра). Максимальная длина — 160 символов

Чтобы удалить кнопку, нажмите Удалить.

Способы ввода для действий по клику в виджете Кнопка

Доступные способы ввода зависят от выбранного действия по клику:

Выполнить скрипт:
- Из переменной
- Из модели данных
- Задать агрегацией
- Ввести вручную
- Статический список
- Динамический список
Обновить переменную:
- Из переменной
- Задать агрегацией
Открыть образ:
- Из переменной
- Задать агрегацией

Если использовать способ ввода Ввести вручную, Статический список или Динамический список, то при нажатии на Кнопку в режиме просмотра появляется модальное окно для ввода или выбора параметров. Чтобы действие по клику сработало, внесите необходимые изменения и нажмите Выполнить.

Дополнительно при настройке действия Выполнить скрипт и использовании способа ввода Динамический список доступен переключатель Учитывать фильтры. При его использовании в параметр передаются данные с учетом фильтров, назначенных в режиме просмотра.

Заметка

Использовать способы ввода для действия по клику Перейти к URL невозможно.

Настройка отображения

Помимо основных настроек отображения, для кнопки внутри виджета можно задать вертикальное и горизонтальное выравнивание. При вертикальном выравнивании кнопку можно расположить по верхнему краю, по центру или по нижнему краю. При горизонтальном выравнивании — слева, по центру, справа или на всю ширину панели.

Настройка виджета в YAML

Виджет можно редактировать не только в образе, но и в YAML-редакторе. Чтобы добавить виджет, используйте блок buttons. В таблицах ниже представлены ключи и значения, которые используются для настройки.

Настройки данных в YAML

Ключ	Тип	Определение
name	string	Название
buttonType	enum	Тип кнопки - `primary` — основная - `primary-outlined` — второстепенная - `link` — ссылка
onClick	—	Действие по клику
hint	string	Подсказка для кнопки

Настройка цвета в YAML

Чтобы указать цвет кнопки и текста, используйте блок color. В блоке используются ключи и значения, указанные в таблице.

Ключ	Тип	Определение
mode	enum	Режим окрашивания - `AUTO` — авто - `BASE` — базовый
value	string	HEX-код цвета

В блоке borderColor с помощью ключей mode и value указывается цвет обводки для второстепенной кнопки.

Настройки отображения в YAML

Ключ	Тип	Определение
verticalAlign	enum	Вертикальное выравнивание: - `TOP` — сверху - `CENTER` — по центру - `BOTTOM` — снизу
horizontalAlign	enum	Горизонтальное выравнивание: - `LEFT` — слева - `CENTER` — по центру - `RIGHT` — справа - `FILL` — по ширине

Пример настроенного виджета в YAML-редакторе

  - key: button
    apiVersion: "17"
    type: BUTTON
    settings:
      buttons:
        - name: Обновить список магазинов
          onClick:
            - type: UPDATE_VARIABLE
              name: Обновить переменную
              variables:
                - inputMethod: VARIABLE
                  sourceVariable: Магазины
                  name: Магазины
          buttonType: primary
      horizontalAlign: LEFT
      verticalAlign: TOP
      sorting: []

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

Да

Нет

Текст

Сортировка