Migx inputtvtype: MIGX параметры ввода и рендера

Содержание

Документация MIGx

Что такое MIGX?

MIGX это специальный тип дополнительных полей (TV), созданный для того чтобы объединить несколько разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными типами — Текст, цифра, выпадающий список, картинка, чекбокс и пр.

Пакет позволяет разработчику гибко настроить структуру и набор используемых полей ввода в рамках одного MIGX-поля.

Дополнение поставляется со снипппетом getImageList, который позволяет быстро и просто вывести данные из заполненного дополнительного поля MIGX

MIGX расшифровывается как MultiItemsGridtv for MODX

Как работает специльный тип дополнительных полей (TV) MIGX

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

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

Заготовка для конфигурации MIGX находится в директории /core/components/MIGX/examples/. В нижеследующем примере мы будем использовать заготовку «tabs.txt». Эта документация предполагает, что у вас установленно дополнение TinyMCE.

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

Шаг 1: Создайте TV MIGX

Заполните название, заголовок и все остальное как у любого другого TV-поля.
Укажите к какому шаблону относится TV-поле
Укажите тип ввода — MIGX

Шаг 2: Настроить поля ввода MIGX

Шаг 2.1: Вкладки формы

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

Скопируйте содержимое tabs.txt в поле «Вкладки формы»

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

Сейчас мы разберем этот JSON на составляющие чтобы понять что есть что.

Первый ключ "caption" отвечает за то какой заголовок будет у вкладки. В данном случае — "Info".
Второй ключ "fields" Содержит информаци о полях, доступных для редактирования в этой вкладке.
- Первый ключ элемента fields — "field". Значение этого ключа соотвествует имени плейсхолдера при выводе данных через getImageList.
- Второй ключ элемента fields — "caption". Это заголовок, который увидит пользователь, заполняющий данные в панели управления.
- Третий ключ элемента fields — "inputTVtype". Позволяет указать тип TV (ДАТЬ СПИСОК)(по-умолчанию «text»)
- Во второй вкладке мы указали "inputTVtype":"image" для того чтобы можно было загружать изображения.
- "sourceFrom":"MIGX" — если нужно чтобы изображения брались из предустановленного в настройках TV-поля источника файлов.

Ключи для «Вкладки форм»

Ключ	Описание
field	Имя плейсхолдера, которое можно будет использовать в шаблоне при выводе через getImageList.
caption	Заголовок для поля ввода в панели управления.
description	Описание поля ввода в панели управления.
inputTVtype	Используется для определения типа ввода (по-умолчанию «text»).
inputTV	Название TV-поля, которые будет использовано. Например, можем создать ТВ «списко ресурсов», указать тут его название и получим список ресурсов внутри MIGX
default	The default value of that field.

Шаг 2.2: Разметка колонок

Мы размечаем колонки чтобы дать пользователю общее представление о том, что содержится внутри элемента.

Скопируйте содержимое columns.txt в поле «Разметка колонок»

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

Ключи для «Разметки колонок»

Ключ	Описание
header	Название столбца
sortable	Можно ли сортировать столбец?
dataIndex	Поле, которое вы хотите вывести в этом столбце (значение ключа «field» из Вкладки форм)
renderer	Можно использовать средства визуализации для каждого столбца. Например, для того чтобы отображить миниатюры изображений в таблице, должна быть включена функция «this.renderImage». Возможные значения параметра renderer: this.renderimage this.renderImageFromHtml this.renderPlaceholder this.renderFirst this.renderLimited this.renderCrossTick this.renderClickCrossTick this.renderSwitchStatusOptions this. renderPositionSelector this.renderRowActions this.renderChunk ImagePlus.MIGX_Renderer this.renderDate this.renderOptionSelector
editor	Cell Editor: For ingrid-editing, select an Editor for this column. this.textEditor — simple Text-input this.listboxEditor — shows a listbox with the input-options of that field

Ввод данных

Шаг 1: Установка

Убедитесь, что вы установили MIGX, настроили MIGX TV, применили его к шаблону, и создал ресурс с этим шаблоном.

Шаг 2: Ввод данных

Зайдите в ваш ресурс, а затем перейдите на вкладку «Дополнительные поля». Вы должны увидеть новое дополнительное поле.
Нажмите на кнопку «Добавить»
Заполните поля, которые вы определили в настройках дополнительного поля. Если вы не видите никаких полей, убедитесь, что заполнили поле «Вкладки формы» соблюдая синтаксис JSON (Иногда при копировании примеров вы можете вставить неразрывные пробелы вместо обычных, в таком случае JSON не будет валидным)

Нажмите кнопку «Готово»
Нажмите кнопку «Сохранить», чтобы сохранить ресурс

Шаг 3: Изменение данных

Щелкните правой кнопкой мыши на любом элементе. Выберите либо Update, дублировать или удалить.

Шаг 4: Упорядочивание данных

Зажмите и перетащите элемент, чтобы изменить его положение в таблице.

Вывод данных через getImageList

