Использование в бэкенде

Использование в бэкенде¶

Как работает настраиваемая TV MIGX¶

MIGX TV позволяет хранить сложные элементы данных в одной TV. Элементы сохраняются как JSON. Эта страница предполагает базовое знакомство с JSON.

Каждый сложный элемент может иметь несколько полей. Поля могут быть (почти) любым стандартным или настраиваемым типом ввода MODX TV. Элементы задаются в поле «Form Tabs». Сортировка по вкладкам определяется JSON.

Создание первой MIGX TV¶

Примеры конфигураций MIGX лежат в /core/components/migx/examples/. На этой странице мы опираемся на tabs.txt. Предполагается, что дополнение TinyMCE установлено.

tabs.txt показывает простую галерею изображений. Галерея состоит из одного сложного элемента с полем richtext (описание изображения), полем image (само изображение) и короткой строкой (подпись). Короткая строка не хранится в отдельной TV.

«Вспомогательные» TV по-прежнему работают, но больше не нужны. Используйте inputTVtype: вместо inputTV:

Шаг 1: Создайте агрегирующую MIGX TV¶

• укажите имя, заголовок, описание и категорию, как для любой другой TV
• дайте доступ шаблону, для которого нужны элементы данных. В этом примере, возможно, «Gallery»
• выберите тип ввода MIGX

Шаг 2: Настройте тип ввода MIGX¶

Для первой MIGX TV важны два текстовых поля: «Form Tabs» и «Grid Columns».

Шаг 2.1 Form Tabs¶

Form Tabs задают структуру, через которую конечные пользователи вводят данные.

Содержимое tabs.txt:

[{
    "caption": "Info",
    "fields": [{
        "field": "title",
        "caption": "Title"
      },
      {
        "field": "description",
        "caption": "Description",
        "inputTVtype": "richtext"
      }
    ]
  },
  {
    "caption": "Image",
    "fields": [{
      "field": "image",
      "caption": "Image",
      "inputTVtype": "image"
    }]
  }
]

Разберём JSON. Первый ключ «Caption» это имя первой вкладки. Вкладка будет подписана «Info».

Второй ключ «fields» это поля, доступные на этой вкладке. Поля хранятся во вложенной JSON-строке. Разберём их.

Первый ключ во вложенной строке «field» это плейсхолдер, который создаст MIGX и к которому вы обратитесь через getImageList. Для первого элемента мы назвали его title. Это короткая строка из описания выше. Второй ключ «caption» это подпись, которую увидит пользователь при заполнении. Назовём её «Title», чтобы было ясно, что вводится заголовок изображения.

Второй элемент вложенной строки «description». Здесь три ключа: «field» (плейсхолдер для доступа позже), «caption» (подпись для пользователя) и «inputTVtype» (тип поля).

Первая вложенная строка готова. Далее вторая вкладка с меткой «Image» и inputTVtype «image». Чтобы указать Media Source для изображения, добавьте ключ "sourceFrom":"migx" и назначьте MIGX TV media source на вкладке Media Sources TV.

Мы на полпути с первой MIGX TV. Форма для отдельных элементов данных готова. Ключи полей перечислены в таблице ниже. Далее зададим сводный вид через Grid Columns на шаге 2.2.

Шаг 2.2 Grid Columns¶

В grid columns задаётся сводный вид, который пользователи видят в сетке.

Содержимое columns.txt:

[
{
  "header": "Title",
  "width": "160",
  "sortable": "true",
  "dataIndex": "title"
}, {
  "header": "Image",
  "width": "50",
  "sortable": "false",
  "dataIndex": "image",
  "renderer": "this.renderImage"
}]

Ещё один JSON. Он показывает подпись изображения и его превью. Разберём.

Первый ключ «header» это заголовок столбца для четвёртого ключа «dataIndex». dataIndex ссылается на плейсхолдер из form tabs. Первая запись использует dataIndex title. Есть ещё width и sortable: ширина столбца и возможность сортировки по столбцу.

У второй записи пятый ключ «renderer». Он позволяет отрисовать превью изображения в ячейке.

Первая MIGX TV настроена. Не забудьте нажать Save.

Не забудьте сохранить ресурс после добавления или изменения элементов MIGX.

Мы на полпути с MIGX. Следующий шаг: Ввод данных.

Ключи сетки:

Расширенная настройка MIGX¶

Несколько форм¶

Содержимое switchFormTabs.txt:

[
  [{
    "formname": "image_description",
    "formtabs": [{
        "caption": "Info",
        "fields": [{
            "field": "title",
            "caption": "Title"
          },
          {
            "field": "tpl",
            "caption": "Tpl",
            "inputTV": "tplDropdown"
          }, {
            "field": "description",
            "caption": "Description",
            "inputTV": "richtext"
          }
        ]
      },
      {
        "caption": "Image",
        "fields": [{
          "field": "image",
          "caption": "Image",
          "inputTV": "image"
        }]
      }
    ]
  }, {
    "formname": "textonly",
    "formtabs": [{
      "caption": "Info",
      "fields": [{
          "field": "title",
          "caption": "Title"
        },
        {
          "field": "tpl",
          "caption": "Tpl",
          "inputTV": "tplDropdown"
        }, {
          "field": "description",
          "caption": "Description",
          "inputTV": "richtext"
        }
      ]
    }]
  }]
]

Здесь дополнительный внешний массив с двумя ключами.

При нескольких формах появится дополнительное поле с именем MIGX_formname. Его значение можно использовать на фронтенде для переключения tpl через &tpl=@FIELD:MIGX_formname`` и чанки с теми же именами, что и formname. Или добавьте отдельное поле (например, listbox-TV с именем tpl), чтобы выбирать output-tpl для элемента.

Функция предпросмотра¶

У MIGX есть предпросмотр: отрендеренный вывод элементов в окне iframe. Для него создайте ресурс предпросмотра с содержимым вроде:

[[!getImageList? &tpl=`@FIELD:MIGX_formname`&tvname=`multiitemsgridTv`]]
[[!getImageList? &tvname=`multiitemsgridTv2`]]

Если на ресурсе предпросмотра несколько вызовов, задайте уникальные значения Preview JsonVarKey для каждой TV. По умолчанию migx_outputvalue.

После заполнения поля «Preview Url» на MIGX TV появится кнопка «Preview» с окном предпросмотра содержимого ресурса.

Inline-редактор¶

Чтобы редактировать поля прямо в сетке MIGX, добавьте "editor": "this.textEditor" или "editor": "this.listboxEditor" в JSON Grid Columns нужного поля:

{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title", "editor": "this.textEditor"}