Платформа 3V/Формы/Компоненты/Основные/Кнопка: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
 
(не показано 12 промежуточных версий 3 участников)
Строка 1: Строка 1:
−
Пример визуального отображения компонента:
+
{{DISPLAYTITLE:Кнопка}}
−
[[Файл:Кнопка.jpg|обрамить|слева]]
+
'''Кнопка''' - компонент представляющий собой командную кнопку, с помощью которой пользователь может вызывать выполнение какого-либо действия.
 +
[[Файл:Новый компонент.Кнопка.png|слева|450px|border]] <br clear="both" /><br>
 +
<div class="NavFrame collapsed">
 +
  <div class="NavHead"> Описание настроек компонента</div>
 +
  <div class="NavContent"> </br>
 +
{| class="wikitable" style="margin:auto; clear:both;"
 +
! Название в конструкторе !! Название в JSON !! Допустимый тип !! Описание
 +
|-
 +
| Описание для шаблона  || templateDescription || string || Наименования настроенного шаблона компонента. Не отображается на форме.
 +
|-
 +
| Заголовок  || localizedText. defaultValue  || string || Заголовок компонента. Располагается над компонентом.
 +
|-
 +
| Подсказка ||  localizedHint.defaultValue || string || Текст всплывающей подсказки. Подсказка всплывает при наведении на компонент
 +
|-
 +
| Тип || type || main, basic,<br> text|| Тип кнопки. [[Платформа_3V/Формы/Компоненты/Основные/Кнопка#Изменить тип кнопки|Подробнее...]].
 +
|-
 +
| Размер ||  size  || small, default,<br> medium, large || Выбор размера компонента. [[Платформа_3V/Формы/Компоненты/Основные/Кнопка#Изменить размер кнопки|Подробнее...]].
 +
|-
 +
| Иконка ||  icon || string ||  Иконка на кнопку. Источник [https://fonts.google.com/icons?selected=Material+Icons Material Icons]. [[Платформа_3V/Формы/Компоненты/Основные/Кнопка#Настроить иконку|Подробнее...]].
 +
|-
 +
| Расположение иконки ||  iconPosition|| left, top|| Расположение иконки в области кнопки.
 +
|-
 +
| Включено || enable  || bool || Флаг, при выключении которого с компонентном нельзя будет взаимодействовать.
 +
|-
 +
| Отображать ||  visible || bool || Флаг, при включении которого компонент будет отображаться на форме
 +
|-
 +
| Выполнить действие <br>при изменении значения ||  doActionOnChangeValue || bool || Флаг, включении которого изменение в компоненте будет сохраняться автоматически
 +
|-
 +
| Действия ||  action || шаблон || Создание действий на компонент.
 +
|-
 +
| Правила ||  enableExpressionIds/visibleExpressionIds || шаблон || Создание правил на компонент. Существуют правила доступности редактирования и видимости.
 +
|-
 +
|}
 
<br>
 
<br>
−
<br>
+
</div></div></div><br>
−
<br>
 
−
<br>
 
−
<br><br>
 
  
−
== Свойства и методы настройки компонента: ==
+
== Добавить кнопку ==
−
 
+
Элемент можно добавить через конструктор<br>
−
{| class="wikitable"
+
[[Файл:Добавление элемента через конструктор.png]] <br clear="both" /><br>
 +
== Настроить заголовок ==
 +
Для настройки заголовка достаточно задать его в настройке "Заголовок". Дефолтное значение заголовка "Кнопка"<br>
 +
[[Файл:Кнопка.Заголовок.png]]<br clear="both"><br>
 +
== Настроить подсказку ==
 +
Для настройки всплывающего окна при наведении на поле достаточно задать его текст в настройке "Подсказка"
 +
== Настроить тип кнопки==
 +
{| class="wikitable" clear:both;"
 +
|+ Соответствие типа
 
|-
 
|-
−
! Наименование настройки в интерфейсе !! Наименование свойства !! Тип !! Описание
+
! Название в конструкторе !! Название в JSON !! Внешний вид
 
|-
 
|-
−
| Заголовок || label || строковый || Заголовок компонента
+
| Главная || main || [[Файл:Кнопка.Главная.png]]
 
|-
 
|-
−
| Иконка || faIcon || строковый || Иконка
+
| Базовая || basic || [[Файл:Кнопка. Базовая.png]]
 
|-
 
|-
−
| Положение иконки || || || Выбор положения иконки
+
| Текстовая || text || [[Файл:Кнопка.Текстовая.png]]
 
|-
 
|-
−
| Отображать || visible || логический || Флаг, отвечающий за видимость кнопки
+
|}
 +
 
 +
 
 +
== Изменить размер кнопки ==
 +
Размер элемента следует задавать в настройке "Размер".
 +
{| class="wikitable" clear:both;"
 +
|+ Соответствие размера
 
|-
 
|-
−
| Включено || enable || логический || Флаг, отвечающий за доступность кнопки
+
! Название в конструкторе !! Название в JSON !! Размер в пикселях !! Внешний вид
 
|-
 
|-
−
| Цвет кнопки || addClass || строковый || Выбор цвета кнопки через задание css класса
+
| Маленькая || small || 24px || [[Файл:Кнопка.Маленькая.png]]
 
|-
 
|-
−
| Высота ||   ||   || Высота кнопки
+
| По умолчанию || default || 32px || [[Файл:Кнопка.По_умолчанию.png]]
 
|-
 
|-
−
| Размер ||  size || строковый  || Размер кнопки
+
| Средняя||  medium || 40px || [[Файл:Кнопка.Средняя.png]]
 
|-
 
|-
−
| isSelector || isSelector ||  логический  || Размер кнопки
+
| Большая ||  large ||  48px || [[Файл:Кнопка.Большая.png]]
 
|-
 
|-
−
| Подсказка ||  ||  || Вывод подсказки при на видении курсора мыши на кнопку
 
−
|-
 
−
| CSS классы для компонента || className || строковый || Описание css классов для компонента
 
−
|-
 
−
| Описание для шаблона || templateDescription || строковый || Описание, которое выводится у компонента в режиме шаблона
 
 
|}
 
|}
 +
== Настроить иконку ==
 +
Для того, чтобы выбрать иконку следует задать её наименование из [https://fonts.google.com/icons?selected=Material+Icons Material Icons]. Расположение иконки может быть перед её заголовком или над ним. Если заголовка нет, то иконка располагается в центре кнопки.<br>
 +
 +
== Настроить действия на кнопку ==
 +
Для того, чтобы настроить действия нужно создать шаблон с определёнными настройками. [[Платформа_3V/Формы/Действия|Подробнее...]]
 +
<br>
 +
Но кнопке можно настроить следующие действия:
 +
#[[Платформа 3V/Формы/Действия/Открытие модального окна|<font style="color: #CC2200">Открыть модальное окно</font>]]
 +
#[[Платформа 3V/Формы/Действия/Расчет методики|<font style="color: #0645AD">Рассчитать методику</font>]]
 +
#[[Платформа 3V/Формы/Действия/Обновление источника|<font style="color: #0645AD">Обновить источник</font>]]
 +
#[[Платформа 3V/Формы/Действия/Создание справочника|<font style="color: #0645AD">Создать справочник</font>]]
 +
#[[Платформа 3V/Формы/Действия/Расчет элемента|<font style="color: #0645AD">Установить значение в элемент</font>]]
 +
#[[Платформа 3V/Формы/Действия/Выставление значения в строка-столбец пивота|<font style="color: #0645AD">Установить значение в ячейку отчета</font>]]
 +
#[[Платформа 3V/Формы/Действия/Сохранение источников|<font style="color: #0645AD">Сохранить</font>]]
 +
##[[Платформа_3V/Формы/Компоненты/Основные/Кнопка/Сохранение (Кнопка 'Сохранить')|<font style="color: #0645AD">Кнопка "Сохранить"</font>]]
 +
#[[Платформа 3V/Формы/Действия/Экспорт|<font style="color: #0645AD">Экспорт</font>]]
 +
##[[Платформа 3V/Формы/Действия/Экспорт/Задание вычислимых названий|<font style="color: #0645AD">Задать вычислимые названия</font>]]
 +
#[[Платформа 3V/Формы/Действия/Открытие ссылки|<font style="color: #0645AD">Открыть ссылку</font>]]
 +
#[[Платформа 3V/Формы/Действия/Выполнение пользовательского действия|<font style="color: #CC2200">Выполнить пользовательское действие</font>]]
 +
##[[Платформа_3V/Формы/Компоненты/Основные/Кнопка/Кнопка 'Cброс отметки'|<font style="color: #0645AD">Кнопка 'Cброс отметки'</font>]]
 +
#[[Платформа 3V/Формы/Действия/Удаление_элемента_справочника|<font style="color: #0645AD">Удалить элемент справочника</font>]]
 +
#[[Платформа 3V/Формы/Действия/Удаление строки отчёта|<font style="color: #0645AD">Удалить строку в отчёта</font>]]
 +
#[[Платформа 3V/Формы/Действия/Создание нового элемента справочника|<font style="color: #0645AD">Добавить элемент в справочник</font>]]
 +
#[[Платформа 3V/Формы/Действия/Выставление значения в источник|<font style="color: #0645AD">Выставить значение в источник</font>]]
 +
#[[Платформа 3V/Формы/Действия/Выбор следующего или предыдущего элемента справочника|<font style="color: #0645AD">Выбрать следующий или предыдущий элемент справочника</font>]]
 +
#[[Платформа 3V/Формы/Действия/Подмена источника в контроле|<font style="color: #0645AD">Подменить источник в контроле</font>]]
 +
#[[Платформа 3V/Формы/Действия/Выполнение SQL запроса|<font style="color: #0645AD">Выполнить SQL запрос</font>]]
 +
 +
=== Настроить сообщение для подтверждения действия ===
 +
Для того, чтобы перед выполнением настроенного действия произошло подтверждение нажатия на кнопку пользователем, необходимо выполнить следующую настройку в элементе "Кнопка":
 +
<syntaxhighlight lang="JSON" line>
 +
...
 +
  "actionConfirmation": {
 +
        "message": null,
 +
        "localizedMessage": {
 +
          "defaultValue": "Вы уверены, что необходимо выполнить действие?",
 +
          "items": [
 +
            {
 +
              "language": "ru",
 +
              "value": "Вы уверены, что необходимо выполнить действие?"
 +
            },
 +
            {
 +
              "language": "en",
 +
              "value": "Are you sure you need to take an action?"
 +
            }
 +
          ]
 +
        },
 +
      "conditionExpressionId": null
 +
      },
 +
...
 +
</syntaxhighlight>
  
−
== Пример. Описание таблицы в JSON формы ==
 
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
−
| <syntaxhighlight lang="JSON" line>
+
! Свойство !! Описание
−
{
+
|-
−
      "key": "key1617703631217",
+
| message|| Сообщение
−
      "type": "bs-button",
+
|-
−
      "dataSourceId": 2,
+
| localizedMessage|| Локализованное сообщение (при необходимости)
−
      "templateOptions": {
+
|-
−
        "visible": true,
+
| conditionExpressionId|| Условие отображения подтверждения при нажатии на кнопку - рассчитывается с помощью [[Платформа_3V/Формы/Выражения|'''выражения''']]. Выражение должно иметь значение (true или false)
−
        "addClass": "btn-primary",
 
−
        "label": "Пример кнопки (сохранение данных)"
 
−
      }
 
−
    },
 
−
</syntaxhighlight>
 
 
|}
 
|}
 +
 +
== Задать правила видимости и доступности редактирования ==
 +
Для того, чтобы настроить правила нужно создать шаблон с определёнными настройками. [[Платформа_3V/Формы/Правила|Подробнее...]]
 +
<br>
 +
== Настроить права доступа ==
 +
Подробнее о правах доступа можно узнать [[Платформа_3V/Права_доступа/Права_доступа_на_элементы_формы|здесь]].
 +
<br>

Текущая версия на 11:18, 14 декабря 2021

Кнопка - компонент представляющий собой командную кнопку, с помощью которой пользователь может вызывать выполнение какого-либо действия.

Новый компонент.Кнопка.png




Добавить кнопку

Элемент можно добавить через конструктор
Добавление элемента через конструктор.png

Настроить заголовок

Для настройки заголовка достаточно задать его в настройке "Заголовок". Дефолтное значение заголовка "Кнопка"
Кнопка.Заголовок.png

Настроить подсказку

Для настройки всплывающего окна при наведении на поле достаточно задать его текст в настройке "Подсказка"

Настроить тип кнопки

Соответствие типа
Название в конструкторе Название в JSON Внешний вид
Главная main Кнопка.Главная.png
Базовая basic Кнопка. Базовая.png
Текстовая text Кнопка.Текстовая.png


Изменить размер кнопки

Размер элемента следует задавать в настройке "Размер".

Соответствие размера
Название в конструкторе Название в JSON Размер в пикселях Внешний вид
Маленькая small 24px Кнопка.Маленькая.png
По умолчанию default 32px Кнопка.По умолчанию.png
Средняя medium 40px Кнопка.Средняя.png
Большая large 48px Кнопка.Большая.png

Настроить иконку

Для того, чтобы выбрать иконку следует задать её наименование из Material Icons. Расположение иконки может быть перед её заголовком или над ним. Если заголовка нет, то иконка располагается в центре кнопки.

Настроить действия на кнопку

Для того, чтобы настроить действия нужно создать шаблон с определёнными настройками. Подробнее...
Но кнопке можно настроить следующие действия:

  1. Открыть модальное окно
  2. Рассчитать методику
  3. Обновить источник
  4. Создать справочник
  5. Установить значение в элемент
  6. Установить значение в ячейку отчета
  7. Сохранить
    1. Кнопка "Сохранить"
  8. Экспорт
    1. Задать вычислимые названия
  9. Открыть ссылку
  10. Выполнить пользовательское действие
    1. Кнопка 'Cброс отметки'
  11. Удалить элемент справочника
  12. Удалить строку в отчёта
  13. Добавить элемент в справочник
  14. Выставить значение в источник
  15. Выбрать следующий или предыдущий элемент справочника
  16. Подменить источник в контроле
  17. Выполнить SQL запрос

Настроить сообщение для подтверждения действия

Для того, чтобы перед выполнением настроенного действия произошло подтверждение нажатия на кнопку пользователем, необходимо выполнить следующую настройку в элементе "Кнопка": 

 1 ...
 2    "actionConfirmation": {
 3         "message": null,
 4         "localizedMessage": {
 5           "defaultValue": "Вы уверены, что необходимо выполнить действие?",
 6           "items": [
 7             {
 8               "language": "ru",
 9               "value": "Вы уверены, что необходимо выполнить действие?"
10             },
11             {
12               "language": "en",
13               "value": "Are you sure you need to take an action?"
14             }
15           ]
16         },
17        "conditionExpressionId": null
18       },
19 ...
Свойство Описание
message Сообщение
localizedMessage Локализованное сообщение (при необходимости)
conditionExpressionId Условие отображения подтверждения при нажатии на кнопку - рассчитывается с помощью выражения. Выражение должно иметь значение (true или false)

Задать правила видимости и доступности редактирования

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

Настроить права доступа

Подробнее о правах доступа можно узнать здесь.

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Основные/Кнопка&oldid=5434