Отображение элементов MIGX

В комплекте с пакетом MIGX поставляется сниппет getImageList, который подходит для вывода данных из заполненного TV MIGX. Не смотря на название он может быть использован не только для вывода изображений, но для всех типов данных. Это что-то вроде getResources, но специально для MIGX.

getImageList может быть использован для организации любой структуры данных, например:

галерея изображений

слайдер с картинками или HTML
табличные данные
CSV или XML
Что угодно на самом деле

Пример использования getImageList

Давайте выведем изображения, которыми мы заполнили TV MIGX на шаге 2. Вставьте этот код там, где вы хотите увидеть картинки.

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

tvname — название TV-поля. tpl — шаблон вывода. В tpl вы можете указать как название чанка, так и строку кода. Убедитесь, что указали @CODE:, если решили использовать указать шаблон строчно. При использовании чанка достаточно указать только название этого чанка.

Вывод с использованием RezImgCrop:


    
<li>
  <img src="[[+image:rezimgcrop=`r-250`]]" alt="[[+title]]"/>
</>

Вывод MIGX TV внутри шаблона getResources


    
<li>
  <a href="[[~[[+id]]]]">[[+pagetitle]]</a> 
  [[getImageList?
    &tvname=`myMIGXtv`
    &tpl=`thumbTpl`
    &limit=`1`
    &docid=`[[+id]]`
  ]]
</li>

Использование переменных из getResources в getImageList

Если вы хотите использовать переменные, поставляемые в шаблон getResources внутри шаблона getImageList вы можете передать эти данные в параметрах вызова getImageList. Вы можете задать произвольные имена этим параметрам, а вызывать их с помощью конструкции [[+property.myparam1]] в шаблоне getImageList.


    
[[getImageList?
    &tvname=`myMIGXtv`
    &tpl=`thumbTpl2`
    &docid=`[[+id]]`
    &limit=`1`
    &pagetitle=`[[+pagetitle]]`
    &originalResourceId=`[[+id]]`
]]


    
<li>
    <a href="[[~[[+property.originalResourceId]]]]">Показать еще изображения от [[+property.pagetitle]]</a>
</li>

Параметры сниппета getImageList

Ключ	Описание
tvname	Название дополнительного поля, которое нужно вывести
tpl	Название чанка для вывода. Можно также использовать конструкции `@CODE:` или `@FILE:`. Если оставить поле пустым, то будет выведен массив (как через pront_r в php)
wrapperTpl	Название чанка-обертки для результата работы сниппета. Принимает только один плесхолдер — `[[+output]]`.
docid	ID ресурса, дополнительное поле которого нужно вывести. Пригодится при выводе в шаблоне getResources: &docid=`[[+id]]`	[[*id]]
value	Можно указать данные в формате JSON, вместо использования данных из TV-поля. Если указан, то `docid` и code{ignored} игнорируются.
limit	Если не ноль, то указывает сколько выводить элементов	0
offset	Кол-во элементов, которые нужно пропустить.	0
totalVar	Плейсхолдер, содержащий общее количество элементов. Полезно при использовании getPage.	total
randomize	Укажите &randomize=`1` если хотите организовать вывод в случайном порядке	0
preselectLimit	together with &randomize, this will preselect items from top to limit, for images you want to see in any case in ranomized output	5
where	Отфильтровать элементы. Пример: `{"active:=":"1","rating:>":"5"}`
sort	Сортировка может быть по нескольким полям одновременно. Пример: `[{"sortby":"age","sortdir":"DESC","sortmode":"numeric"}, {"sortby":"name","sortdir":"ASC"}]`
toPlaceholder	Название плейсхолдера, в который следует поместить результат работы сниппета. К примеру есть указать &toPlaceholder=`MIGX`, то результат будет доступен в [[+MIGX]]. Примечание переводчика — почему-то этот плесхолдер не проходит проверку на пустоту. Чтобы решить эту проблему пользуйтесь wrapperTpl
toSeparatePlaceholders	Разделяет результат работы сниппета на отдельные плейсолдеры. Например есть указать &toSeparatePlaceholders=`MIGX`, то результат ля каждого элемента будет сохранен в отдельном плейсхолдере: [[+MIGX.1]] [[+MIGX.2]] ……
placeholdersKeyField	Применяется только в связке с &toSeparatePlaceholders. Пример: &placeholdersKeyField=`title` — получим [[+MIGX.firsttitle]] [[+MIGX.thirdtitle]] ……
outputSeparator	Разделитель у элементов
toJsonPlaceholder	output items as json into a placeholder, usefull when you want for example show randomized items on different places. example: &toJsonPlaceholder=`jsonoutput` -> [[getImagelist? &value=`[[+jsonoutput]]`…………….]]
jsonVarKey	example: &jsonVarKey=`MIGX_json` — this will use the value from $_REQUEST[‘MIGX_json’] as value, if any useful together with the backend-preview-feature	MIGX_outputvalue

Доступные плейсхолдеры в шаблоне вывода getImageList

