MODX. MIGX, расширение функциональности дополнительных полей (TV)

Частые JSON конструкции

Карточки с изображениями
//вкладки формы
[{"caption":"Элементы", "fields": [
  {"field":"title","caption":"Заголовок"},
  {"field":"description","caption":"Описание", "inputTVtype":"richtext"},
  {"field":"image","caption":"Изображение","inputTV":"image","sourceFrom":"3"}
]}]

//Разметка колонок
[
{"header": "Заголовок", "width": "50", "sortable": "true", "dataIndex": "title"},
{"header": "Изображение", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"},
{"header": "Описание", "width": "150", "sortable": "false", "dataIndex": "description"}
]

MIGX позволяет разработчику создавать формы / таблицы / миниприложения с неограниченным набором полей и гибко настраивать их структуру в рамках одного TV поля. Поля MIGX создаются аналогично обычным, за исключением пары дополнительных настроек.

Коротко о главном в MIGX от OpenMODX:

Текстовая версия:

Для создания MIGX поля надо установить компонент MIGX (во время установки компонент спросит, где располагать пункт меню MIGX, в меню MODX или в подпункте Extras, имхо, если не планируете создавать ТВ каждый день, устанавливайте в подпункт). Далее, для создания доп. поля действуем по следующей схеме:

  1. Создать новое дополнительное поле;
  2. На вкладке «Общая информация» заполнить поля: Имя и Подпись;
  3. На вкладке «Доступно для шаблонов» отметить необходимые шаблоны. (При необходимости настроить права доступа и источники файлов);
  4. На вкладке «Параметры ввода» установить «тип ввода» MIGX, и создать структуру полей. Сделать это можно двумя способами, либо написав нужный JSON код самостоятельно, либо заполнив соответствующие поля на специальной странице.

Метод с использованием JSON кода

В поле «Тип ввода» выбрать MIGX, и заполнить поля «Вкладки формы» и «Разметка колонок». Параметры для этих полей описаны ниже.

BackEnd

Код для поля «Вкладки формы» (Form Tabs)

Создание и настройка доп полей MIGX


[{"caption":"Первая вкладка", "fields": 
   [
      {"field":"title","caption":"Заголовок"},
      {"field":"description","caption":"Описание", "description":"Описание для поля описания", "inputTVtype":"richtext"}
   ]
}, {"caption":"Вторая вкладка", "fields":
   [
      {"field":"image","caption":"Изображение","inputTVtype":"image","sourceFrom":"MIGX"}
   ]
}]
  • formtabs — вкладка всплывающего окна, разделяющая группы полей. Если указана только одна, то вкладки не отображаются;
  • caption — заголовок вкладки или поля, который будет отображаться в админпанели;
  • fields  поля содержащиеся на вкладке;
  • field  символьный код поля;
  • description  Описание поля ввода в панели управления;
  • inputTV  тип поля для ввода данных. Применяется если НЕ надо указывать специфические настройки, такие как значения по умолчанию, параметры вывода и пр. (необязательный атрибут);
  • inputTVtype —  тип поля для ввода данных. Применяется если НАДО указывать специфические настройки, такие как значения по умолчанию, параметры вывода и пр. (необязательный атрибут);
  • sourceFrom  указывается предустановленный в настройках TV-поля источник файлов (необязательный атрибут). Чтобы это поле работало, необходимо создать и указать соответствующий inputTV;
  • inputOptionValues  параметр для указания возможных значений таких типов полей как listbox (необязательный атрибут);

параметры для формирования столбцов:

  • header  отображаемое имя столбца;
  • dataIndex  указывается значение параметра "field", для которого формируется столбец. Не обязательно указывать существующее поле, например если в последствии будет использоваться рендер чанка или что-то в этом роде.;
  • editor  указывается для того, чтобы можно было редактировать значения прямо в теле таблицы, не заходя в модальное окно редактирования;

Код для поля «Разметка колонок» (Grid Columns)

Вывод полей на странице создания ресурса

[
{"header": "Заголовок", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Изображение", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]
 
  • header — заголовок поля, который будет отображаться в админпанели;
  • width — ширина колонки отображения в админ панели;
  • sortable — указывается возможность сортировки в админ панели по данному полю, значения true или false;
  • dataIndex — значение привязывающее к значению field из символьного кода поля;
  • renderer — поле для отображения типа данных в админпанели. Можно использовать средства визуализации для каждого столбца. Например, для того чтобы отобразить миниатюры изображений.

  • editor— для возможности редактирования ячейки в админпанели в таблице предпросмотра.

Полный список представлен ниже, в «описании вкладок и параметров»

Метод с использованием менеджера полей

На вкладке TV «Тип ввода» в поле «Конфигурация» (Configurations) прописать название конфигурации полей, которая будет создана далее. Затем перейти в меню компонента MIGX (расположение этого меню выбирается при установке, размещается либо в основном списке, либо в меню «Приложения» (Extras)).

В MIGX Management поля добавляются через вкладку MIGX, там нажимаем "Добавить элемент", этот элемент и будет новой конфигурацией. В появившемся окне создания конфигурации очень много настроек, от параметров которых и зависит каким будет новое MIGX поле. Настройки можно устанавливать вручную, или импортировать из json файла (этот пункт возможен если кликнуть правой кнопкой мыши по названию конфигурации в списке конфигураций). Поля для настройки конфигурации описаны ниже.

Описание вкладок и параметров MIGX

Рядом с названием поля курсивом в квадратных скобках указано название для кода JSON.

Settings

Базовые настройки для формы поля MIGX

  • Name — название, которое указывается в поле «конфигурация» при создании дополнительного поля.
  • Category — категория. Помогает в фильтрации конфигураций, если их, к примеру, очень много.
  • Add new Category — добавляет новую категорию.
  • "Add Item" Replacement — замена текста на кнопке Add Item.
  • Disable Add Items — убрать возможность добавления новых элементов, но оставить возможность редактирования существующих.
  • Add Items directly — добавлять элементы сразу, не вызывая всплывающее окно.
  • Form Caption — заголовок внутри всплывающего окна для заполнения полей. Можно указывать теги MODX.
  • Window Title — название поля в окне создания ресурса.
  • unique MIGX ID — уникальный ID поля MIGX.
  • max MIGX records — максимальное количество записей которое можно добавить к ресурсу.
  • Add new MIGX records at — позиция для новых добавленных элементов: bottom или top.
  • Mediasource IDID медиаисточника.

Formtabs [formtabs]

Вкладка, формирующая во всплывающем окне табы с полями MIGX. Если указана только одна, то вкладки не отображаются.

  • Fields[fields] — тут добавляются поля конфигурации MIGX, которые будут доступны на странице добавления ресурса. Каждый итем содержит в себе коллекцию полей одной вкладки MIGX.
    • Caption[caption] — заголовок для группы полей.
    • Display above Tabs — показывать над другими табами (работает только если это первый таб).
    • Fields — добавление полей.

      Вкладка Field [field]

      Формирует данные поля

      • Fieldname — текстовое ID поля.
      • Caption — название поля.
      • Description[description] — описание для поля.
      • Description is Code — описание кода.
      • Input TV[inputTV] — тип поля для ввода данных. Применяется если НЕ надо указывать специфические настройки, такие как значения по умолчанию, параметры вывода и пр. (необязательный атрибут).
      • Input TV type[inputTVtype] — тип поля для ввода данных. Применяется если НАДО указывать специфические настройки, такие как значения по умолчанию, параметры вывода и пр. (необязательный атрибут).
      • Validation — условия для валидации по полю.
      • Configs — поле для дополнительной конфигурации. Можно использовать для migx-TV-configname, либо для свойств ввода любого TV-type как json-string.
      • Restrictive Condition (MODX tags) — ограничительное условие. Пустой результат будет отображать значение этого поля.
      • Display — выбор, отображать поле или нет.

      Вкладка Mediasources

      При необходимости, привязывает к полю источники файлов.

      • source From[sourceFrom] — выбор места из которого брать значение для источника файлов.
      • Sources — поле для указания источника файлов который должен использоваться (в качестве базового контекста используйте web).

      Вкладка Input Options

      Дополнительные параметры для поля.

      • Input Option Values[inputOptionValues] — список возможных значений для полей типа выпадающих списков и чекбоксов.
      • Default Value — значение настроек по умолчанию (например: @CHUNK getAttributeOptions).
      • Use Default if Empty — использовать ли значение по умолчанию если параметр Input Option Values не указан.
  • Multiple Formtabs — поле для выбора конфигураций форм которые будут доступны во всплывающем окне MIGX поля.
  • Multiple Formtabs Label — лейбл для поля выбора формы.
  • Multiple Formtabs Field — имена полей для этой конфигурации формы. По умолчанию: MIGX_formname.
  • Multiple Formtabs Optionstext — текст который будет выводиться в селекте, для обозначения данной конфигурации формы.
  • Multiple Formtabs Optionsvalue — значение для данной конфигурации формы.

Columns

Вкладка отвечающая за то, как пользователи админ панели будут видеть содержимое MIGX поля в админке. Аналогично полю «Разметка колонок» из метода с использованием кода. Для последующей корректной работы возможности редактирования, должно быть предусмотренно поле id.

Кнопка AddItem позволяет добавить поле для отображения в админке. Поля для заполнения:

Вкладка Column [dataIndex]

  • Header[header] — заголовок для поля.
  • Field — уникальный ID поля, которое должно отображаться.
  • Column width — ширина которую должна занимать колонка
  • Sortable — должна ли быть возможность сортировки по полю.
  • Show in Grid — показывать ли в сетке. Если указано нет - столбец будет по умолчанию скрыт.

Вкладка Renderer

  • Custom Renderer — если необходим собственный рендер, которого нет в списке.
  • Renderer — список предустановленных рендеров.
  • on Click — действие по клику.
  • SelectFromGrid config — .
  • renderChunk template — чанк с шаблоном рендера.
  • Renderoptions — прочие настройки для рендера, например имя чанка который должен быть обработан.

Вкладка Cell Editor [editor]

Выбор отображения редактора ячейки в таблице предпросмотра.

  • this.textEditor — текстовый редактор;
  • this.listboxEditor — выпадающий список.

Contextmenues / Columnbuttons

Contextmenues — кнопки для контекстного меню, которое открывается при клике правой кнопкой мыши на списке элементов.

Columnbuttons — кнопки для редактирования в

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

  • update — редактировать.
  • duplicate — дублировать.
  • addbefore — добавить до.
  • addafter — добавить после.
  • publish — публиковать.
  • unpublish — снять с публикации.
  • activate — активировать.
  • deactivate — деактивировать.
  • recall_remove_delete
  • remove — удалить.
  • edit_migx — редактировать для migx.
  • duplicate_migx — дублировать для migx.
  • remove_migx — удалить для migx.
  • remove_migx_and_image — удалить migx элемент и изображения.
  • movetotop_migx — сдвинуть выше для migx.
  • movetotop_bottom — сдвинуть вверх или вниз.
  • publishtarget — публиковать выбранные.
  • unpublishtarget — снять с публикации выбранные.

Actionbuttons

Добавляет дополнительные кнопки в окне создания/редактирования элемента поля.

  • Buttons per row — количество кнопок на строку
  • Actionbuttons — варианты кнопок
    • addItem — добавить элемент.
    • bulk — массовые действия: publish, unpublish, delete.
    • toggletrash — переключатель: просмотр элементов в карзине / нормальный просмотр.
    • exportview — экспортировать.
    • exportimportmigx — экспорт/импорт параметров поля migx в формате json.
    • upload — загрузка.
    • loadfromsource — загрузка элементов из пивязанного медиаресурса.
    • resetwinposition — сброс позиционирования окна.
    • emptyTrash — очистить корзину.
    • uploadfiles — загрузить файлы (мультизагрузка).
    • uploadfiles_db — загрузить файлы в базу данных (мультизагрузка).
    • importcsvmigx — импортировать из csv.
    • import_from_package — импортировать из пакета.

Window Buttons

Кнопки в окне

  • cancel — отмена;
  • done — готово.

Extra Handlers

Дополнительные обработчики

  • this.resetWinPosition — сбросить позиционирование окна
  • this.emptyTrash — очистить корзину
  • this.handlePositionSelector — управление позиционированием выбранного
  • this.selectSelectorOption
  • gridfilter
  • this.addItem — добавить итем
  • this.addNewItem — добавить новый итем
  • this.preview — предпросмотр
  • this.uploadImages — загрузить изображение
  • this.remove — удалить
  • this.update — изменить
  • this.duplicate — дублировать
  • this.addbefore — добавить перед
  • this.addafter — добавить после
  • this.toggleDeleted
  • this.handleColumnSwitch — переключатель между полями
  • this.publishObject — опубликовать объект
  • this.unpublishObject — снять объект с публикации
  • this.activateObject — активировать объект
  • this.deactivateObject — деактивировать объект
  • this.publishSelected — опубликовать выбранное
  • this.unpublishSelected — снять с публикации выбранное
  • this.deleteSelected — удалить выбранное
  • this.deleteObject — удалить объект
  • this.recallObject — перевызвать объект
  • this.csvExport — экспорт CSV
  • this.removeObject — удалить объект
  • this.publishTargetObject — опубликовать выбранный объект
  • this.unpublishTargetObject — снять с публикации выбранный объект
  • this.showScreenshot — показать скриншот
  • this.uploadFiles — загрузить файлы
  • this.uploadSuccess
  • this.loadFromSource_db — загрузить из источника БД
  • this.migx_removeMigxAndImage
  • this.exportMigxItems — экспортировать объекты из MIGX
  • this.selectImportFile — выбрать импортированный файл
  • this.importCsvMigx — импортировать из CSV
  • this.import_from_package — импортировать из пакета

Db-Filters

Фильтры для работы с данными из БД

  • Filters per row — количество фильтров на страницу.
  • Filters — список в который добавляются фильтры.
    • filter Name — имя фильтра (на латинице)
    • Label — лейбл, название фильтра на любом языке
    • Empty Text — текст в незаполненном поле фильтра. Например: --Фильтр по категориям--
    • Filter Type — тип фильтра: дата, сброс всего, текстовое поле, мульти список, комбобокс (комбинированный список), древовидный список
    • getlist-where — оператор where, для обработки результирующего списка. Пример записи:
      {"title:LIKE":"%[[+search]]%","OR:description:LIKE":"%[[+search]]%"}
    • getcombo processor — процессор который должен обрабатывать комбобокс (список существующих процессоров). Можно создавать собственные процессоры по адресу: core/components/yourpackage/processors/mgr/default/getpublishedcombo.php
    • getcombo textfield — название текстового поля со списком значений для комбобокса
    • getcombo idfield — название поля указывающего на id
    • getcombo where — оператор where, для обработки результатов комбобокса
    • getcombo classname — имя класса для комбобокса
    • getcombo packageName — имя пространства имен (название дополнения) для комбобокса
    • Prefix — выбор префикса: по умолчанию или собственный
    • Custom Prefix — если собственный, то указывается какой
    • getcombo joins — оператор JOIN для связи с данными из другой таблицы
    • parent combobox — родительский элемент для комбобокса
    • default value — значение по умолчанию

MIGXdb-Settings

Настройки для связи поля с собственной таблицей в БД

  • Package — пространство имен компонента.
  • Classname — имя класса объекта связи с БД.
  • Processors Path — путь к процессору.
  • getlist defaultsort — сортировка по умолчанию для вывода списка.
  • getlist defaultsortdir — направление сортировки по умолчанию для вывода списка.
  • Sort Config — параметры сортировки множественных полей, в формате JSON.
  • Items per Page Default — количество элементов на странице.
  • Prefix — выбор между префиксом по умолчанию и собственным.
  • Custom Prefix — указание префикса.
  • Grid — сетка ExtJS.
  • Load Grid — указание как грузить сетку.
  • Check Resource — проверять ли ресурс.
  • Check Resource TV — проверять ли доп поля ресурса.
  • Join Alias — SQL команда Join Alias.
  • Has Extra Connection Table — указывает должно ли поле связываться с таблицей.
  • Where — SQL оператор выборки WHERE.
  • Joins — указание связи полей из разных таблиц друг с другом, подобно SQL оператору JOIN. Пример записи: [{"alias":"aggregateName","selectfield":"fieldName"}], где alias — это указание на таблицу с которой надо связаться, а field — название поля которое надо получить.
  • Hook Snippets — дополнительный блок кода, который надо выполнить при каком-либо событии.

CMP-Settings

Настройки страницы в панели менеджера (CMP)

  • Main Caption — основной заголовок;
  • Tab Caption — заголовок таба;
  • Tab Description — описание таба;
  • Custom Tab Controller — пользовательский контроллер для таба (о контроллерах).

MIGXfe-Settings

  • Window Buttons — js-код, работающий при создании окна (Подробности в migxfe/templates/web/form/form.tpl and winbuttons.tpl).
  • On Submit success — js-код, запускаемый при успешной отправке.
  • Submit params — параметры передаваемые пи отправке.

Типы полей для inputTV и inputTVtype:

  • autotag — авто-метка;
  • text — текст;
  • textarea — текстовая область;
  • textareamini — текстовая область (мини);
  • richtext — текстовый редактор;
  • dropdown — выпадающий список;
  • listbox — список (одиночный выбор);
  • listbox-multiple — список (множественный выбор);
  • list-multiple-legacy — устаревший список множественного выбора;
  • option — переключатели (radio);
  • checkbox — флажки (checkbox);
  • image — изображение;
  • file — файл;
  • url — URL;
  • email — электронная почта;
  • number — число;
  • date — дата;
  • tag — тег;

Параметры с опциями запоняются аналогично стандартным TV

О рендерах

Предустановленные рендеры:

  • this.renderImage — воспроизводит изображение;
  • this.renderImageFromHtml — воспроизводит изображение из html кода;
  • this.renderPlaceholder — воспроизводит данные из плейсхолдера;
  • this.renderFirst — отображает первый элемент;
  • this.renderLimited — выводит не более 100 элементов;
  • this.renderCrossTick — значки галочка\крестик для boolean полей;
  • this.renderClickCrossTick — значки галочка\крестик для boolean полей с возможностью изменения значения кликом (поддерживается для MIGXdb);
  • this.renderSwitchStatusOptions — изменение статуса кликом по полю (настраивается через Renderoptions);
  • this.renderPositionSelector — отображает позиционный переключатель активно / неактивно;
  • this.renderRowActions — воспроизводит функцию установленную в сетке;
  • this.renderChunk — отображает указанный чанк;
  • ImagePlus.MIGX_Renderer — рендер расширения Image+ (входит в состав MODX);
  • this.renderDate — используется для вывода даты;
  • this.renderOptionSelector — отображает опции checkbox списка;

Предустановленные рендеры для поля editor:

  • this.textEditor — простое текстовое поле
  • this.listboxEditor — показывает список с вводимыми параметрами из указанного поля

Коды рендеров храняться по адресу: core/components/migx/config/grid/ в файлах grid.renderer.config.php и grid.renderer.inc.php. Чтобы добавить свой рендер надо отредактировать оба указанных файла, просто берем существующий рендер, копируем, а дальше видоизменяем исходя из задачи.

Вывод информации MIGX на сайте

Для вывода данных из MIGX поля на сайт, можно написать свой снипет конвертации json в данные, либо использовать один из идущих в комплекте с MIGX сниппетов: getImageList или migxLoopCollection. Подробнее о возможностях getImageList. Подробнее о возможностях migxLoopCollection.

[[getImageList?
    &tvname=`myMIGXtv`
    &tpl=`@CODE:<li>[[+idx]]<img alt="" src="[[+image]]" /><p>[[+title]]</p></li>`
]]

Для вывода полей в скобках указывается их символьный код. У каждого элемента есть предопределенное поле ID, которое можно получить используя код [[+idx]].

При выводе через xPDO поле предварительно надо декодировать из формата json. Вывод через xPDO будет примерно таким:

$migx = $modx->resource->getTVValue('tvname');
$items = $modx->fromJSON($migx);
$output = array();
foreach($items as $item) {
  $output[] = $item['field1'].' — '.$item['field2'];
}

При записи в поле MIGX кодируем обратно:

$modx->resource->setTVValue('tvname', $modx->toJSON($output));

MIGX и базы данных / создание приложения c MIGX

MIGX можно привязывать к собственным таблицам. Порядок действий для настройки работы MIGX с базой данных:

  • На странице администрирования MIGX, в разделе Package Manager в поле Package Name надо указать название компонента, и нажать кнопку Create Package, после чего в структуре админки будет создан соответствующий каталог. О структуре компонентов MODX.
  • Далее, на вкладке XML Schema указываем схему БД и сохраняем кнопкой Save Scheme (схема используется для того чтобы была возможность работать с БД разного типа, подробнее в статье про структуру компонентов).
  • На вкладке Schema нажимаем "parse schema", после этого действия создасться структура файлов компонента, позволяющая подключаться к БД.
  • Далее переходим на вкладку Create Tables, и жмем одноименную кнопку, это действие создаст таблицу на сервере.
  • Далее переходим в раздел MIGX и создаем поле, с помощью одного из методов описанных выше, либо используем таблицы в собственном снипете.

Видео о связи БД и MIGX (немного устарело)

Примеры

Подборка конфигураций js для MIGX

{
    "field": "hidden",
    "caption": "Скрытый?",
    "inputTVtype": "listbox",
    "inputOptionValues": "да==1||нет==2"
}
/* Данные для TV catalog */
    /* Вкладки формы (Form Tabs). Во втором поле указываем название второго поля MIGX */
    [{"caption":"Каталог", "fields": [
      {"field":"headline","caption":"Заголовок"},
      {"field":"images","caption":"Изображения", "inputTV":"catalog-images"}
    ]}]
    
    /* Разметка колонок (Grid Columns) */
    [
    {"header": "Каталог","dataIndex": "headline"},
    {"header": "Изображения","dataIndex": "images","renderer":"this.renderChunk","renderoptions":[{"MIGX_id":1,"name":"rendererCatalogImages"}]}
    ]

/* Данные для TV catalog-images */
    /* Вкладки формы (Form Tabs) */
    [{"caption":"Изображения", "fields": [
      {"field":"images","caption":"Изображение","inputTV":"image"}
    ]}]
    
    /* Разметка колонок (Grid Columns) */
    [{
        "header": "Изображение","dataIndex": "images","renderer":"this.renderImage"
    }]
    
/* Чанк rendererCatalogImages */
[[!rendererCatalogImages?val=`[[+images]]`]]

/* Сниппет rendererCatalogImages */
<?php 
$gal=json_decode($scriptProperties['val']);
$out='';
foreach($gal as $item){
    $out.='<div style="display:inline-block;">
        <img style="max-width:150px;max-height:150px;" src="../assets/upload/img/'.$item->images.'">
    </div>';
}
return $out;

Пример фрагмента кода с вымышленным dataIndex, для создания ячейки координат:

{
    "MIGX_id":3,
    "header":"Координаты",
    "dataIndex":"renderCoord",
    "width":130,
    "sortable":1,
    "show_in_grid":1,
    "renderer":"this.renderChunk",
    "clickaction":"",
    "selectorconfig":"",
    "renderchunktpl":"x:[[+coord_x]], y:[[+coord_y]]",
    "renderoptions":""
},

Официальная документация MIGX

?

Благодарю за ответ!

Была ли эта информация полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1