¶ Меню
Отображает результат из одной колонки, которая представляет собой JSON—массив из объектов, описывающий меню.
Меню может иметь произвольный уровень вложенности, однако размер текста будет уменьшаться с каждым уровнем вложенности.
¶ Содержание
Обозначения:
⚠️ - атрибут устарел (deprecated) и больше не поддерживаетсяИспользование:
Атрибуты представления и атрибуты строк начинаются с@и могут быть указаны в любом месте блокаSELECT
Атрибуты колонок, ячеек и формы редактирования указываются после поля в блокеSELECTв форматеfield_name @{ attribute = value }
¶ Атрибуты представления
| Атрибут | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
buttons |
Массив кнопок | Дополнительные кнопки в «кебаб-меню» и рядом с ним | |
create_buttons |
Массив кнопок | Если нужно поддерживать несколько способов создания записи и поэтому create_link не подходит. Добавит кнопки в «кебаб-меню» с выпадающим списком |
|
create_link |
Действие | Ссылка на отображение, с помощью которого можно создавать новые записи. Создаёт кнопку «Создать новую запись» в «кебаб-меню» | |
export_to_csv |
Логическое | Включает возможность экспорта данных этого представления в csv файл | false |
⚠️extra_actions |
Массив действий | Дополнительные кнопки в «кебаб-меню» сверху (⚠️ см. buttons) |
|
⚠️help_embedded_page_name |
Строка | Название страницы со справкой (⚠️ см. help_page) |
|
help_page |
Cсылка | Ссылка на страницу-подсказку (funapp.embedded_pages) - схема и название, подробнее |
|
menu_centered |
Логическое | Показывать меню прямо по центру - true, начиная с верхнего края страницы - false |
false |
⚠️panel_buttons |
Массив действий | Дополнительные кнопки на верхней панели представления (⚠️ см. buttons) |
|
show_argument_button |
Логическое | Показывать ли по умолчанию кнопку "Фильтры", отобажающую редактор аргументов по клику | false |
show_argument_editor |
Логическое | Показывать ли по умолчанию редактор аргументов | false |
title |
Строка | Заголовок представления | Системное название представления |
type |
table, form, board, menu, timeline, multiselect |
Тип пользовательского представления | table |
¶ Атрибуты объекта меню
| Атрибут | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
badge |
{ value: string, variant?: вариант } |
Иконка со строкой из value, который отобразится после элемента меню. Цвет задаётся с помощью variant. Подробнее |
|
content |
Массив с объектами идентичной структуры | Будучи заполненным, данное поле определяет элемент меню как категорию | |
icon |
Строка | Иконка, отображающаяся перед именем элемента меню. Можно использовать эмодзи или название material-иконки (маленькими буквами с подчёркиваниями вместо пробелов). |
|
name |
Строка | Заголовок элемента меню | |
ref |
Ссылка с идентификатором | Ссылка на отображение, к которому ведёт элемент меню. Будучи заполненым, данное поле определяет элемент меню как ссылку. | |
href |
Внешняя ссылка | Ссылка на внешний источник. Будучи заполненным, данное поле определяет элемент меню как ссылку | |
size |
Число | Указывает ширину элемента меню в отношении 12-ти ячеечной сетки. На мобильных устройствах этот параметр игнорируется и все элементы имеют ширину 12. | 12 |
Параметр ref и параметр content не должны быть указаны одновременно.
¶ Пример
SELECT
@"type" = 'menu',
@title = 'ozma.io',
@menu_centered = true,
@help_page = {
schema: 'admin',
name: 'help__user__main_menu'
},
@buttons = [{
name: COALESCE((SELECT __main as name FROM base.people WHERE user = $$user_id LIMIT 1), $$user),
icon: 'person',
display: 'desktop',
ref: &hrm.employee_form,
target: 'top',
}],
"menu",
FROM (
VALUES ([
{ name: 'Главное меню', size: 8, content: [
{ name: 'Задачи', size: 3, content: [
{
name: 'Мои актуальные', icon: 'create',
ref: &pm.actions_list,
args: {
owner: (SELECT array_agg(id) FROM base.people WITH SUPERUSER ROLE WHERE user = $$user_id LIMIT 1),
status: (SELECT array_agg(id) FROM pm.actions_stages WHERE name IN ('new', 'in_progress', 'on_hold')),
start_date_before: (SELECT $$transaction_time::date)
}
},
{
name: 'Все задачи', icon: 'app_registration',
ref: &pm.actions_table,
args: {
status: (SELECT array_agg(id) FROM pm.actions_stages WHERE name IN ('new', 'in_progress', 'on_hold')),
type: (SELECT array_agg(id) FROM pm.actions_types WHERE name = 'Задача')
}
},
]},
{ name: 'Маркетинг', size: 3, content: [
{
name: 'Кампании', icon: 'campaign',
ref: &marketing.campaigns_table,
badge: {
value: (SELECT COUNT(id) FROM marketing.campaigns WHERE stage = (SELECT id FROM marketing.campaigns_statuses WHERE name = 'in_progress')),
variant: 'success'
}
},
{
name: 'Списки', icon: 'list',
ref: &marketing.lists_table,
args: {
status: (SELECT id FROM marketing.lists_statuses WHERE name = 'in_progress'),
}
}
]},
]}
])
) AS menu ("menu")
¶ Типы ссылок
¶ Ссылка на любое представление
По нажатию на кнопку происходит переход к представлению таблицы base.people_table. В качестве аргумента передается значение status = 'active'
{
name: 'Люди',
icon: 'people',
ref: &base.people_table,
args: {
status: 'active'
}
},
¶ Ссылка на форму записи
По нажатию на кнопку происходит переход к форме base.person_form определенной записи сущности person с идентификатором 1
{
name: 'Человек с id=1',
icon: 'person',
ref: &base.person_form,
args: {
id: 1
},
},
¶ Ссылка на форму создания записи
По нажатию на кнопку происходит переход к пустой форме base.person_form для создания новой записи сущности person
{
name: 'Новая запись типа "Человек"',
icon: 'person',
ref: &base.person_form,
new: true
},
¶ Ссылка на запуск автоматики
По нажатию на кнопку выполняется код процедуры admin.update_data с переданной ей датой в качестве аргумента
{
name: 'Принудительное обновление данных',
icon: 'settings',
action: {
schema: 'admin',
name: 'update_data'
},
args: {
now: (SELECT $$transaction_time)
}
}
¶ Альтернативный способ задания меню
Меню вложенности 2 можно также описывать SQL-запросом с двумя колонками. Текст в колонках используется как названия категорий и кнопок соответственно. Пример:
SELECT
@type = 'menu',
category as "CategoryName",
name as "name" @{
link = ref
},
FROM
(
VALUES
('Рабочая область', 'Входящие', &"eg"."orders_table_all"),
('Рабочая область', 'Заказы', &"eg"."inwork_orders_table_all"),
('Рабочая область', 'Клиенты', &"eg"."clients_table_all"),
('Параметры', 'Менеджеры', &"managers_table_all"),
('Параметры', 'Альтернативное меню', &"user"."ex_menu"),
('Параметры', 'Администрирование', &"admin"."Main")
) as menu (category, name, ref)
¶ Уровни вложенности
Меню может содержать произвольное количество уровней вложенности. В зависимости от уровня вложенности меняется размер шрифта элементов меню и их стиль отображения.
¶ Первый уровень вложенности
SELECT
@"type" = 'menu',
"menu",
@menu_centered = true,
@title = 'ozma.io',
FROM (
VALUES ([
{ name: 'Sales', size: 4, content: [
{ icon: 'home', name: 'Deals', ref: &user.menu_ref},
{ icon: 'search', name: 'Clients', ref: &user.menu_ref},
{ icon: 'settings', name: 'Products', ref: &user.menu_ref},
]},
{ name: 'Tasks', size: 4, content: [
{ icon: 'favorite', name: 'Dashboard', ref: &user.menu_ref},
{ icon: 'notifications', name: 'My Tasks: board', ref: &user.menu_ref},
{ icon: 'calendar_today', name: 'All Tasks: table', ref: &user.menu_ref},
{ icon: 'mail', name: 'Overdue Tasks', ref: &user.menu_ref},
]},
{ name: 'Other', size: 4, content: [
{ icon: 'camera', name: 'Administration', ref: &user.menu_ref},
{ icon: 'shopping_cart', name: 'Settings', ref: &user.menu_ref},
]},
])) AS menu ("menu")
¶ Второй уровень вложенности
SELECT
@"type" = 'menu',
"menu",
@menu_centered = true,
@title = 'ozma.io',
FROM (
VALUES ([
{ name: 'Main Menu', size: 10, content: [
{ icon: 'sales', name: 'Sales', size: 4, content: [
{ icon: 'attach_money', name: 'Deals', ref: &user.ref },
{ icon: 'people', name: 'Clients', ref: &user.ref },
{ icon: 'shopping_basket', name: 'Products', ref: &user.ref },
]},
{ icon: 'tasks', name: 'Tasks', size: 4, content: [
{ icon: 'dashboard', name: 'Dashboard', ref: &user.ref },
{ icon: 'view_module', name: 'My Tasks: board', ref: &user.ref },
{ icon: 'view_list', name: 'All Tasks: table', ref: &user.ref },
{ icon: 'access_time', name: 'Overdue Tasks', ref: &user.ref },
]},
{ icon: 'marketing', name: 'Marketing', size: 4, content: [
{ icon: 'local_activity', name: 'Campaigns', ref: &user.ref },
{ icon: 'list_alt', name: 'Marketing Lists', ref: &user.ref },
]},
{ icon: 'contacts', name: 'Contacts', size: 4, content: [
{ icon: 'contact_phone', name: 'Contact Book', ref: &user.ref },
{ icon: 'business', name: 'Organizations', ref: &user.ref },
{ icon: 'person', name: 'People', ref: &user.ref },
{ icon: 'location_on', name: 'Addresses', ref: &user.ref },
]},
{ icon: 'administration', name: 'Other', size: 4, content: [
{ icon: 'settings', name: 'Administration', ref: &user.ref },
]}
]}
])) AS menu ("menu")
¶ Третий уровень вложенности
SELECT
@"type" = 'menu',
"menu",
@menu_centered = true,
@title = 'ozma.io',
FROM (
VALUES ([
{ name: '', size: 12, content: [
{ name: 'Sales', size: 6, content: [
{ name: 'Deals', size: 6, content: [
{ icon: 'dashboard', name: 'Dashboard', ref: &user.ref },
{ icon: 'archive', name: 'Active', ref: &user.ref },
{ icon: 'unarchive', name: 'Archive', ref: &user.ref },
]},
{ name: 'Clients', size: 6, content: [
{ icon: 'person', name: 'Active clients', ref: &user.ref },
{ icon: 'phone', name: 'Phone Book', ref: &user.ref },
{ icon: 'hourglass_empty', name: 'In Progress', ref: &user.ref },
{ icon: 'ac_unit', name: 'Cold Base', ref: &user.ref },
]},
]},
{ name: 'Production', size: 6, content: [
{ name: 'Storage', size: 6, content: [
{ icon: 'receipt', name: 'Receipt', ref: &user.ref },
{ icon: 'assignment', name: 'Write-off', ref: &user.ref },
{ icon: 'swap_horiz', name: 'Moving', ref: &user.ref },
{ icon: 'inventory_2', name: 'Inventory', ref: &user.ref },
],},
{ name: 'Maintaining', size: 6, content: [
{ icon: 'build', name: 'Works', ref: &user.ref },
]}
]}
]}
])) AS menu ("menu")
¶ Смотреть также
- Веб приложение FunApp - общая статья про все типы пользовательских представлений
- Таблица - отображение результата в виде таблицы
- Форма - отображение результата как пользовательской формы
- Канбан-доска - отображение результата как канбан-доски с карточками
- Дерево - отображение результата как таблицы с древовидной структурой
- Таймлайн - отображение результата в виде лога событий и комментариев
- Мультиселект - отображение результата в виде нескольких значений в одном контроле