Ключ	Описание
[[+fieldname]]	Подставьте вместо ‘fieldname’ заданное вами значение поля
[[+idx]]	Индекс текущего элемента. Начинается всегда с 1
[[+_first]]	Содержит 1 если это первый элемент
[[+_last]]	Возвращает 1 если это последний элемент
[[+_alt]]	Возвращает 1 для каждого второго элемента
[[+total]]	Возвращает общее кол-во элементов, можно заменить ‘total’ настройкой &totalVar
[[+property. name]]	Можно использовать любые переданные параметры. К примеру если вы указали &docid=`20`, то [[+property.docid]] вернет `20`

Продвинутое использование

Динамическая замена шаблона

Используя &tpl=`@FIELD:` можно установить любое поле шаблоном для вывода.


    
[[getImageList?
 &tvname=`myMIGXtv`
 &tpl=`@FIELD:mytplfield`
]]

Если вы определили поле «mytplfield» в настройках MIGX TV, getImageList будет использовать значение этого поля как шаблон для вывода данного элемента. Шаблон внутри поле «mytplfield» должен быть точно таким же, как содержание чанка, используемого обычно в &tpl=`chankname`.

2.97
1
2
3
4
5

Голосов: 894 | Просмотров: 6640

Как создать слайдер на migx c listbox? — Хабр Q&A

Добрый день всем, столкнулся с такой задачей нужно на главный странице сделать слайдер и задать слайдеру помимо заголовка, описания и картинке ещё и функцию опубликовать или нет, как это реализовать ?
Вот что у меня есть :

{
 "formtabs":[
 {
 "MIGX_id":1,
 "caption":"",
 "print_before_tabs":"0",
 "fields":[
 {
 "MIGX_id":3,
 "field":"title",
 "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
 "description":"",
 "description_is_code":"0",
 "inputTV":"",
 "inputTVtype":"text",
 "validation":"",
 "configs":"",
 "restrictive_condition":"",
 "display":"",
 "sourceFrom":"config",
 "sources":"",
 "inputOptionValues":"",
 "default":"",
 "useDefaultIfEmpty":"0",
 "pos":1
 },
 {
 "MIGX_id":2,
 "field":"description",
 "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0430",
 "description":"",
 "description_is_code":"0",
 "inputTV":"",
 "inputTVtype":"richtext",
 "validation":"",
 "configs":"",
 "restrictive_condition":"",
 "display":"",
 "sourceFrom":"config",
 "sources":"",
 "inputOptionValues":"",
 "default":"",
 "useDefaultIfEmpty":"0",
 "pos":2
 },
 {
 "MIGX_id":1,
 "field":"image",
 "caption":"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
 "description":"",
 "description_is_code":"0",
 "inputTV":"",
 "inputTVtype":"image",
 "validation":"",
 "configs":"",
 "restrictive_condition":"",
 "display":"",
 "sourceFrom":"config",
 "sources":"",
 "inputOptionValues":"",
 "default":"",
 "useDefaultIfEmpty":"0",
 "pos":3
 }
 ],
 "pos":1
 }
 ],
 "contextmenus":"",
 "actionbuttons":"",
 "columnbuttons":"",
 "filters":"",
 "extended":{
 "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434",
 "disable_add_item":"",
 "add_items_directly":"",
 "formcaption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434",
 "update_win_title":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434",
 "win_id":"",
 "maxRecords":"",
 "addNewItemAt":"bottom",
 "media_source_id":"",
 "multiple_formtabs":"",
 "multiple_formtabs_label":"",
 "multiple_formtabs_field":"type",
 "multiple_formtabs_optionstext":"\u0421 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c",
 "multiple_formtabs_optionsvalue":"image",
 "actionbuttonsperrow":4,
 "winbuttonslist":"",
 "extrahandlers":"",
 "filtersperrow":4,
 "packageName":"",
 "classname":"",
 "task":"",
 "getlistsort":"",
 "getlistsortdir":"",
 "sortconfig":"",
 "gridpagesize":"",
 "use_custom_prefix":"0",
 "prefix":"",
 "grid":"",
 "gridload_mode":1,
 "check_resid":1,
 "check_resid_TV":"",
 "join_alias":"",
 "has_jointable":"yes",
 "getlistwhere":"",
 "joins":"",
 "hooksnippets":"",
 "cmpmaincaption":"",
 "cmptabcaption":"",
 "cmptabdescription":"",
 "cmptabcontroller":"",
 "winbuttons":"",
 "onsubmitsuccess":"",
 "submitparams":""
 },
 "columns":[
 {
 "MIGX_id":1,
 "header":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
 "dataIndex":"description",
 "width":"",
 "sortable":"false",
 "show_in_grid":1,
 "customrenderer":"",
 "renderer":"",
 "clickaction":"",
 "selectorconfig":"",
 "renderchunktpl":"",
 "renderoptions":"",
 "editor":"this.

Штирлиц — Сеть печатных салонов в Перми