Точки встраивания и config.json¶

См. также: getting-started.md · js-api.md · dashboards.md · deploy.md ← Home

Описание всех точек встраивания фреймов в CRM-платформу и настройка дашборд-виджетов.

Полный пример `config.json`¶

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

{
    "name": "Название приложения",
    "version": "1.0.0",
    "package": "my-app",
    "description": "Краткое описание в 1-2 предложения",
    "about": "## Что делает\n...\n\n## Где появляется в CRM\n...\n\n## Возможности\n...\n\n## Как пользоваться\n...\n\n## Настройка\n...",
    "tags": "финансы, аналитика, дашборд",
    "logo": "icon.svg",

    "urls": {
        "main": "index.html",
        "settings": "settings.html",
        "widget": "widget.html",
        "remote": "https://example.com/app/frame.php"
    },
    "urlsConf": {
        "main":     { "method": "get" },
        "settings": { "method": "get" },
        "widget":   { "method": "get" },
        "remote":   { "method": "post" }
    },

    "permissions": {
        "catalogs": {
            "tt_tasks":          ["read", "write"],
            "ag_clients":        ["read"],
            "dashboard_widgets": ["read", "write"],
            "custom_my_catalog": ["*"]
        },
        "storage":  true,
        "navigate": true,
        "modal":    true
    },

    "menu": {
        "tt_tasks":   { "frame": "main", "name": "Моё приложение" },
        "ag_clients": { "frame": "settings", "name": "Настройки" }
    },

    "catalogs": {
        "ag_clients": {
            "tabs": [
                { "name": "Доп. таб", "frame": "main" }
            ],
            "itemsActions": [
                { "name": "Действие над записью", "frame": "main" }
            ],
            "menu": [
                { "name": "Подпункт меню каталога", "frame": "settings" }
            ],
            "catalog.items.footer": {
                "name": "Виджет под таблицей",
                "frame": "widget",
                "width": 6
            },
            "catalog.item.view.header": {
                "name": "Виджет над карточкой",
                "frame": "widget"
            },
            "catalog.item.view.footer": {
                "name": "Виджет под карточкой",
                "frame": "widget"
            },
            "afterSave": "remote"
        },

        "": {
            "itemsActions": [
                { "name": "Универсальное действие", "frame": "main" }
            ]
        }
    }
}

Справочник top-level полей¶

Поле	Обязательно	Описание
`name`	да	Название приложения. Попадает в карточку маркетплейса
`version`	да	Версия (SemVer). Отображается на карточке
`description`	да	Краткое описание (1-2 предложения). Попадает в `anons`
`about`	да	Подробное markdown-описание. 5 разделов: Что делает / Где появляется в CRM / Возможности / Как пользоваться / Настройка. Весь markdown — в одну строку через `\n`
`package`	рекомендуется	Имя пакета (имя папки приложения). Уникальный идентификатор
`tags`	рекомендуется	Теги через запятую. Используются для фильтрации в маркетплейсе
`logo`	рекомендуется	Имя файла лого из zip. SVG предпочтителен
`urls`	да	Словарь фреймов. Ключ → путь. Для локальных — относительный, для remote — абсолютный
`urlsConf`	опционально	Параметры для `urls`: `method` (`get` для локальных, `post` по умолчанию)
`permissions`	рекомендуется	Декларация прав доступа (см. ниже)
`menu`	опционально	Пункты главного меню (см. ниже)
`catalogs`	опционально	Точки встраивания по каталогам (см. ниже)

Блок `menu`¶

Добавляет пункт в главное боковое меню платформы.

Ключ = alias каталога в меню, ПОСЛЕ которого вставляется пункт. Например "tt_tasks" — сразу за разделом «Задачи».
Значение: { "frame": "имя_из_urls", "name": "Подпись" }.
Несколько пунктов — несколько ключей.

Блок `catalogs`¶

Настройки встраивания по каталогам. Ключ — alias каталога или "" (применяется ко всем).

Типы встраивания — см. таблицу ниже.

Точки встраивания (где появляется фрейм)¶

Для footer/header/виджетов поддерживается параметр "width" — ширина в колонках Bootstrap (1-12). Например "width": 4 = 1/3 экрана, "width": 8 = 2/3. Grid-раскладка (<div class="row">) включается только при 2+ фреймах с width на одной странице. Одиночный фрейм всегда full width. При grid-раскладке заголовок фрейма скрывается (compact-режим).

Ключ в config.json	Где отображается	Как открывается
`menu.{catalog}`	Главное меню, после указанного каталога	Полная страница
`catalogs.{cat}.itemsActions[]`	Меню действий элемента в списке	Попап
`catalogs.{cat}.tabs[]`	Табы на странице просмотра элемента	Таб
`catalogs.{cat}.menu[]`	Третий уровень меню каталога	Полная страница
`catalogs.{cat}.catalog.items.footer`	Под таблицей списка каталога	Встроенный фрейм
`catalogs.{cat}.catalog.item.view.header`	Над карточкой элемента	Встроенный фрейм
`catalogs.{cat}.catalog.item.view.footer`	Под карточкой элемента	Встроенный фрейм
`catalogs.{cat}.afterSave`	Вызывается при сохранении элемента (только remote)	Серверный вебхук

Пустой ключ каталога "" — для всех каталогов.

Permissions (песочница)¶

Секция permissions в config.json декларирует к каким каталогам и операциям приложению нужен доступ. Хост-сторона JS проверяет каждый App.fetch() против заявленных разрешений.

{
  "permissions": {
    "catalogs": {
      "dashboards": ["read"],
      "dashboard_widgets": ["read", "write"]
    },
    "storage": false,
    "navigate": true,
    "modal": false
  }
}

Поле	Тип	Описание	Default
`catalogs`	`{string: string[]}`	Каталог → операции (`read`, `write`, `delete`, `*`)	`{}`
`storage`	`bool`	Доступ к `App.storage`	`true`
`navigate`	`bool`	Доступ к `App.navigate()`	`true`
`modal`	`bool`	Доступ к `App.modal()`	`true`

Нет секции permissions → полный доступ (legacy, console.warn)
"permissions": {} → ничего не разрешено (secure default)
"*" в качестве ключа каталога — доступ ко всем каталогам
Schema (sheme.json) разрешена автоматически для каталогов из catalogs

При установке на странице маркетплейса отображается список запрошенных разрешений.

Встраивание в дашборд¶

Приложения могут встраиваться в дашборд как полноценные виджеты с drag/drop, настраиваемой шириной, перемещением, редактированием и удалением.

Как добавить¶

Дашборд -> Настройки -> Виджеты -> Добавить
Тип = "Приложение маркетплейса"
В опциях — dropdown "Фрейм приложения" со всеми фреймами установленных приложений
Выбирает фрейм -> виджет появляется на дашборде
Можно менять ширину (1/3, 1/2, 2/3, 100%), перемещать, удалять

Что получает приложение¶

Фрейм внутри dashboard-виджета получает стандартные параметры с catalog = "dashboard_widgets".

const App = new VMCRMUserApp();
App.getRequestParams().then(({data}) => {
    // data.catalog === 'dashboard_widgets'
    // Приложение может определить что оно на дашборде
});

Дальше: js-api.md · ← Home