Наверх

MIGX - компонент для ModX. Краткий обзор, готовые конфиги

В разделе «Репосты» расположены чужие статьи, которые мне понравились или показались полезными.

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

При нажатии «Добавить элемент» может открываться модальное окно с формой для ввода данных, а может просто добавляться строка в конец таблицы, которую можно тут же заполнить без лишних манипуляций.

Поведение и свойства отображения элементов можно гибко настраивать через менеджер MIGX, а можно просто экспортировать JSON объект с готовыми настройками.

Для начала MIGX нужно установить через стандартный установщик приложений ModX, в процессе установка предложит вам выбор: где расположить пункт меню, ведущий в Менеджер MIGX, я рекомендую расположить его в меню «Приложения»(Extras/Components). Зайдя в Менеджер MIGX, перейдите на вкладку «MIGX», где вы увидите пустую табличку.

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

Я рекомендую для начала воспользоваться готовым конфигом моего производства для добавления партнеров: github.com/Jonybang/ModX-tehniques/blob/master/MIGX/partners.js

Для этого просто назовите как-нибудь вашу конфигурацию(типа «my-config») и сохраните её, нажав «Выполнено». После чего через контекстное меню откройте окно для экспорта/импорта JSON объекта конфигурации и вставьте туда содержимое моей конфигурации.

Теперь можете сохранить и наконец создать привычное Дополнительное поле(TV), назвав его, к примеру, migx-partners и выбрав тип ввода «migx», после чего появится поле «Конфигурации», в которое можно ввести имя нашего конфига.

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

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



Теперь вы можете попробовать добавить в него элемент и посмотреть на поведение таблицы, но вы не увидите тех красивых галочек со столбца «Активный» как у меня на скринах, так как вы не добавили их изображения в папку assets/img.

Но не беспокойтесь, я подготовил для вас эти изображения в том же репозитории, где располагаются мои конфиги: github.com/Jonybang/ModX-tehniques/tree/master/MIGX/assets/img Пользуйтесь на здоровье, или поставьте те, которые вам больше нравятся.

Итак, давайте попробуем разобрать основные моменты конфигурации, чтобы не действовать совсем в слепую, а хоть немного понимать с чем работаем:
«formtabs» — вкладки модального окна, если присутствует только одна вкладка, то они скрываются;
«caption» — отображаемое название чего-либо(будь то вкладка или поле);
«field» — уникальное название поля формы
«fields» — перечисление полей формы, находящиеся на данной вкладке, среди них:
«name» — текстовое поле «Название»
«url» — текстовое поле «Ссылка»
«image» — поле с выбором изображения — «Изображение»
«active» — список с одиночным выбором («Активный» или «Скрытый»).

Как вы наверно уже догадались «inputTVtype» дает возможность задать тип поля. Список TV типов можно посмотреть здесь.

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

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

На самом деле: если вам и понадобятся эти настройки(что бывает редко), то скорее всего все что нужно, можно будет настроить через интерфейс менеджера, но там довольно часто требуется ввести просто JSON конфиг, который часто трудно угадать.

Последним фрагментом идет конфигурация непосредственно столбцов.

Здесь основными полями являются «header» — отображаемое имя и «dataIndex» — указание значения «field» из первого фрагмента конфига: «tabs».

«editor» — возможность, недавно появившаяся в MIGX — отвечает как раз за то, чтобы можно было редактировать значения прямо в теле таблицы, не заходя в модальное окно редактирования.

Честно говоря, «dataIndex» необязательно должно быть существующим «field» полем из массива «tabs», бывают случаи когда нужно указать на несуществующее поле, например при использовании renderChunk, чтобы при сохранении сгенерированные значения в столбцах не испортили нам данные, как в случае на примере ниже:



И у меня в конфиге github.com/Jonybang/ModX-tehniques/blob/master/MIGX/yandex-maps.js

Это один из хаков, который мне удалось кропотливым и методичным поиском найти на просторах интернета, он позволяет выводить в таблице столбец, в котором можно прописать шаблон для вывода значений из соседних столбцов, пользуйтесь на здоровье :)

При этом dataIndex должен указывать на несуществующее поле ввода.

В менеджере MIGX это будет выглядеть примерно так:



