# UI-элементы и структура JSON

Документ описывает JSON, которым управляется UI кампаний в Gravity Field SDK (Android и Flutter). Ниже перечислены все элементы, их параметры, объект style и поддерживаемые действия onClick с учетом различий платформ.

Визуальное представление кампании определяется объектом CampaignContent (данные приходят из Custom Code/API или template). Ключевые поля:

• deliveryMethod – способ показа. Android принимает синонимы (snackBar/snackbar, bottomSheet/bottom_sheet, fullscreen/full_screen), Flutter ожидает значения в snake_case. Поддерживаемые значения: modal, bottom_sheet, full_screen, snackbar, inline.
• variables – описание UI и событий:
  • frameUI – контейнер и кнопка закрытия (опционально).
  • elements – массив UI-элементов (обязательно).
  • onLoad, onImpression, onVisibleImpression, onClose – события контента. Значение action должно соответствовать enum Action (load, impression, visible_impression, close и т.д.).
• products/items – данные для карточек товара/предметов, если используются products-container или items-container.
• events – трекинг-события (видимые показы, клики по товарам и т.д.).
• step (Number) — Индекс шага (для многошаговых сценариев, например, опросов).
• items (List) — Список данных для items-container. Каждый объект содержит id и словарь values (ключ-значение).

{
  "deliveryMethod": "modal",
  "step": 1,
  "items": [
    { "id": "1", "values": { "title": "Option 1" } },
    { "id": "2", "values": { "title": "Option 2" } }
  ],
  "variables": {
    "frameUI": { ... },
    "elements": [ ... ],
    "onVisibleImpression": { "action": "visible_impression" },
    "onLoad": { "action": "load" },
    "onImpression": { "action": "impression" },
    "onClose": { "action": "close" }
  }
}

Определяет корневой контейнер и кнопку закрытия. В Android container может содержать onClick, во Flutter — только style.

Основной контейнер (фон, скругление, отступы).

Поддерживаемые стили (style):

Кнопка закрытия.

Поддерживаемые стили (style):

"frameUI": {
  "container": {
    "style": {
      "backgroundColor": "#FFFFFF",
      "cornerRadius": 16,
      "padding": { "top": 20, "bottom": 20, "left": 16, "right": 16 },
      "size": { "width": 300 }
    }
  },
  "close": {
    "image": "https://example.com/close_icon.png",
    "style": {
      "size": { "width": 24, "height": 24 },
      "positioned": { "top": 10, "right": 10 }
    },
    "onClick": { "action": "close" }
  }
}

Каждый объект из массива elements описывает конкретный UI-элемент. Поле type должно соответствовать одному из поддерживаемых значений.

Отображает текстовую строку.

Поддерживаемые стили (style):

Отображает изображение по URL. style.fit управляет вписыванием: cover, contain, fill, fitWidth, fitHeight, none, scaleDown.

Поддерживаемые стили (style):

Интерактивная кнопка. Для цвета нажатия используйте pressColor (ripple).

Поддерживаемые стили (style):

Гибкое пространство (распорка) для настройки макета.

Поддерживаемые стили (style):

Встраивает веб-страницу.

Поддерживаемые стили (style):

Контейнер для отображения списка или сетки товаров.

Поддерживаемые стили (style):

Контейнер для отображения горизонтального списка произвольных элементов (в отличие от products-container, который работает с товарами).

Специфичные поля:

• itemCard (Object) — Шаблон для отрисовки каждого элемента списка.

Поддерживаемые стили (style):

Пример JSON:

{
  "type": "items-container",
  "style": {
    "rowSpacing": 8,
    "size": { "height": 150 }
  },
  "itemCard": {
    "template": {
      "frameUI": {
        "container": {
          "style": {
            "backgroundColor": "#F0F0F0",
            "cornerRadius": 8,
            "size": { "width": 120, "height": 150 }
          },
          "onClick": {
            "action": "open_step",
            "step": 2
          }
        }
      },
      "elements": [
        {
          "type": "text",
          "text": "title_key",
          "style": { "fontSize": 14, "textColor": "#000000" }
        }
      ]
    }
  }
}

Шаблон для отображения одного элемента в items-container.

• template (Object): Содержит frameUI и elements.
• Важно: Внутри ItemCard поля text и src в элементах воспринимаются как ключи для подстановки значений из массива items (передается в CampaignContent).

onClick можно указать у большинства элементов, у кнопки закрытия и (только Android) у контейнера. Поля:

Поддерживаемые action:

• close – закрыть кампанию.
• follow_url – открыть URL (Android: обязательно укажите type).
• follow_deeplink – открыть диплинк.
• copy – скопировать текст в буфер обмена.
• request_push – открыть системные настройки уведомлений.
• request_tracking – запросить ATT (iOS).
• open_step – Переход к другому шагу кампании.
  • step (Number): Индекс целевого шага.
  • itemId (String): Автоматически передается при клике внутри items-container для передачи контекста выбора.
• cancel – закрыть кампанию и отправить событие отмены (Android).