¶ Кнопки в ozma.io
¶ Действия по кнопке
С помощью кнопок в ozma.io можно выполнить одно из следующих действий:
- Перейти на другое представление в системе
- Запустить бизнес-процесс (action) - код процедуры на JavaScript, выполняющий определенные действия в системе
- Перейти по внешней ссылке
- Открыть сканер штрихкодов или QR-кодов (*)
¶ Общие параметры для всех кнопок
name: string | undefined— название, которое будет отображаться на кнопкеicon: string | undefined— иконка для кнопки (material design icon или любой эмодзи 😀⛱💰)tooltip: string | undefined— всплывающая подсказка (удобно, когда нет названия, иконочная кнопка)visible: boolean | undefined— если укажемfalse, то кнопка не будет отображаться. Если вообще не указывать (undefined), то по умолчанию отображается.variant: 'string | object— вариант кнопки, см. color-variantsbuttons: button[] | undefined— в любом месте где применяются кнопки (панель кнопок, таблицы, формы) можно реализовать группу кнопок с бесконечной вложенностью, т.е. группы кнопок в группах кнопок.
¶ Кнопки на верхней панели
¶ У панели кнопок есть присущий только им параметр
display: 'all' | 'mobile' | 'desktop' | undefined- этот параметр отвечает за то, какие кнопки должны отображаться на панели в зависимости от используемого устройства ПК или мобильное устройство. Если этот параметр не указан, являетсяundefined, то кнопки всегда будут скрыты в кнопку с тремя вертикальными точками. И соответственно, если указанall, то кнопка всегда будет на панели. Этот атрибут необходим только для верхнего уровня кнопок в атрибуте панели кнопок@buttons
¶ Пример кнопки, запуска бизнес-процесса, на панели
{
$id reference(base.contacts)
}
SELECT
/* ... */
@buttons = [
{
name: 'Oбзвон',
icon: 'flag',
action: {
schema: 'crm',
name: 'start_business_process',
},
args: {
id: $id
}
}
],
FROM
/* ... */
@buttons— атрибут реализующий панель кнопок- в
action— схема и название процесса- через
argsв процесс передаются данные
¶ Пример с двумя группами кнопок на панели, открывающие представления
SELECT
/* ... */
@buttons = [
{
icon: 'person',
name: 'Мои',
display: 'desktop',
buttons: [
{
icon: 'people',
name: 'Мой отдел',
ref: &pm.actions_table,
args: {
own: 'unit',
status: $status,
type: $type
},
target: 'top'
},
{
icon: 'groups',
name: 'Все',
ref: &pm.actions_table,
args: {
own: 'all',
status: $status,
type: $type
},
target: 'top'
}
]
},
{
icon: 'not_started'
name: 'Незавершенные задачи',
display: 'desktop',
buttons: [
{
icon: 'check_circle',
name: 'Все задачи',
ref: &pm.actions_table,
args: {
own: $own,
status: 'all',
type: $type
},
target: 'top'
}
]
},
],
FROM
/* ... */
- в
ref- название представления- через
argsв представление передаются данные- c помощью
targetможно указать, как именно отобразить преставление - на весь экран/в модальном окне/в новой вкладке
¶ Кнопки для действий над группой записей
- значение атрибута
display: 'selectionPanel'добавляет кнопку внизу экрана в юзервью таблица при выделении хотя бы одной строки таблицы. Используется для запуска автоматики по группе записей (массовые действия над записями в таблице).
¶ Пример задания кнопки с экшном
SELECT
/*...*/
@buttons = [
{
display: 'selectionPanel',
icon: 'playlist_add',
variant: 'success',
caption: 'Создать список',
action: {
schema: 'marketing',
name: 'create_list_contacts'
},
args: {
name: 'Новый список'
},
add_selected_entry_ids: true
}],
- в
action- указывается название экшна- через
argsможно передать какие-то дополнительные данные (используемые в рамках юзервью)add_selected_entry_ids: trueдобавляет к передаваемым в action аргументам массивargs.idsс идентификаторами выделенных записей- Экшн будет исполняться 1 раз для всех строк (а не каждый раз для каждой выделенной строки), т.е. внутри кода процедуры нужно работать с массивом идентификатором
Сокращенный код экшна marketing.create_list_contacts, создающий список из выделенных контактов (пример):
export default async function handleEvent(args) {
if (!args.ids || args.ids.length == 0)
return { ok: true };
const ids = args.ids;
const listName = args.name;
const listId = await FunDB.insertEntity(
{ schema: 'marketing', name: 'lists' },
{ name: listName }
);
for (const id of ids) {
await FunDB.insertEntity(
{ schema: 'marketing', name: 'contacts_for_lists' },
{ contact: id, list: listId }
);
}
FunDB.writeEvent(`Сформирован список "${listName}" из ${ids.length} записей типа Контакт`);
return { ok: true };
}
¶ Кнопки в таблицах
Кнопки в таблицах могут располагаться по несколько штук в ячейке
Кнопки в таблицах могут располагать в любом количестве колонок
C помощью конструкции
CASE WHEN .. THEN .. ENDможно включать/отключать любые кнопки по условиюВ одной ячейке могут быть и кнопки для запуска процессов, и кнопки, открывающие представления
Положение колонок с кнопками задается так же, как и положение обычных колонок - т.е. в порядке следования в конструкции
SELECTв FunQL-запросе
¶ Пример запуска бизнес-процессов через кнопоки таблицы
SELECT
type = 'table',
/* ... */
posts_for_person.person @{ },
posts_for_person.post @{ },
[
{
name: 'Повышение' ,
visible: CASE WHEN posts_for_person.end_date IS NULL THEN true ELSE false END
icon: 'trending_up',
action: {
schema: 'crm',
name: 'change_status'
},
args: {
id: posts_for_person.id,
status: 'upgrade'
}
},
{
name: 'Премировать',
visible: CASE WHEN posts_for_person.end_date IS NULL THEN true ELSE false END
icon: 'money',
action: {
schema: 'crm',
name: 'encourage'
},
args: {
id: posts_for_person.id
}
},
{
name: 'Восстановление',
visible: CASE WHEN posts_for_person.end_date IS NULL THEN true ELSE false END
icon: 'update',
action: {
schema: 'crm',
name: 'change_status'
},
args: {
id: posts_for_person.id,
status: 'restore'
}
}
] as buttons @{
control = 'buttons',
caption = 'Действия',
column_width = 175
}
FROM
/* ... */
- Чтобы создать колонку в таблице нужно задать набор кнопок и указать
control = 'buttons'в атрибуте- в
nameуказывается название, которое будет отображаться на кнопке- с помощью
iconможно задать иконку для кнопки (material design icon или эмодзи)- в
actionуказываем название бизнес-процесса- через
argsв процесс передаются данные
¶ Пример открытия представления через кнопку таблицы
SELECT
type = 'table',
/* ... */
posts_for_person.person @{ },
posts_for_person.post @{ },
[
{
name: 'Детализация',
icon: 'info',
ref: &crm.person_details,
args: {
id: posts_for_person.id,
},
target: 'top'
},
] as buttons @{
control = 'buttons',
caption = 'Действия',
column_width = 175
}
FROM
/* ... */
- Чтобы создать колонку в таблице нужно задать набор кнопок и указать
control = 'buttons'в атрибуте- в
nameуказывается название, которое будет отображаться на кнопке- с помощью
iconможно задать иконку для кнопки (material design icon или эмодзи)- в
actionуказываем название представление- через
argsв представление передаются данные- c помощью
targetможно указать, как именно отобразить преставление - на весь экран/в модальном окне/в новой вкладке
Раньше атрибут
controlдля таблиц называлсяcolumn_type.
¶ Кнопки на формах
Тут должна быть скриншот с примером
¶ Запускаем бизнес-процессы через кнопки на формах
SELECT
type = 'form',
block_sizes = [ 4, 4, 4 ],
/* ... */
[{
name: 'Повышение',
variant: 'success',
action: {
schema: 'crm',
name: 'change_status'
},
args: {
id: posts_for_person.id,
status: 'upgrade'
}
},
{
name: 'Премирование',
variant: 'warning',
action: {
schema: 'crm',
name: 'encourage'
},
args: {
id: posts_for_person.id
}
}] as buttons @{
form_block = 1,
control = 'buttons'
},
FROM
/* ... */
- Через
form_blockуказывается в каком блоке на форме расположить набор кнопокcontrol = 'buttons'указываем что это кнопки
¶ Открываем представление через кнопку на форме
SELECT
type = 'form',
block_sizes = [ 4, 4, 4 ],
/* ... */
posts_for_person.person @{ },
posts_for_person.post @{ },
[
{
name: 'Детализация',
variant: 'success',
ref: &crm.person_details,
args: {
id: posts_for_person.id,
},
target: 'top'
},
] as buttons @{
form_block = 2,
control = 'buttons'
},
FROM
/* ... */