Еще, помимо такой краткой записи шаблона вывода, есть возможно создать свой(custom) renderer, в котором с помощью адской смеси PHP и JavaScript можно описать вывод поля в табличке MIGX. Для этого нужно зайти в конфиг migx и добавить свой рендер по примеру уже существующих:



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

Таким образом можно создавать не только шаблоны и renderer, но и всякие handler и тому подобное, что участвует в работе с таблицами в MIGX. Буду очень рад, если вы в комментариях опишите свои интересные приемчики, которые обнаружили при работе с MIGX.

Но мы отвлеклись от основной задачи — использования нашего TV по назначению: для вывода заполненной клиентом информации на страницу.

Если вы попробуете вывести на страницу гольный вызов нашего доп. поля(например таким образом: [[*migx-partners]]) то вы увидите JSON, который представляет из себя массив объектов (по обьекту на каждую строку таблицы) с полями fields и значениями, которые контент менеджер задал при заполнениями.

Вы можете самостоятельно обработать JSON используя $collection = $modx->fromJSON($value) в сниппете, а можете воспользоваться готовым сниппетом от MIGX: getImageList, который предназначен специально для этой задачи:
[[!getImageList? &tvname=`migx-partners` &tpl=`partnerItem`]]

Таким образом он будет работать при вызове из ресурса, в котором присутствует это TV, если же вы хотите вывести данные MIGX TV со стороннего ресурса(например на Главной вывести Партнеров из соотвествующего раздела) то можно дополнительно указать переметр &docid=`5`, где «5» — id ресурса «Партнеры».

getImageList работает по аналогии с getResources: в tpl кладется имя чанка, создается соответствющий чанк вида:
<li>[[+idx]]. [[+field1]] - [[+field2]]</li>
где [[+idx]] — автоматическое нумерование;
[[+field1]], [[+field2]] — поля, которые мы задавали в Formtabs;
После чего сниппет в цикле вызывает чанк для каждой строки из получившейся таблицы MIGX, вставляя на место плейсхолдеров соответствующие значения.

Обзор получился достаточно объемным для «краткого», но такой-уж MIGX, довольно сложный для тех кто его ни разу не пробовал, а я постарался ориентироваться именно на таких новичков. А я ведь не касался еще темы MIGX DB, позволяющего работать непосредственно с базой данных: выводить и редактировать значения из её таблиц. В этой статье я постарался разобрать эту тему.

Источник: jonybang.blogspot.ru/2015/03/migx-modx.html


