MIGX - очень полезный компонент для ModX, позволяющий создавать дополнительные поля(TV) в виде удобных табличек с перетаскиванием и редактированием значений как в теле таблицы так и в отдельном модальном окне.
При нажатии "Добавить элемент" может открываться модальное окно с формой для ввода данных, а может просто добавляться строка в конец таблицы, которую можно тут же заполнить без лишних манипуляций:
Поведение и свойства отображения элементов можно гибко настраивать через менеджер MIGX, а можно просто экспортировать JSON объект с готовыми настройками.
Для начала MIGX нужно установить через стандартный установщик
приложений ModX, в процессе установка предложит вам выбор: где
расположить пункт меню, ведущий в Менеджер MIGX, я рекомендую
расположить его в меню "Приложения"(Extras/Components).
Зайдя в Менеджер MIGX, перейдите на вкладку "MIGX":
Где вы увидите пустую табличку, в отличие от моей, это список конфигураций для дополнительного поля MIGX, чуть позже узнаете как связать TV и эту конфигурацию.
Для начала вам нужно добавить элемент, нажав на соотвествующую кнопку, в результате чего появится модальное окно c многочисленными настройками.
Я рекомендую для начала воспользоваться готовым конфигом моего производства для добавления партнеров (тот что на первом скрине):
https://github.com/Jonybang/ModX-tehniques/blob/master/MIGX/partners.js
Для этого просто назовите как-нибудь вашу конфигурацию(типа "my-config") и сохраните её, нажав "Выполнено".
После чего через контекстное меню откройте окно для экспорта/импорта JSON объекта конфигурации:
И вставьте туда содержимое моей конфигурации:
Теперь можете сохранить и наконец создать привычное Дополнительное поле(TV), назвав его, к примеру, migx-partners и выбрав тип ввода "migx":
После чего появится поле "Конфигурации", в которое можно ввести имя нашего конфига:
Вы могли заметить что кроме "Конфигурации" в TV присутствуют другие поля. Эти поля также предназначенны для ввода конфигураций, но они гораздо менее удобны чем в Менеджере MIGX, я советую пользоваться именно менеджером, тем более что там есть интерфейс для редактирования конфига.
Теперь можно указать шаблон, в котором это TV будет появляться и зайти в ресурс с нашим шаблоном для того чтобы проверить результат:
Теперь вы можете попробовать добавить в него элемент и посмотреть на поведение таблицы, но вы не увидите тех красивых галочек со столбца "Активный" как у меня на скринах, так как вы не добавили их изображения в папку assets/img.
Но не беспокойтесь, я подготовил для вас эти изображения в том же репозитории, где располагаются мои конфиги:
https://github.com/Jonybang/ModX-tehniques/tree/master/MIGX/assets/img
Пользуйтесь на здоровье, или поставьте те, которые вам больше нравятся.
Итак, давайте попробуем разобрать основные моменты конфигурации, чтобы не действовать совсем в слепую, а хоть немного понимать с чем работаем:
"formtabs" - вкладки модального окна, если присутствует только одна вкладка, то они скрываются;
"caption" - отображаемое название чего-либо(будь то вкладка или поле);
"field" - уникальное название поля формы
"fields" - перечисление полей формы, находящиеся на данной вкладке, среди них:
"name" - текстовое поле "Название"
"url" - текстовое поле "Ссылка"
"image" - поле с выбором изображения - "Изображение"
"active" - список с одиночным выбором ("Активный" или "Скрытый").
Как вы наверно уже догадались "inputTVtype" дает возможность задать тип поля. Список TV типов можно посмотреть
здесь.
Все это можно задавать через интерфейс менеджера:
Там несомненно более удобно, но бывают случаи когда проще заглянуть в конфиг и подправить там значение чем лазить по модальным окнам интерфейса.
Ниже идет куча общих настроек, имена которых в большинстве случаев говорят сами за себя, в остальных же случаях скорее всего придется или экспериментировать или гуглить по поводу каждого имени интересующего поля, потому как я не смог найти хоть сколько-нибудь подробного объяснения по данным полям(даже в
документации), что очень грустно.
На самом деле: если вам и понадобятся эти настройки(что бывает редко), то скорее всего все что нужно можно будет настроить через интерфейс менеджера, но там довольно часто требуется ввести просто JSON конфиг, который часто трудно угадать.
Последним фрагментом идет конфигурация непосредственно столбцов:
Здесь основными полями являются "header" - отображаемое имя и "dataIndex" - указание значения "field" из первого фрагмента конфига: "tabs".
"editor" - возможность, недавно появившаяся в MIGX - отвечает как раз за то, чтобы можно было редактировать значения прямо в теле таблицы, не заходя в модальное окно редактирования.
Честно говоря, "dataIndex" необязательно должно быть существующим "field" полем из массива "tabs", бывают случаи когда нужно указать на несуществующее поле, например при использовании renderChunk, чтобы при сохранении сгенерированные значения в столбцах не испортили нам данные, как в случае на примере ниже:
И у меня в конфиге
https://github.com/Jonybang/ModX-tehniques/blob/master/MIGX/yandex-maps.js :
Это один из хаков, который мне удалось кропотливым и методичным поиском найти на просторах интернета, он позволяет выводить в таблице столбец, в котором можно прописать шаблон для вывода значений из соседних столбцов, пользуйтесь на здоровье :)
При этом dataIndex должен указывать на несуществующее поле ввода.
В менеджере MIGX это будет выглядеть примерно так:
Еще, помимо такой краткой записи шаблона вывода, есть возможно создать свой(custom) renderer, в котором с помощью адской смеси PHP и JavaScript можно описать вывод поля в табличке MIGX. Для этого нужно зайти в конфиг migx и добавить свой рендер по примеру уже существующих:
После этого новый рендерер появится в списке выбора:
И теперь с помощью него в табличке можно выводить все что угодно и как душе угодно:
Таким образом можно создавать не только шаблоны и renderer, но и всякие handler и тому подобное, что участвует в работе с таблицами в MIGX. Буду очень рад, если вы в комментариях опишите свои интересные приемчики, которые обнаружили при работе с MIGX.
Но мы отвлеклись от основной задачи - использования нашего TV по назначению: для вывода заполненной клиентом информации на страницу.
Если вы попробуете вывести на страницу гольный вызов нашего доп. поля(например таким образом: [[*migx-partners]]) то вы увидите JSON, который представляет из себя массив объектов (по обьекту на каждую строку таблицы) с полями fields и значениями, которые контент менеджер задал при заполнениями.
Вы можете самостоятельно обработать JSON используя $collection = $modx->fromJSON($value) в сниппете, а можете воспользоваться готовым сниппетом от MIGX:
getImageList, который предназначен специально для этой задачи:
[[!getImageList? &tvname=`migx-partners` &tpl=`partnerItem`]]
Таким образом он будет работать при вызове из ресурса, в котором присутствует это TV, если же вы хотите вывести данные MIGX TV со стороннего ресурса(например на Главной вывести Партнеров из соотвествующего раздела) то можно дополнительно указать переметр &docid=`5`, где "5" - id ресурса "Партнеры".
getImageList работает по аналогии с getResources: в tpl кладется имя чанка, создается соответствющий чанк вида:
<li>[[+idx]]. [[+field1]] - [[+field2]]</li>
где [[+idx]] - автоматическое нумерование;
[[+field1]], [[+field2]] - поля, которые мы задавали в Formtabs;
После чего сниппет в цикле вызывает чанк для каждой строки из получившейся таблицы MIGX, вставляя на место плейсхолдеров соответствующие значения.
Обзор получился достаточно объемным для "краткого", но такой-уж MIGX, довольно сложный для тех кто его ни разу не пробовал, а я постарался ориентироваться именно на таких новичков. А я ведь не касался еще темы MIGX DB, позволяющего работать непосредственно с базой данных: выводить и редактировать значения из её таблиц. В
этой статье я постарался разобрать эту тему.
Источники:
Мой репозиторий на Github с набором конфигов на MIGX
Оффициальная документация MIGX
Доки getImageList
Репозиторий MIGX на Github
%2B%2Bexample-choice%2B%2B%2B%D0%9F%D1%80%D0%BE%D1%84%D0%BA%D0%BE%D0%BC%2B%D0%A2%D0%9E%D0%93%D0%A3%2B-%2BGoogle%2BChrome.png)
%2B%2Bslider-type%2B%2B%2B%D0%9F%D1%80%D0%BE%D1%84%D0%BA%D0%BE%D0%BC%2B%D0%A2%D0%9E%D0%93%D0%A3%2B-%2BGoogle%2BChrome.png)
%2B%2Bmulti-projects%2B%2B%2B%D0%9F%D1%80%D0%BE%D1%84%D0%BA%D0%BE%D0%BC%2B%D0%A2%D0%9E%D0%93%D0%A3%2B-%2BGoogle%2BChrome.png)
%2B%2Bsingle-faq%2B%2B%2B%D0%9F%D1%80%D0%BE%D1%84%D0%BA%D0%BE%D0%BC%2B%D0%A2%D0%9E%D0%93%D0%A3%2B-%2BGoogle%2BChrome.png)
%2B%2Bmulti-reg-fields%2B%2B%2B%D0%9F%D1%80%D0%BE%D1%84%D0%BA%D0%BE%D0%BC%2B%D0%A2%D0%9E%D0%93%D0%A3%2B-%2BGoogle%2BChrome.png)
%2B%2Btest%2B%2B%2B%D0%9F%D1%80%D0%BE%D1%84%D0%BA%D0%BE%D0%BC%2B%D0%A2%D0%9E%D0%93%D0%A3%2B-%2BGoogle%2BChrome.png)
