Inputtvtype migx – программирование не стандартного функционала сайта или 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: Ввод данных

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

Шаг 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`.

Голосов: 198 | Просмотров: 2396

Migx inputTV / Русскоязычное сообщество MODX

Привет.
Возникла проблема при создания поля MIGX с изображением.
Когда используешь«inputTVtype»:«image», проблем не каких нет. Но если нужно создать такое TV с другим источником файлов ( к примеру manager), то это не работает (т.е. недоступно заполнение для группы пользователей, у которых источник файлов manager).

Читал, что вместо «inputTVtype» используют параметр «inputTV», в значение которого передаём имя уже созданной TV (у которой выбран нужный источник файлов — manager).
После этого для группы пользователей с правами на источник файлов manager, становится доступно заполнять такие поля, но при выводе сниппет не видит картинку.

Создаю через MIGX TV, у которого есть есть поле и изображением:
Вкладки формы:

[{"caption":"Image", "fields": 
  [
{"field":"title","caption":"Заголовок"},
{"field":"description","caption":"Описание","inputTVtype":"textarea"},
{"field":"img","caption":"Изображение","inputTV":"img_preview"}
  ]
}]
img_preview — это уже созданная TV с типом «изображение» и с источником файлов «manager»
Разметка колонок
[
 {"header": "Заголовок", "sortable": "true", "dataIndex": "title"},
{"header": "Описание", "sortable": "true", "dataIndex": "description"},
 {"header": "Изображение", "sortable": "false", "dataIndex": "img","renderer": "this.renderImage"}
]
Все в админке это дело заполняется

Но на выводе сниппет не видит картинку (img)
Вызов:

[[!getImageList?
    &tvname=`dv_othet`
    &tpl=``
]]
Результат:
Array
(
    [MIGX_id] => 7
    [title] => 123
    [description] => 123
    [img] => 
    [_alt] => 0
    [_first] => 1
    [_last] => 1
    [idx] => 1
    [property.tvname] => dv_othet
    [property.tpl] => 
    [property.docid] => 8981
)
В чем может быть проблема? Не где не могу найти ответ на это.

Нашёл решение для указание источника файла… Решило проблему

[{"caption":"Image", "fields": 
  [
   {"field":"title","caption":"Заголовок"},
{"field":"description","caption":"Описание","inputTVtype":"textarea"},
      {"field":"img","caption":"Изображение","inputTVtype":"image", "sources":"[{\"MIGX_id\":\"1\",\"context\":\"web\",\"sourceid\":\"4\"}]"}
  ]
}]

создания сложных TV-полей через json (пример)

Порой бывает недостаточно простых TV-полей для решения конкретных задач. К примеру, нам нужно создать слайдер, в котором каждый слайд содержит картинку, заголовок и подзаголовок (Да и вообще может содержать ещё больше разных полей).

MIGX в MODX Revo: создания сложных TV-полей через json (пример)

То есть у одного слайда три поля и самих слайдов может быть сколько угодно.

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

Для начала загрузите и установите этот компонент через «Установщик» в админке сайта.

Создайте новое TV-поля типа «Migx»

Появятся дополнительные вкладки. Заполняем их.

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

[{"caption":"Image", "fields": 
  [
   {"field":"set","caption":"Заголовок"},
   {"field":"description","caption":"Описание"}, 
   {"field":"image","caption":"Изображение","inputTVtype":"image"}
  ]
}]

Разметка колонок:

[
 {"header": "Заголовок", "sortable": "true", "dataIndex": "set"},
 {"header": "Подзаголовок", "sortable": "true", "dataIndex": "description"},
 {"header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

Возможные значение inputTVtype:

  • text - простое текстовое поле
  • textarea - мультистрочное текстовое поле
  • richtext - текстовый редактор
  • image - изображение
  • checkbox - чекбоксы
  • option - radio кнопки
  • listbox - список (одиночный выбор)

MIGX в MODX Revo: создания сложных TV-полей через json (пример)

Вывод MIGX через сниппет getImageList

Данный сниппет идёт в сборке с MIGX.

В «&tvname» мы указываем имя TV, а в &tpl Шаблон вывода (чанк).

Затем создали пару слайдов. Далее остаётся вывести наш слайдер. Для этого используем сниппет компонента MIGX «getImageList».

[[!getImageList?
    &tvname=`slider_main`
    &tpl=`@CODE:
    <li>
        <h3>[[+set]]</h3>
        <h4>[[+description]]</h4>
        <img src="[[+image]]" />
    </li>`
]]

Вывод MIGX через Fenom

Для тех, кто использует Fenom не нужны никакие сниппеты, выводим так:

{set $rows = json_decode($_modx->resource.slider_main, true)}
{foreach $rows as $row}
    <h3>{$row.set}</h3>
    <h4>{$row.description}</h4>
    <img src="{$row.image}" />
{/foreach}

Пояснение: по сути TV с типом MIGX это json-поле, через Fenom мы можем преобразовать его в массив и вывести в цикле, без всяких сниппетов.

Мой пример вызова для слайдера с обрезкой изображений

По этому примеру проще всего понять, как лучше выводить слайдер, при этом у каждой картинки есть описание и ссылка. При этом изображение обрезается, чтобы картинки не "плясали", для обрезки я использую компонент pthump.

{if $_modx->resource.slider_main}
    <section>
        <ul>
        {set $rows = json_decode($_modx->resource.slider_main, true)}
        {foreach $rows as $row}
            <li>
                {if $row.link}<a href="{$row.link}"/>{/if}
                {set $image = $_modx->runSnippet('!pthumb', [
                    'input' => $row.image,
                    'options' => 'h=300&w=600&zc=C',
                ])}
                <img src="{$image}" title="{$row.title}" />
                {if $row.link}</a>{/if}
            </li>
        {/foreach}
        </ul>
    </section>
{/if}

Источник файлов для картинок

Если вам нужно, чтобы поле "изображение (image)" имел источник файлов не Filesystem, а другой, то прописываем в json-параметр sourse, дя этого поля.

[{"caption":"Image", "fields": 
  [
   {"field":"image","caption":"Изображение","inputTVtype":"image","sources":"[{\"MIGX_id\":\"1\",\"context\":\"web\",\"sourceid\":\"4\"}]"}
  ]
}]

Где в sourceid указываем id нужного источника файлов.

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

Примеры полей

Чекбокс (активность)

// Вкладки формы
{"field":"active", "caption":"Активен", "inputTVtype":"checkbox", "inputOptionValues":"Да==1","default":"1"}
// Разметка колонок
{"header": "Активен", "dataIndex":"active", "show_in_grid":1, "renderer":"this.renderCrossTick"}

Select (Выбор из списка)

// Вкладки формы
{"field":"filter","caption":"Фильтр","inputTVtype":"listbox","inputOptionValues":"первый==1||втоорой==2||третий==3"}
// Разметка колонок
{"header": "Фильтр", "sortable": "true", "dataIndex": "filter"}

Большой и страшный. Знакомство. / Русскоязычное сообщество MODX

Привет сообществу!

Представляю цикл уроков (да, это будет цикл уроков, потому как мало кому нравиться читать большие тексты) про компонент MIGX.

Внимание! Уберите от экранов детей, беременных женщин и разработчиков средней руки. Вам тут делать нечего!

Зачем?

В последнее время заметил, что про этот чудный (в хорошем смысле) инструмент вопросов очень много, да и ответов не мало, но видимо люди занятые поиском просвещения и те кто этими знаниями владеет живут на разных улицах.

Что это?

MultiItemsGridTv for MODX — сокращенно MIGX. Т.е. это тип ввода данных в виде множественных элементов.
Привет Evoлюционерам, это Multitv только функционала тут гораздо больше.
Уточняю еще один момент, я целенаправленно буду пропускать некоторые моменты по двум причинам:
  1. Многим она не нужна и вряд-ли понадобится (MIGX DB например)
  2. Будет освещено в следующих уроках (Если поддержите данный урок)
Начало

После установки компонента мы увидим несколько новых типов ввода при создании и редактировании TV, и нас интересует только одноименный тип который так и называется migx. Еще в комплекте идёт сниппет getImageList и он предназначен для удобного вывода наших данных. Кто начинает изучение MODX и хочет сразу с синтаксиса fenom, то я и про вас не забыл.

Советую сразу после установки перейти в меню «Меню», найти там в дереве MIGX, открыть на редактирование и в поле привелегии указать какой нибудь ключ, например: settings. Это делается для того, чтобы менеджеры не увидели и что еще страшнее не испортили ваши конфигурации.

Там же, только уже в поле Параметры можно указать: &configs=migxconfigs вместо &configs=packagemanager||migxconfigs||setup, если у вас нет необходимости работать над собственными таблицами.

Первый TV с типом MIGX

И так, допустим, что у нас стоит задача вывести на странице список отзывов и каждый отзыв должен иметь следующие поля:
  • Фотография
  • ФИО
  • Тип работы
  • Текст отзыва
Приступим и идём в меню «Приложения» -> «MIGX», переходим во вкладку «MIGX» и нажимаем кнопку «Добавить элемент», откроется модальное окно которое выглядит так:

Нас интересуют вкладки: Settings, Formtabs и Columns.

Вкладка Settings

  • Name — Название конфигурации (Его нужно будет указать при создании самого TV). Пишем: reviews
  • Category — Выбор категории (Нужно в тех случаях если у вас конфигураций непомерно много), с его помощью можно фильтровать конфигурации. Пропускаем
  • Add new Category — Если нужной категории нет или их нет вовсе, то в это поле вводится название. Пропускаем
  • Замена «Добавить элемент» — текст кнопки которая будет добавлять новый элемент. Пишем: Добавить отзыв
  • Disable Add Items — Если включить, то не будет возможности добавлять новые элементы. (Нужно для случаев, когда вы уже вводите необходимое количество элементов/данных и хотите оставить возможность их только редактировать). Пропускаем
  • Add Items directly — Если включить, то элемент буден создан без открытия модального окна. Пропускаем
  • Form Caption — Заголовок формы (тут кстати обрабатываются MODX теги). Если например написать: Отзывы на странице [[*pagetitle]], то мы при создании отзыва будем видеть такую картину

  • Window Title — Заголовок модального окна создания/редактирования. Пишем: Добавить/редактировать отзыв

  • max MIGX records — Лимит количества элементов. Тут надеюсь всё понятно, если оставить пустым, то не будет ограничений по количеству
  • Add new MIGX records at — Тут 2 выбора: bottom и top В зависимости от которого новые элементы, а в нашем случае отзывы будут добавляться в конец или в начало, но не переживайте, ведь сортировать элементы мы будем иметь возможность всегда, перетаскиванием.

Вкладка Formtabs

  • Fields — Список вкладок. См. ниже
  • Остальные поля Multiple Formtabs — Их мы затронем в другом уроке
Нажимаем кнопку «Добавить элемент», откроется еще одно модальное окно с полями:
  • Caption — Название вкладки. Можно оставить пустым, ведь если вкладка будет одна, то она все равно не будет выводиться, поля вкладки будут выводиться, но сама вкладка нет. Но если у вас в одном элементе (в нашем случае отзыве) много полей, то имеет смысл разделять их по разным вкладкам для удобства ввода данных
  • Fields — Поля вкладки. Ну вот мы и дошли до того момента, когда мы уже будем создавать поля для ввода данных
Нажимаем кнопку «Добавить элемент», откроется еще одно модальное окно с вкладками:
  • Field — настройки поля
    • Fieldname — название/ключ в массиве (по аналогии с обычным TV)
    • Caption — название/подпись поля (по аналогии с обычным TV)
    • Description — Описание поля. Выводится рядом с полем (по аналогии с обычным TV)
    • Input TV — название TV (будут применены конфигурации данного TV).
      Не советую использовать данный метод, так как сталкивался с тем что у проектов созданы несколько TV и они просто висят в Базе Данных как сущности и не используются, зачастую из-за нужды в использовании источника файлов отличным от системного
      Далее покажу как не плодить TV
    • Input TV type — Тип поля/tv. Тут указывается тип поля, а если быть точнее, то тип TV, можно указывать все типы TV, даже migx, если оставить пустым, то мы получим простое текстовое поле
      В следующих уроках рассмотрим вложенные MIGX

    • Configs — Конфигурация данного поля в JSON-массиве. Для разных типов полей есть разные свойства, поэтому переходим по ссылке и изучаем документацию, там всё расписано
    • Display — Показывать или нет данное поле
  • Mediasources — настройки источника файлов для данного поля
    • source From — Где указан источник файлов.
    • Sources — Список пар привязок: контекст (ресурса) -> источник-файлов (Если в source From указано: config).
  • Input Options — настройки вводимых данных данного поля
    • Input Option Values — Возможные значения (по аналогии с обычным TV)
    • Default Value — Значение по умолчанию (по аналогии с обычным TV)
И так, создаем 4 поля с такими характеристиками:
  1. Fieldname:image
    • Caption:Фотография
    • Input TV type:image
    • source From:config
    • Sources:Context: web, Source: (id - источника файлов отличным от системного)
  2. Fieldname:name
  3. Fieldname:type
    • Caption:Тип работы
  4. Fieldname:text
    • Caption:Текст отзыва
    • Input TV type:textarea или richtext на свой вкус

Сделали и не заблудились в моем тексте?!? Отлично, еще немного осталось.

Должно выглядеть примерно вот таким образом:

Нажимаем «Выполнено» и переходим на следующую вкладку:

Вкладка Columns

На данной вкладке мы настраиваем уже вывод данных в панели управления при создании и редактировании ресурса. Тут одно одноименное поле и если мы нажмем на кнопку «Добавить элемент» мы увидим такую картину:

По порядку:

  • Вкладка «Column»
    • Header — Текст/заголовок столбца
    • Field — Название/ключ поля которое было создано нами в предыдущих шагах
    • Column width — Ширина столбца (вводится непонятным для меня виде, но скажу, что принимает целые числа, прицелитесь и приспособитесь методом проб)
    • Sortable — Сортируем или нет
    • Show in Grid — Показывать в таблице или нет
  • Вкладка «Renderer»
    • Renderer — Как будет выводиться/отображаться. Ведь одно дело вывести текст, а когда нужно будет например выводить картинку тут уже просто ссылку на него выводить было бы нелепо
  • Вкладка «Cell Editor»
    • Editor — Прямое редактирование (так сказать: directly) без модального окна. Тут уж 2 варианта: this.textEditor и this.listboxEditor. Первым можно редактировать обычный текст, а вторым поля с типом listbox
И так, создаем опять же 4 столбца с такими характеристиками:
  1. Header:Фотография
    • Field:image
    • Renderer:this.renderImage
  2. Header:Ф.И.О.
    • Field:name
    • Editor:this.textEditor
  3. Header:Тип работы
    • Field:type
    • Editor:this.textEditor
  4. Header:Текст отзыва
    • Field:text
    • Editor:this.textEditor и если в настройках поля указали richtext, то данное поле нужно оставить пустым
Если мы все сделали правильно, то можно будет увидеть такую картину:

Ну и всё. Жмем кнопку «Выполнено» и идём создавать непосредственно наш TV.

Создаем TV, называем его reviews, подпись указываем Отзывы, выбираем тип ввода migx и в поле Конфигурации пишем название нашей конфигурации, т.е. reviews, указываем шаблоны и идём смотреть результат нашей работы.

Если мы всё сделали верно, то мы увидим следующее:

После нажатия на кнопку добавления, это:

Быстренько заполняем:

и приступаем к выводу наших данных.

Вывод данных

Открываем шаблон страницы и пишем на том месте, где мы хотим вывести наши отзывы вот такой код:
[[getImageList?
&tvname=`reviews`
]]
Я специально не указал параметр tpl для того чтобы продемонстрировать данные в сыром виде и узнать какие плейсхолдеры будут доступны в чанке, вывод будет такой:
Array
(
    [MIGX_id] => 2
    [image] => files/avatars/3.png
    [name] => Алексей Гумелев
    [type] => Ремонт квартиры
    [text] => Спасибо компании “Название компании”! Делали ремонт в однокомнатной квартиры 42 кв.м в новостройке в жилом комплексе Новое Пушкино. Квартира предназначена для дочери. У молодежи свои требования. Ремонт хороший, все сделано, как было оговорено, хотя мы находились в другом городе. Она осталась довольна. Ремонт закончили в срок. Бригада работала без предоплаты. Выплаты шли по факту выполненных работ. Хочу поблагодарить фирму за проявленную заботу, понимание и советы по выбору материалов. Рекомендую. Работа была окончена летом 2016.
    [_alt] => 0
    [_first] => 1
    [_last] => 
    [idx] => 1
    [property.tvname] => reviews
)
Array
(
    [MIGX_id] => 3
    [image] => files/avatars/1.png
    [name] => Мария Петровна
    [type] => Ремонт квартиры
    [text] => Хочу написать наш отзыв о компании "Название компании". Вначале было много сомнений. Доверять ли мастерам? Мало ли что? Люди  разные бывают.  Зря волновалась! Результат отличный. Ребята очень внимательные и порядочные. Сделали ремонт в квартире на "Ура!" Кирилл мастер своего дела. Я очень довольна результатом! Цены не завышены как у других.Рада, что обратилась именно к Вам. 
    [_alt] => 1
    [_first] => 
    [_last] => 
    [idx] => 2
    [property.tvname] => reviews
)
Array
(
    [MIGX_id] => 4
    [image] => files/avatars/2.png
    [name] => Инна Макаревич
    [type] => Ремонт квартиры
    [text] => "Название компании" делали нам ремонт в начале 2016 года!  Двушка в новостройке. Цена у них фиксирована - ни копейки не добирали. На каждом этапе фотоотчеты, что нам очень понравилось. Кирилл на связи всегда! Все работы выполнены на совесть! Все убрали за собой. Молодцы, команда!
    [_alt] => 0
    [_first] => 
    [_last] => 1
    [idx] => 3
    [property.tvname] => reviews
)
Давайте разберем данные:
  • MIGX_id — уникальный идентификатор элемента
  • image, name, type, text — наши поля которые мы с вами создали
    Обратите внимание, что пути к изображениям хоть и в базе хранятся без источника файлов, но сниппет getImageList нам их предусмотрительно дописал

  • _alt — Четный (1) или нечетный (0) элемент
  • _first — Является, ли элемент первым
  • _last — Является, ли элемент последним
  • idx — Индекс элемента начиная с 1
  • property.tvname — Название TV
т.е. наш сниппет расширяет массив данных и дописывает пути к источникам файлов если мы их указали.

А теперь посмотрим как выглядит вывод на всеми любимым fenom. Данный код:

{$_modx->resource.reviews| fromJSON | print}

выведет следующее:
Array
(
    [0] => Array
        (
            [MIGX_id] => 2
            [image] => avatars/3.png
            [name] => Алексей Гумелев
            [type] => Ремонт квартиры
            [text] => Спасибо компании “Название компании”! Делали ремонт в однокомнатной квартиры 42 кв.м в новостройке в жилом комплексе Новое Пушкино. Квартира предназначена для дочери. У молодежи свои требования. Ремонт хороший, все сделано, как было оговорено, хотя мы находились в другом городе. Она осталась довольна. Ремонт закончили в срок. Бригада работала без предоплаты. Выплаты шли по факту выполненных работ. Хочу поблагодарить фирму за проявленную заботу, понимание и советы по выбору материалов. Рекомендую. Работа была окончена летом 2016.
        )

    [1] => Array
        (
            [MIGX_id] => 3
            [image] => avatars/1.png
            [name] => Мария Петровна
            [type] => Ремонт квартиры
            [text] => Хочу написать наш отзыв о компании "Название компании". Вначале было много сомнений. Доверять ли мастерам? Мало ли что? Люди  разные бывают.  Зря волновалась! Результат отличный. Ребята очень внимательные и порядочные. Сделали ремонт в квартире на "Ура!" Кирилл мастер своего дела. Я очень довольна результатом! Цены не завышены как у других.Рада, что обратилась именно к Вам. 
        )

    [2] => Array
        (
            [MIGX_id] => 4
            [image] => avatars/2.png
            [name] => Инна Макаревич
            [type] => Ремонт квартиры
            [text] => "Название компании" делали нам ремонт в начале 2016 года!  Двушка в новостройке. Цена у них фиксирована - ни копейки не добирали. На каждом этапе фотоотчеты, что нам очень понравилось. Кирилл на связи всегда! Все работы выполнены на совесть! Все убрали за собой. Молодцы, команда!
        )

)
Немного другая картина, да?? В данном варианте как мы можем видеть, пути без источника файлов и конечно же нет других полей, кроме тех, что мы создали, ну и MIGX_id который создается и принимает значение автоматически. Мне лично больше нравиться работать с fenom, а вы решайте сами!

Осталось только создать чанк под вашу верстку, указать в вызове getImageList и наслаждаться проделанной работой?

[[getImageList?
&tvname=`reviews`
&tpl=`myChunk`
]]

// myChunk

<div>
    <img src="[[+image]]">
    <span>[[+name]]</span>
    <span>[[+type]]</span>
    <p>[[+text]]</p>
</div>

а кто хочет использовать fenom, то пожалуйста:
{var $reviews = $_modx->resource.reviews| fromJSON}
{if $reviews}
{foreach $reviews as $i}
<div>
    <img src="files/{$i.image}">        // Дописываем путь к источнику файлов вручную
    <span>{$i.name}</span>
    <span>{$i.type}</span>
    <p>{$i.text}</p>
</div>
{/foreach}
{/if}

Вот такую красоту можно сделать:
Итог

Почему большой? Большой потому, что функционал и область его применения реально большой: слайдеры, фото и видео галереи, блоки, отзывы, списки, таблицы и еще много чего, поверьте.
Я даже слышал, что где-то в Средней Азии с его помощью собирают хлопок… Но это не точно!
Не везде где его можно использовать он хорош, но он хорош тем, что он везде может быть использован
Почему страшный? Потому, что многие его боятся (мне так кажется). Я бы его сравнил с огнедышащим драконом из мультфильма Шрек. Всмысле??? Да потому, что если ты её(его) не знаешь, то она(он) тебе кажется страшной(ым), а если покорить её(его), то она(он) очень даже ничего?

Выскажите своё мнение по поводу урока и скажите продолжить или нет? Стоить ли раскрыть завесу тайны? Пойти ли мне в дремучий и загадочный лес? Подняться ли мне до вершины просвещения? Идти ли мне в путешествие на поиски знаний? Пройти ли мне этот долгий и неизведанный путь? Найти ли мне наконец истину? Сделать ли мне неизвестность известной? Расширить ли наш коллективный разум? Ну в общем вы поняли?

Спасибо всем за внимание! Если чё я Баха!

Если вдруг кому-то захочется поблагодарить рублём, то так уж и быть: Карта Сбербанка +79609354545

[MODx] Генератор настроек MIGX

Генератор настроек MIGX подойдет для формирования относительно типовых MIGX-TV. Если вы впервые столкнулись с данным дополнением для MODx, то рекомпендую сперва ознакомится с документацией на русском по MIGx.
Также могут быть полезны примеры использования MIGx со списком стандартных плесхолдеров в MIGX.

Полезные видео на тему:

Как пользоваться генераторм настроек:

Заполните поля, нажмите "Сформировать настройки", и вставьте их в соответствующие поля в своем дополнительном поле.
По-умолчанию все поля попадают в «Разметку колонок», но им там быть совсем не обязательно, можете отменить какие-то поля, просто убрав калочку в соответствующем столбце.

Замечания и пожалания по работе генератора оставляйте в комментариях.

Добавить строку

Сформировать настройки

Вкладки формы

Разметка колонок

Пример чанка

[[!getImageList? &tvname=`migx_***` &tpl=`migx_***_tpl` &docid=`[[*id]]` &limit=`999` [[- &wrapperTpl=`@CODE: <div>[[+output]]</div>` ]] ]]

Николай 09 октября 2018, 12:34

Не работает генератор

Администратор

Спасибо, Николай, за информацию.
Поправил!

pashted 05 июня 2018, 15:38

Пожелание 1:
хотелось бы загружать сюда уже сформированные ранее настройки для последующего редактирования.
Пожелание 2:
не хватает в типах tv "listbox-multiple", "richtext"... может ещё каких-то

ps:
огромное спасибо за такой полезный инструмент.

Alex Lenk 11 мая 2018, 08:00

Вот пример:

{'getImageList' | snippet : [
'tvname' => 'faqBlocks',
'tpl' => 'faqBlocks_tpl',
'docid' => $id,
'limit' => '20',
'wrapperTpl' => '@CODE: <ul>[[+output]]</ul>'
]}

Администратор

Ага, ясно! Окей, как будет время - сделаю. А пока - пусть Ваш пример висит тут для быстрого копирования:)

Alex Lenk 10 мая 2018, 12:40

Классный генератор, очень нравится. Пожертвовал остатки с яндекс.денег.
Просьба, можете ли сделать еще одно поле для fenom тегов

Администратор

Благодарю!
А что Вы имеете в виду, говоря "поле для fenom тегов"?

Serg 10 марта 2018, 23:08

Спасибище огромное!

Хатам 10 марта 2018, 23:08

Огромное спасибо!

Олег 10 марта 2018, 23:08

Огромное тебе ЧЕЛОВЕЧЕСКОЕ ... - ПИВО!!!!!!!!!

Дмитрий 10 марта 2018, 23:07

Ответ для Максима: попробуй "белый==Белый||серый==Серый"

Максим 10 марта 2018, 23:07

При использовании listbox задаю значения "inputOptionValues": "белый==1||серый==2" Нужно выводить названия, но выводит цифры 1,2. Кто знает как сделать это ?

Витя 10 марта 2018, 23:07

Это лучшее, что произошло со мной этим летом!)) Огромной спасибо за данный инструмент!

Групповое редактирование ресурсов (документов) с помощью MIGXDB / Habr

{

    "formtabs":[
        {
            "MIGX_id":1,
            "caption":"Основные данные",
            "print_before_tabs":"0",
            "fields":[
                {
                    "MIGX_id":1,
                    "field":"pagetitle",
                    "caption":"Заголовок",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":""
                },
                {
                    "MIGX_id":10,
                    "field":"alias",
                    "caption":"Псевдоним",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":""
                },
                {
                    "MIGX_id":6,
                    "field":"introtext",
                    "caption":"Краткое описание",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"textarea",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":""
                },
                {
                    "MIGX_id":7,
                    "field":"image",
                    "caption":"Картинка",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"image",
                    "inputTVtype":"",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":""
                },
                {
                    "MIGX_id":4,
                    "field":"price",
                    "caption":"Цена",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"price",
                    "inputTVtype":"",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":""
                },
                {
                    "MIGX_id":5,
                    "field":"context_key",
                    "caption":"Контекст",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"listbox",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"catalog||web",
                    "default":"catalog"
                },
                {
                    "MIGX_id":2,
                    "field":"template",
                    "caption":"Шаблон",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"hidden",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":5
                },
                {
                    "MIGX_id":8,
                    "field":"show_in_tree",
                    "caption":"Показывать в дереве?",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"listbox",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"no==0||yes==1",
                    "default":""
                },
                {
                    "MIGX_id":9,
                    "field":"published",
                    "caption":"Опубликован",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"hidden",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":1
                }
            ]
        },
        {
            "MIGX_id":2,
            "caption":"Подробное описание",
            "print_before_tabs":"0",
            "fields":[
                {
                    "MIGX_id":1,
                    "field":"content",
                    "caption":"Описание",
                    "description":"",
                    "description_is_code":"0",
                    "inputTV":"",
                    "inputTVtype":"richtext",
                    "configs":"",
                    "sourceFrom":"config",
                    "sources":"[]",
                    "inputOptionValues":"",
                    "default":""
                }
            ]
        }
    ],
    "contextmenus":"recall_remove_delete",
    "actionbuttons":"addItem||bulk||toggletrash",
    "columnbuttons":"update||publish||unpublish||recall_remove_delete",
    "filters":[
        {
            "MIGX_id":1,
            "name":"search",
            "label":"search",
            "emptytext":"Поиск...",
            "type":"textbox",
            "getlistwhere":{
                "pagetitle:LIKE":"%[[+search]]%",
                "OR:longtitle:LIKE":"%[[+search]]%",
                "OR:content:LIKE":"%[[+search]]%"
            },
            "getcomboprocessor":"",
            "combotextfield":"",
            "comboidfield":"",
            "comboparent":"",
            "default":""
        }
    ],
    "extended":{
        "migx_add":"Добавить",
        "formcaption":"Дочерний ресурс",
        "update_win_title":"",
        "win_id":"child_resources",
        "maxRecords":"",
        "addNewItemAt":"bottom",
        "multiple_formtabs":"",
        "extrahandlers":"",
        "packageName":"",
        "classname":"modResource",
        "task":"resconnections",
        "getlistsort":"id",
        "getlistsortdir":"desc",
        "use_custom_prefix":"0",
        "prefix":"",
        "grid":"",
        "gridload_mode":1,
        "check_resid":"0",
        "check_resid_TV":"",
        "join_alias":"",
        "has_jointable":"yes",
        "getlistwhere":"",
        "joins":"",
        "cmpmaincaption":"",
        "cmptabcaption":"",
        "cmptabdescription":"",
        "cmptabcontroller":"",
        "winbuttons":"",
        "onsubmitsuccess":"",
        "submitparams":""
    },
    "columns":[
        {
            "MIGX_id":1,
            "header":"ID",
            "dataIndex":"id",
            "width":50,
            "sortable":true,
            "show_in_grid":1,
            "renderer":"",
            "clickaction":"",
            "selectorconfig":"",
            "renderchunktpl":"",
            "renderoptions":"[]"
        },
        {
            "MIGX_id":2,
            "header":"Заголовок",
            "dataIndex":"pagetitle",
            "width":300,
            "sortable":true,
            "show_in_grid":1,
            "renderer":"this.renderRowActions",
            "clickaction":"",
            "selectorconfig":"",
            "renderchunktpl":"",
            "renderoptions":"[]"
        },
        {
            "MIGX_id":3,
            "header":"Цена",
            "dataIndex":"price",
            "width":100,
            "sortable":true,
            "show_in_grid":1,
            "renderer":"",
            "clickaction":"",
            "selectorconfig":"",
            "renderchunktpl":"",
            "renderoptions":"[]"
        },
        {
            "MIGX_id":4,
            "header":"Опубликован",
            "dataIndex":"published",
            "width":100,
            "sortable":"false",
            "show_in_grid":1,
            "renderer":"this.renderCrossTick",
            "clickaction":"",
            "selectorconfig":"",
            "renderchunktpl":"",
            "renderoptions":"[]"
        },
        {
            "MIGX_id":5,
            "header":"Удален",
            "dataIndex":"deleted",
            "width":"",
            "sortable":"false",
            "show_in_grid":"0",
            "renderer":"",
            "clickaction":"",
            "selectorconfig":"",
            "renderchunktpl":"",
            "renderoptions":"[]"
        }
    ]

}

Как указать разделитель в inputTV для migx

Понадобилось мне быстро соорудить что-то, с помощью чего можно было бы админить галерею типа этой.

Создал TV типа migx, прописал в нем конфиги и — помимо всего остального — понадобилось в описании вкладок формы прикрепить дополнительный инпут типа «listbox-multiple» (множественный выбор), точнее, создать с помощью «inputTVtype», указав нужный «inputOptionValues». Этот TV нужен, чтобы прикреплять к дивам выбранное манагером значение атрибута, чтобы сортировать дивы по категориям.

Всё прекрасно работает, в чанке выводится, но… не получается задать разделитель для вывода TV. А без этого значения атрибута, если заданы несколько, выводятся подряд — вплотную друг к другу — без пробела.

Если бы я создавал обычный TV, тогда было бы всё понятно — в настройках есть поле, где указывается разделитель. А как в таком случае поступить, не подскажете? Быть может, есть стандартный для json способ дописать параметр? Честно, почти день убил — не нашел ничего…

Вот сами конфиги tv migx:

1.Вкладки формы:

[{ "caption": "Item", "fields": [{ "field": "title", "caption": "Title" }, { "field": "description", "caption": "Description", "inputTVtype": "textarea" }, { "field": "link", "caption": "Link" }, { "field": "image", "caption": "Image", "inputTVtype": "image" }, { "field": "listing", "caption": "listing", "inputTVtype": "listbox-multiple", "inputOptionValues": "CLASSIC==.branding||ELITE==.design||EFFECT==.photography||BACKLIGHT==.videography" }] }]

2.Разметка колонок(хотя, наверно, это уже лишнее):

[{ "header": "Title", "sortable": "true", "dataIndex": "title" }, { "header": "Description", "sortable": "true", "dataIndex": "description" }, { "header": "Link", "sortable": "false", "dataIndex": "link" }, { "header": "Image", "sortable": "false", "dataIndex": "image", "renderer": "this.renderImage" }, { "header": "listing", "sortable": "false", "dataIndex": "listing" }]

ЗЫ: Создать отдельный TV с типом «listbox-multiple» и прикрепить его к migx TV не предлагать!)))

Всем заранее спасибо!

Отправить ответ

avatar
  Подписаться  
Уведомление о