25 комментариев

  1. seoonly 04 апреля 2016, 04:57(Комментарий был изменён) # 0
    Спасибо-)
    1. Алексей 27 апреля 2016, 10:02 # 0
      Как в getImageList передать несколько docid и сделать where запрос с OR?
      1. Илья Уткин 27 апреля 2016, 10:18 # 0
        Никак. MIGX хранит данные в JSON. Тут только писать свой сниппет, который сначала получит значения ТВ для нескольких ресурсов, а потом отфильтрует ненужные.
      2. Антон 14 мая 2016, 18:13 # 0
        Здравствуйте Илья, подскажите как передать из formit данные в migx. Может где пример хука есть?
        1. Антон 15 мая 2016, 14:29 # 0
          Есть такой снипет но он выдает ошибку:
          Fatal error: Call to a member function getValue() on a non-object in C:\OpenServer\domains\hotel23.ru\core\components\console\processors\exec.class.php(15): eval()'d code on line 22

          <?php
          $page = $modx->getObject('modResource', 132);
           
          $value = $page->getTVValue('appartaments');
          $items = $modx->fromJSON($value);
            
          $next_id = 1;
          //get the next MIGX_id
          if (is_array($items)){
              foreach ($items as $item){
                  $id = $modx->getOption('MIGX_id',$item,0)+1;
                  if ($id > $next_id){
                      $next_id = $id;
                  }   
              }
          }else{
              $items = array();
          }
             
          $item = array(
              'MIGX_id'       => $next_id,
              'appname'          => $hook->getValue('appname'),
              'appcaption'          => $hook->getValue('appcaption'),
              
          );
          $items[] = $item;
             
          if (!$page ->setTVValue('appartaments', $modx->toJson($items))) {
            $modx->log(modX::LOG_LEVEL_ERROR,'There was a problem saving your data!');
            return false;
          }else {
              return true;
          }
          В чем проблема?) запускал в консоли
          1. Илья Уткин 21 мая 2016, 13:30 # 0
            Хм… Не знаю… Я, к сожалению, не сталкивался с такой задачей, готового примера нет…
          2. Олег 17 мая 2016, 10:44 # 0
            Как работает переключатель активный/скрытый? При переключении опций ничего не происходит((
            1. Илья Уткин 21 мая 2016, 13:31 # 0
              Это репост. Я думаю, можно уточнить у автора по ссылке: http://jonybang.blogspot.ru/2015/03/migx-modx.html
              1. Олег 22 мая 2016, 19:54 # 0
                Спасибо за ответ
            2. Константин 20 июля 2016, 11:46 # 0
              Илья, подскажете пожалуйста как получить JSON строку для item в tpl?
              Т.е. есть готовое или сниппет писать?

              [[!getImageList? &tvname=`migx-partners` &tpl=`partnerItem`]]

              Т.е. в чанке partnerItem получать для записи JSON

              Мне нужно для атрибута data-json=«JSON», потом я его в js использую
              1. Илья Уткин 20 июля 2016, 11:53 # 0
                Ну, либо написать свой сниппет, который будет выводить записи в виде JSON, либо вручную прям в tpl
                { "name" : "[[+name]]" }
                1. Константин 20 июля 2016, 12:22(Комментарий был изменён) # 0
                  Понял, значит сниппет, спасибо Илья!
                  У тебя на сайте еще G+ регистрации не хватает :)
                  1. Александр 14 октября 2016, 14:35 # 0
                    Илья, подскажи пож-та, можно ли получить данные migx на странице из другого ресурса?
                    как это делает вот такая конструкция [[#1.nameTV]] например. спасибо
                    1. Илья Уткин 15 октября 2016, 11:02 # 0
                      Конечно. У сниппета getImageList есть параметр docid.
                      1. Александр 15 октября 2016, 14:00 # 0
                        Спасибо. и еще вопросик, как мне вывести документы с пагинацией, если их будет более 20. Есть способ? Как? Могли бы пример кода скинуть. спасибо.
                        1. Илья Уткин 15 октября 2016, 14:41 # 0
                          [[!pdoPage?
                            &element=`getImageList`
                            &tpl=`tpl.migx`
                          ]]
                          [[!+page.nav]]
                2. Александр 21 октября 2016, 12:40 # 0
                  Илья, а где можно примеры и описание параметров inputTVtype для migx посмотреть? спасибо.
                  1. Илья Уткин 24 октября 2016, 13:26 # 0
                  2. Евгений 31 октября 2016, 23:43 # 0
                    А подскажите пожалуйста, вот сейчас если создать таблицу migx через tv, потом зайти в ресурс и добавить таблицу новый элемент, то он всегда будет добавляться в конец списка (в админке).
                    А можно ли сделать так, что бы новые добавленные элементы вверху отображались?
                    1. Илья Уткин 01 ноября 2016, 07:54 # 0
                      Не знаю, я такого не видел
                    2. Александр 09 ноября 2016, 16:18 # 0
                      Добрый день. Илья, подскажите пожалуйста а как вытащить с migx определенное поле с джейсона?

                      спасибо.
                      1. Илья Уткин 09 ноября 2016, 16:21 # 0
                        $json = $resource->getTVValue('migx_tv_name');
                        $arr = $modx->fromJSON($json);
                        return $arr[0]['name'];
                      2. Константин 04 декабря 2017, 19:17 # 0
                        Илья, не подскажешь почему migx не растягивает таблицу на всю ширину?

                        joxi.ru/D2PVZOJspPzOqr

                        Аль придется самому через extjs править
                        1. Илья Уткин 05 декабря 2017, 11:21 # 0
                          Я обычно добавляю такие стили в админку: /mgr/style.css. Тут и указание ширины для таблицы и небольшие украшательства форм ресурса…
                          1. Константин 05 декабря 2017, 18:52 # 0
                            Спасибо Илья) Поправил)
                            Я думал есть какой посложнее прием))

                        Авторизация

                        через сервис Loginza:

                        Подписка или RSS

                        Буду присылать новые статьи — никакого спама



                        Шаблоны MODX

                        1 2 Дальше »

                        Объектная
                        модель
                        MODX