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

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

Карточки с изображениями
//вкладки формы
[{"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 позволяет разработчику гибко настроить структуру и набор используемых полей ввода в рамках одного поля. Поля MIGX создаются аналогично обычным, за исключением пары дополнительных настроек. Для создания MIGX поля надо установить компонент MIGX (во время установки компонент спросит, где располагать пункт меню MIGX, в меню MODX или в подпункте Extras, имхо, если не планируете создавать ТВ каждый день, устанавливайте в подпункт). Далее, для создания доп. поля действуем по следующей схеме:

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

Описание вкладок

Settings

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

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

Formtabs

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

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

      Вкладка Field

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

      Вкладка Mediasources

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

      Вкладка Input Options

      • Input Option Values — список возможных значений для полей типа выпадающих списков и чекбоксов.
      • 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 поля в админке. Аналогично полю «Разметка колонок» из метода с использованием кода.

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

Вкладка Column

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

Вкладка Renderer

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

Вкладка Cell Editor

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

Contextmenues / Columnbuttons

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

Columnbuttons —

  • 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

Extra Handlers

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

Db-Filters

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.
  • Hook Snippets — дополнительный блок кода, который надо выполнить при каком-либо событии.

CMP-Settings

Настройки в панели менеджера

  • 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, подробнее о возможностях которого можно узнать на странице компонента.

[[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 и базы данных

Порядок действий для настройки работы MIGX с базой данных:

  • Cперва надо создать каталог компонента, который будет использовать MIGX (о структуре компонентов MODX).
  • На странице администрирования MIGX, в разделе Package Manager в поле Package Name надо указать название пространства имен компонента.
  • Далее, на вкладке XML Schema указываем и сохраняем схему БД (она используется для того чтобы была возможность работать с БД разного типа, подробнее в статье про структуру компонентов).
  • На вкладке 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