¶ Общие сведения
FunApp является основным интерфейсом взаимодействия пользователей с базой данных. Оно представляет из себя веб-приложение которое работает как на больших экранах, так и на мобильных устройствах. FunApp настраивается таким же способом как и FunDB — через таблицы.
FunApp поддерживает технологию PWA, то есть можно на рабочий стол компьютера или телефона поместить ярлык сразу на него, минуя браузер. Подробнее (На остальных устройствах и браузерах аналогично, где-то в контекстном меню браузера должен быть пункт «Добавить на рабочий стол» или подбный).
¶ Виды отображений
FunApp представляет из себя интерфейс для просмотра отображений, заданных в FunDB. При этом результаты, возвращаемые в виде таблицы, FunApp может отображать несколькими разными видами. Для каждого вида существуют свои атрибуты, влияющие на результат. Для всех атрибутов существуют значения по умолчанию, т.е. не существует обязательных атрибутов. Вид отображения задаётся строкой в атрибуте запроса type, например @"type" = 'menu'. По умолчанию используется вид table.
¶ Меню (menu)
Отображает результат из одной колонки, которая представляет собой JSON - массив из объектов, описывающий меню.
Меню может иметь произвольный уровень вложенности, однако обратите внимание, что размер текста будет уменьшаться с каждым уровнем вложенности.
SELECT
@"type" = 'menu',
@"menu_centered" = true,
"menu"
FROM (
VALUES ([
{"name": 'Меню', "content": [
{ icon: '⚙️', name: 'Настройки', ref: &funapp.settings, size: 6 },
{ icon: 'storage', name: 'Схемы', ref: &funapp.schemas, size: 6 },
]}
])
) AS menu ("menu")
¶ Структура объекта меню
| Параметр | Тип | Описание |
|---|---|---|
icon |
Символ | Иконка, отображающаяся перед именем элемента меню |
name |
Строка | Заголовок элемента меню |
content |
Массив с объектами идентичной структуры | Будучи заполненным, данное поле определяет элемент меню как категорию |
ref |
Ссылка с идентификатором | Ссылка на отображение, к которому ведёт элемент меню. Будучи заполненым, данное поле определяет элемент меню как ссылку. |
size |
Число | По умолчанию: 12. Указывает ширину элемента меню в отношении 12-ти ячеечной сетки. На мобильных устройствах этот параметр игнорируется и все элементы имеют ширину 12. |
badge |
{ value: string, variant?: вариант } |
Кружочек со строкой из value, который отобразится после элемента меню. Предполагается для выделения важной динамической информации, например, пункт меню ведёт на страницу с перепиской и в кружочке отображается, сколько там непрочитанных сообщений. Цвет задаётся с помощью variant, см. color-variants |
Параметр ref и параметр content не должны быть указаны одновременно.
¶ Атрибуты отображения
| Атрибут | Тип | Описание |
|---|---|---|
menu_centered |
Логическое | По умолчанию false. Показывать меню прямо по центру (если true) или начиная с верхнего края страницы (если false). |
¶ Ссылки на разные типы отображений
Ссылка на UserView Таблица - по нажатию на кнопку происходит переход к представлению таблицы people_table_all из схемы base
{
name: 'Таблица (table)',
ref: &"base"."people_table_all"
},
Ссылка на UserView Форма - по нажатию на кнопку происходит переход к форме person_form определенной записи сущности person с идентификатором 1
{
name: 'Форма (form)',
ref: {
ref: &"base"."person_form",
args: {
id: 1
},
}
},
Ссылка на форму создания записи - по нажатию на кнопку происходит переход к пустой форме person_form для создания новой записи сущности person
{
name: 'Новая запись в форме (new item form)',
ref: {
ref: &"base"."person_form",
new: true,
}
},
¶ Альтернативный формат меню
Меню можно также описывать SQL-запросом с двумя колонками. Текст в колонках используется как названия категорий и кнопок соответственно. Пример:
SELECT
@"type" = 'menu',
'admin' as "category_name",
"ref"->>'name' as "name" @{
"link" = "ref"
},
FROM
(
VALUES
(&"funapp"."system_menu"),
(&"settings"),
(&"schemas"),
(&"user_views")
) as "menu" ("ref")
¶ Таблица (table)
Отображает результат как таблицу.
Пример:
(
$id reference("public"."schemas")
):
SELECT
-- Форма для создания новой записи в меню -> "Создать новую"
@create_link = &schema.entity,
-- (Работает только если указан tree_parent_ids) Если мы хотим, чтобы все записи в древовидной форме были развернуты по умолчанию, используем этот атрибут.
@tree_all_open = true,
-- Набор кнопок в меню
@extra_actions = [
{
name: 'Создать организцию',
ref: &schema.organizaton_form,
},
{
name: 'Создать человека',
ref: &schema.people_form,
}
],
"id" @{
-- Ширина столбца в таблице
column_width = 70,
},
name @{
-- Ссылка на форму, открывающуюся по кнопке в начале строки
row_link = &schema.entity,
column_width = 300,
-- (Работает только если указан tree_parent_ids) Можно указать этот атрибут, если мы хотим указан конкретный стоблец, где будут отображаться указатели разворачивания строк в дреровидной форме. По умолчанию без этого атрибута, будет отображаться в первом столбце.
tree_unfold_column = true,
},
main_field,
schema_id @{
"column_width" = 150,
},
-- Для отображения записей в древовидной форме, необходимо использовать атрибут tree_parent_ids, для столбца по которому указываются родительские записи.
parent_id @{
tree_parent_ids = true,
}
FROM
public.entities
WHERE
schema_id = $id
ORDER BY
name
FOR INSERT INTO
public.entities
¶ Атрибуты ячеек
Также поддерживаются атрибуты редактирования.
| Атрибут | Тип | Описание |
|---|---|---|
link |
Действие с идентификатором | Действие, которое осуществляется при нажатии на ячейку |
row_link |
Действие с идентификатором | Действие, которое осуществляется при нажатии на стрелку в начале строки. Если найдено несколько атрибутов row_link, используется ссылка из последнего |
cell_variant |
Вариант | Вариант ячейки, см. color-variants |
cell_color |
Цвет | Устарело, рекомендуется использовать cell_variant Цвет ячейки |
text_align |
left, center, right |
Выравнивание содержимого ячейки по левому краю, по центру, по правому краю соответственно |
¶ Атрибуты строк
| Атрибут | Тип | Описание |
|---|---|---|
row_height |
Число | Высота строки в пикселях (как определено в CSS) |
¶ Атрибуты колонок
| Атрибут | Тип | Описание |
|---|---|---|
caption |
Cтрока | Название колонки. По умолчанию берётся название колонки из запроса |
column_width |
Число | По умолчанию: 200. Ширина колонки в пикселях (как определено в CSS) |
fixed |
Логическое | По умолчанию: false. Зафиксировать колонку. Фиксированные колонки отображаются первыми и остаются видимыми при листании таблицы по горизонтали |
visible |
Логическое | По умолчанию: true. Видимость колонки. Вместе с default_value позволяет задать значения по умолчанию для создаваемых строк, которые скрыты от пользователя |
main_reference_field |
Логическое | По умолчанию: false. Колонка с установленным этим атрибутом должна содержать данные типа "отношение" и являться колонкой главной сущности. При установке атрибута в связке с атрибутом select_view в меню таблицы появляется пункт "Выбрать и вставить", открывающий модальное окно для выбора связанной сущности. После выбора в таблицу вставляется новая строка, в которой в ячейке с этим атрибутом автоматически устанавливается выбранная запись. |
number_format |
Строка | Формат отображения значений типов int и decimal. Поддерживаются значения ru, en и auto.Пример: Без форматирования: 123456.789 ru: 123 456,789en: 123,456.789При значении auto формат выберется на основе языка браузера пользователя. |
fraction_digits |
Число | Работает только вместе с number_format, указывает, сколько цифр после запятой отображать |
¶ Атрибуты формы редактирования
| Атрибут | Тип | Описание |
|---|---|---|
control_height |
Число | Высота поля ввода при редактировании ячейки в таблице в px. Действует только для полей, которые поддерживают ввод текста |
¶ Атрибуты отображения
| Атрибут | Тип | Описание |
|---|---|---|
show_empty_row |
Логическое | По умолчанию true. Показывать пустую строку для добавления данных |
disable_selection_column |
Логическое | По умолчанию false. Убрать стобец, использующийся для выделения строк, и действие удаления выделенных строк |
¶ Управление с клавиатуры
Стрелки — перемещают курсор, если ячейка не открыта для редактирования;
PgDown/PgUp — перемещение на пять строк.
Enter/Tab — работают примерно как в Экселе или Google.Sheets;
Escape — закрыть редактирование ячейки;
Delete — очистить ячейку.
ctrl+c/ctrl+x/ctrl+v тоже работают.
¶ Разное
- Булевы значения в таблице отображаются чекбоксами. Булевы значения, с которыми предполагается активаная работа в таблицах, рекомендуется делать не
nullable, чтобы в таблицах работало быстрое изменения значения. Так как если у ячейки возможны вариантыfalse,trueиnull, то редактирование открывает выпадающее окошко.
¶ Доска, канбан (board)
Отображает канбан доску, состоящую из карточек сгруппированных по столбцам.
SELECT
@"type" = 'board',
-- Форма для создания новой записи в меню -> "Создать новую" и через +
@"create_link" = &pm.action_form,
-- Цвет фона заголовка всех столбцов.
@"header_color" = 'EA907A',
-- Цвет фона доски.
@"background_color" = 'F4F7C5',
-- Цвет канбан-карточки можно задаеть условием в конструкции CASE WHEN..THEN
@"card_color" = case
when
"stage"=>"name" = 'Запланировано'
then
'#DADAE8'
when
"stage"=>"name" = 'Активно'
then
'white'
when
"stage"=>"name" = 'Завершено'
then
'#DAE8DA'
when
"stage"=>"name" = 'Отменено'
then
'#F4F4F4'
end,
-- Порядок колонок на доске
@"board_columns" = [1, 2, 3, 4],
type,
subject,
date_time,
fact_date_time,
"order" @{
"visible" = false,
-- При указании "board_order" = true, по этому полю будет производиться ручная сортировка.
"board_order" = true,
},
stage @{
"visible" = false,
-- Указание, по какому полю происходит группировка
"board_group" = true,
},
FROM
pm.actions
WHERE
NOT is_deleted
FOR INSERT INTO
pm.actions
¶ Атрибуты
| Атрибут | Тип | Описание |
|---|---|---|
card_color |
Цвет | Цвет карточки |
card_target |
Строка | По умолчанию: _top. Определяет, как именно откроется карточка при нажатии на неё. Возможные варианты: _modal чтобы открыть в модале, _top чтобы открыть во всю страницу, _blank чтобы открыть в новой вкладке |
board_columns |
Массив | Определяет порядок и наличие столбцов на доске. Для простых досок, где группировка идёт по текстовому полю, требуется указание статусов строкой. Для сложных досок, где группировка идёт по полю-ссылке, требуется указание ID необходимых статусов |
board_column_width |
Число | Ширина столбцов в пикселях |
¶ Атрибуты ячеек
| Атрибут | Тип | Описание |
|---|---|---|
icon |
Строка | По умолчанию: отсутствует. Добавляет иконку (или набор символов) перед указаной ячейкой на карточке |
visible |
Логическое | По умолчанию: false. Контролирует отображение поля на карточке (нужно для полей которые должны быть в запросе, но не на карточке) |
board_group |
Логическое | По умолчанию: false. Указывает, что по этому полю необходимо группировать канбан |
board_order |
Логическое | По умолчанию: false. Указывает, что по этому полю необходимо выполнять ручную сортировку. Для корректной работы поле должно быть с типом decimal. Если не указан этот атрибут, то карточки сортируются согласно любому полю указанному в ORDER BY. |
¶ Форма (form)
Отображает результат как форму с блоками.
Также используется для отображения графиков, карт и прочих компонентов с помощью iframes.
Пример:
(
$id reference("public"."entities")
):
SELECT
-- Как отображать результат
@type = 'form',
-- Разметка блоков на форме
@block_sizes = [
4, 8,
12
],
-- Дополнительные кнопки в меню
@extra_actions = [
{
name: 'Создать организцию',
ref: {
ref: &"ira_test"."organizaton_form",
new: true
},
},
{
name: 'Создать человека',
ref: {
ref: &"ira_test"."people_form",
new: true
},
}
],
schema_id @{
-- Индекс блока, в котором расположить поле-инпут
form_block = 0,
},
name @{
form_block = 0,
},
-- Вложенные вью на форме
{
ref: &"unique_constraints_for_entity",
args: {
id: $id
}
} as "unique_constraints" @{
"control" = 'user_view',
"form_block" = 0,
},
{
ref: &"check_constraints_for_entity",
args: {
id: $id
}
} as "check_constraints" @{
"control" = 'user_view',
"form_block" = 0,
},
"main_field" @{
"form_block" = 1,
},
{
ref: &"column_fields_for_entity",
args: {
id: $id
}
} as "column_fields" @{
"control" = 'user_view',
"form_block" = 1,
},
{
ref: &"computed_fields_for_entity",
args: {
id: $id
}
} as "computed_fields" @{
"control" = 'user_view',
"form_block" = 1,
},
FROM
"public"."entities"
WHERE
"id" = $id
FOR INSERT INTO
"public"."entities"
¶ Атрибуты ячеек
Поддерживаются атрибуты редактирования.
| Атрибут | Тип | Описание |
|---|---|---|
link |
Действие с идентификатором | Действие, которое осуществляется при нажатии на ссылку в ячейке |
cell_variant |
Вариант | Вариант ячейки, см. color-variants |
cell_color |
Цвет | Устарело, рекомендуется использовать cell_variant Цвет ячейки |
text_align |
left, center, right |
Выравнивание содержимого ячейки по левому краю, по центру, по правому краю соответственно |
¶ Атрибуты колонок
| Атрибут | Тип | Описание |=
|:---------|:-----|:-------- |
| caption | Cтрока | Название колонки. По умолчанию берётся название колонки из запроса |
| form_block | Число | По умолчанию: 0. Номер блока, к которому привязывается эта колонка |
| default_value | Любое | Значение по умолчанию для данной колонки. Обладает большим приоритетом чем default для колонки в её определении |
¶ Атрибуты отображения
| Атрибут | Тип | Описание |
|---|---|---|
block_sizes |
Массив чисел | По умолчанию: []. Количество и ширина блоков на форме. Ширина задаётся в относительных величинах, 1 это одна ячейка сетки шириной в 12 ячеек. Это позволяет задавать несколько столбцов на форме и использовать простую вёрстку. Например, отображение в две строки по три колонки: [4, 4, 4, 4, 4, 4]. В две строки, на первой две колонки, на второй - одна во всю ширину:[4, 8, 12] |
control_height |
Число | Высота поля ввода при редактировании в форме в px. Действует только для полей, которые поддерживают ввод текста |
max_width |
Число или строка | По умолчанию: '1140px'. Задаёт максимальную ширину формы. Если задано числом или строкой с числом и опционально px, то в пикселях. Если строкой с числом и %, то в процентах. Например, 500, '500' и '500px' эквивалентны и установят максимальную ширину формы в 500 пикселей; '100%' растянет форму на всю ширину экрана при любом его размере |
¶ Мультиселект (MultiSelect)
Отображает селект, где возможные значения взяты из таблицы связей. Возможно выбирать или удалять несколько значений; соответствующие записи будут добавлены или удалены в таблице.
Пример:
{
$id reference("pm"."actions")
}:
SELECT
@type = 'multi_select',
"action" @{
default_value = $id
},
"opportunity" @{
"select" = true,
--row_linked_view = &crm.opportunity_form,
}
FROM
pm.actions_for_opportunities
WHERE
action = $id
FOR INSERT INTO
pm.actions_for_opportunities
¶ Атрибуты ячеек
| Атрибут | Тип | Описание |
|---|---|---|
select |
Логическое | По умолчанию false. Указывает, что данное поле должно использоваться как значение внутри мультиселекта. |
default_value |
Любое | Значение по умолчанию для данной колонки. Обладает большим приоритетом чем default для колонки в её определении. |
¶ Пример включения этого представленя как поля в другом представлении
{
ref: &pm.opportunities_for_action_select,
args: {
id: $id
}
} as opportunities @{
form_block = 4,
caption = 'Заказы',
control = 'user_view'
},
¶ Деревья (таблицы с древовидной структурой)
Отображает результат как таблицу с иерархической структурой при наличии у сущности поля с типом "ссылка" (reference(schema.entity)) на саму себя.
Пример:
SELECT
@type = 'table',
@title = 'Задачи',
@row_link = &pm.action_form,
@create_link = &pm.action_form,
actions.subject @{
column_width = 425,
},
actions.stage,
actions.start_date,
actions.due_date,
actions.description,
actions.parent_action @{
tree_parent_ids = true,
visible = false
}
FROM
pm.actions
FOR INSERT INTO
pm.actions
¶ Атрибуты
| Атрибут | Тип | Описание |
|---|---|---|
tree_parent_ids |
Логическое | "Помечает" поле родителя |
¶ Важные замечания
- Поле сущности с типом - ссылкой на эту же сущность нужно пометить атрибутом
tree_parent_ids - Дерево "разворачивается" по клику на кнопки-стрелки в ячейках первой колонки для тех записей, у кого есть дочерние записи. По умолчанию дерево "свернуто"
- Дерево строится от первой колонки, указанной в коде представления. Если первая колонка имеет атрибут
visible, то вложенная структурая отображена не будет - По умолчанию деревья строятся от корневой записи. Корневая запись - запись, у которой значение поля с ссылкой на родителя (в примере -
parent_action) =null. Для построения дерева от конкретной записи нужно использовать рекурсивные SQL запросы.
¶ Таймлайн/комментарии (timeline)
Отображает результат как комментарии и события (как в Trello) с возможностью добавлять новые комментарии.
Отображает в качестве тела события или комментария все строки, не помеченные timeline_datetime = true, timeline_author = true, timeline_type = true, visible = false.
Пример:
SELECT
@type = 'timeline',
"date" @{ timeline_datetime = true },
"author" @{ timeline_username = true },
"message" @{ timeline_message = true },
"type" @{ timeline_type = true },
FROM "CapybaraTest"."capyTimeline"
order by "date" desc -- Не обязательно, представление сортируется по `timeline_datetime`, но возможно чуть повлияет на производительность.
FOR INSERT INTO "CapybaraTest"."capyTimeline"
¶ Атрибуты колонок
| Атрибут | Тип | Описание |
|---|---|---|
timeline_datetime |
Логическое | Обязательне поле. Помечает, что в этой колонке хранится дата, по которой будет сортироваться таймлайн |
timeline_username |
Логическое | Помечает, что в этой колонке хранится юзернейм, для красивого отображения |
timeline_type |
'event' | 'message' |
Тип строки, событие или комментарий (просто по-разному отображается) |
timeline_message |
Логическое | Помечает, что новые комментарии будут записываться в эту колонку. Если ни одну колонку не пометить значением true, то возможности добавить комментарий не будет |
¶ Общие атрибуты
¶ Атрибуты отображения
| Атрибут | Тип | Описание |
|---|---|---|
create_link |
Действие | Ссылка на отображение, с помощью которого можно создавать новые записи данного типа. Является частным случаем extra_actions для частого случая, создаёт кнопку "Создать новую запись" в "кебаб-меню" и кнопку "+" в шапке таблицы |
extra_actions |
Массив действий | Дополнительные кнопки в "бургере" сверху. Обязателен дополнительный атрибут "name": 'Название действия' |
¶ Редактирование
Для редактирования FunApp выбирает компонент, подходящий для типа данных поля.
¶ Компоненты
¶ Текстовое поле
Используется для простого редактирования текста.
¶ Числовое поле
Используется для ввода целых чисел.
¶ Многострочное поле
Используется для ввода больших объёмов текста.
¶ Логическое поле
Отображается как список с вариантами "да/нет".
¶ Поле выбора значения
Используется для полей типа enum.
¶ Поле выбора отношения
Используется для полей типа reference.
¶ Редактор кода
Используется для редактирования запросов на языке FunQL.
¶ Атрибуты редактирования
Эти атрибуты ячеки позволяют указывать, какой компонент должен использоваться для редактирования ячейки. Как особый случай они позволяют указывать вложенное отображение, связанное с данным полем.
| Атрибут | Тип | Описание |
|---|---|---|
control |
'user_view' | 'iframe' |
Указывает на используемый компонент. При значении user_view вместо ячейки отображается вложенное отображение, соответствующее значению ячейки, интерпретированному как ссылка с идентификатором.При значении iframe вместо ячейки отображается айфрейм, см. iframes, и значение передаётся в него. |
text_type |
Cтрока | Указывает на тип компонента для строчного значения. |
Поддерживаемые варианты для text_type:
multiline: многострочное поле;codeeditor: редактор кода.
¶ Для поля выбора отношения
| Атрибут | Тип | Описание |
|---|---|---|
link |
Действие с идентификатором отношения | Действие, которое осуществляется при нажатии на связанную сущность |
select_view |
Cсылка с идентификатором | Частный случай extra_select_views, кнопка для выбора связанной сущности из отображения - удобна когда не требуется кастомизация надписи на кнопке и кнопка только одна |
extra_select_views |
Массив ссылок с идентификатором | Ссылки на отображения, с помощью которых возможно выбирать или создавать связанные значения для этой сущности. Отображения можно вызвать через кнопку внизу списка для значений поля. Обязателен дополнительный атрибут "name": 'Название действия' |
¶ Типы атрибутов
Составные типы атрибутов, использующиеся для разных целей.
¶ Ссылка
Значением атрибута явяется:
- Ссылка на отображение (
&"foo", см. расширения FunQL); - или JSON-объект, соответствующий ссылке на отображение;
- или JSON-объект вида:
{
"ref": &"foo" | { "schema": "schema_name", "name": "uv_name" },
[ "args": { "argument_name": value, ... }, ]
[ "new": true | false, ]
[ "default_values": { "result_column_name": value, ... }, ]
}
, где:
ref: ссылка на отображение из FunQL;args: аргументы отображения, которые подставляются в запрос;new: использовать режим создания новых записей (без просмотра существующих);default_values: значения по умолчанию для новых записей, создаваемых в этом запросе. Имеют больший приоритет чем атрибутdefault_value.
¶ Ссылка с идентификатором
Совпадает с типом "ссылка", однако автоматически добавляет к аргументам аргумент id, равный идентификатору записи, которой принадлежит текущая ячейка.
¶ Ссылка с идентификатором отношения
Совпадает с типом "ссылка", однако автоматически добавляет к аргументам аргумент id, равный идентификатору записи, на которую ссылается текущая ячейка.
¶ Действие
Значением атрибута может являться ссылка, однако поддерживаются дополнительные атрибуты:
target: управляет способом открытия ссылки. Варианты:top: на полный экран;modal: в новом модальном окне;blank: в новой вкладке;root: в текущем активном пространстве (если ссылка на верхнем уровне, откроется новый вид; если в модальном окне, сменится его содержимое);modal-auto: в модальном окне, если нет открытых, иначе в текущем активном модальном окне.
По умолчанию: modal-auto везде, root в меню.
Также поддерживаются следующие действия:
¶ Вызов бизнес-процесса
{
"action": { "schema": "schema_name", "name": "action_name" },
[ "args": { "argument_name": value, ... }, ]
}
¶ Действие с идентификатором
Совпадает с типом "действие", однако автоматически добавляет к аргументам аргумент id, равный идентификатору записи, которой принадлежит текущая ячейка.
¶ Действие с идентификатором отношения
Совпадает с типом "действие", однако автоматически добавляет к аргументам аргумент id, равный идентификатору записи, на которую ссылается текущая ячейка.
¶ Структура системных таблиц
Данные таблицы хранятся в схеме funapp. Они описывают текущие настройки веб-приложения.
¶ settings
Содержит общие настройки приложения. Список настроек можно посмотреть в их справочнике.
| Настройка | Описание |
|---|---|
name |
Название настройки |
value |
Значение настройки |
¶ Разное
- (Не на смартфонах/планшетах) Модальные окна можно двигать, перетаскивая за заголовок, и изменять размер, перетаскивая за нижний правый угол. Это удобно, когда в модальном окне открыт код запроса открытого пользовательского представления, чтобы сразу видеть изменения.