1. AdvSearch
      1. AdvSearch.AdvSearch
        1. AdvSearch.AdvSearch.tpl
        2. AdvSearch.Advsearch.paging1Tpl
        3. AdvSearch.AdvSearch.paging0Tpl
        4. AdvSearch.AdvSearch.containerTpl
        5. Advsearch.AdvSearch.extractTpl
      2. AdvSearch.AdvSearchHelp
        1. AdvSearch.AdvSearchHelp.helplinkTpl
      3. AdvSearch.AdvSearchForm
        1. Advsearch.AdvSearchForm.tpl
    2. userTools
    3. ActivationEmail
    4. BotBlockX
    5. CacheClear
    6. CacheMaster
    7. Canonical
    8. Captcha
    9. CaseInsensitiveURLS
    10. ClassExtender
    11. ConstantContact
    12. ConvertDatabaseCharset
    13. DefaultResourceGroup
    14. DefaultUserGroup
    15. DirWalker
    16. EmailResource
    17. EZfaq
    18. FileUpload
    19. FixedPre
    20. getDynaDescription
    21. GoRevo
    22. LexiconHelper
    23. LogLogins
    24. LogPageNotFound
    25. MandrillX
    26. MessageManager
    27. NewsPublisher
    28. Notify
    29. ObjectExplorer
    30. Orphans
    31. Personalize
    32. QuickEmail
    33. ReflectBlock
    34. RefreshCache
    35. SiteAtoZ
    36. SiteCheck
    37. SizeMatters
    38. SPForm
    39. StageCoach
    40. Subscribe
    41. SyntaxHighlighter
    42. ThermX
    43. UpgradeMODX
    44. cookieJar
    45. getYoutube
    46. aliasid
    47. AddHeaderfiles
    48. AjaxUpload
    49. amazonSES mailing list
    50. Analytics
    51. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    52. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    53. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    54. BannerX
    55. BannerY
    56. Batcher
      1. Batcher.Roadmap
    57. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    58. boilerX
      1. bx-head-open
      2. bx-head-append
      3. bx-head-close
      4. bx-container-open
      5. bx-container-close
      6. bx-bottom-open
      7. bx-bottom-close
    59. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    60. Breadcrumbs
    61. BxrExtra
    62. cachebuster
    63. CamperManagement
      1. CamperManagement.Customizing the Component
      2. CamperManagement.Developing the front-end
        1. CamperManagement.cmCamperDetails Snippet
        2. CamperManagement.cmCampers Snippet
        3. CamperManagement.Placeholders you can use
      3. CamperManagement.Managing your vehicle
      4. CamperManagement.Module home
    64. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    65. Cliche
    66. ClientConfig
    67. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    68. Collections
    69. ContextRouter
    70. CookieList
    71. CronManager
    72. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    73. CustomUrls
    74. Databackup
    75. Discuss
      1. Discuss.ChunkMap
      2. Discuss.Contributing
      3. Discuss.Controllers
        1. Discuss.Controllers.board
          1. Discuss.Controllers.board.xml
        2. Discuss.Controllers.home
        3. Discuss.Controllers.login
        4. Discuss.Controllers.logout
        5. Discuss.Controllers.profile
        6. Discuss.Controllers.register
        7. Discuss.Controllers.search
        8. Discuss.Controllers.thread
      4. Discuss.Creating a Discuss Theme
      5. Discuss.Database Model
      6. Discuss.Features
      7. Discuss.Getting Started
      8. Discuss.Installation
        1. Discuss.Installation from Git
      9. Discuss.Roadmap
      10. Configuring Sphinx for Search
    76. DitsNews
    77. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    78. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    79. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    80. EventsX
      1. EventsX.Examples
    81. ExerPlan
    82. fastField
    83. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    84. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    85. FirstChildRedirect
    86. Flexibility
    87. ForcedPasswdChange
    88. FormIt
      1. FormIt.FormItCountryOptions
      2. FormIt.FormItRetriever
      3. FormIt.FormItStateOptions
      4. FormIt.Hooks
        1. FormIt.Hooks.email
        2. FormIt.Hooks.FormItAutoResponder
        3. FormIt.Hooks.math
        4. FormIt.Hooks.recaptcha
        5. FormIt.Hooks.redirect
        6. FormIt.Hooks.spam
        7. FormIt.Hooks.FormItSaveForm
      5. FormIt.Roadmap
      6. FormIt.Tutorials and Examples
        1. FormIt.Examples.Custom Hook
        2. FormIt.Examples.Simple Contact Page
        3. FormIt.Handling Selects, Checkboxes and Radios
        4. FormIt.Using a Blank NoSpam Field
        5. Form and anchors
      7. FormIt.Validators
    89. FormIt2db
    90. FormitFastPack
      1. FormitFastPack Tutorial
      2. fieldSetDefaults
      3. field
      4. fiGenerateReport
      5. fiProcessArrays
    91. FormSave
    92. FoundationX
      1. FoundationX.How to Use FoundationX
    93. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    94. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
        3. Assigning a Gallery album to a specifc resource
      3. Gallery.GalleryAlbums
        1. Gallery.GalleryAlbums.rowTpl
        2. Gallery.GalleryAlbums.containerTpl
      4. Gallery.GalleryItem
        1. Gallery.GalleryItem.albumTpl
        2. Gallery.GalleryItem.GalleryItemPagination
        3. Gallery.GalleryItem.tagTpl
        4. Gallery.GalleryItem.tpl
      5. Gallery.Plugins
        1. Gallery.Plugins.Galleriffic
        2. Gallery.Plugins.Slimbox
      6. Gallery.Roadmap
      7. Gallery.Setting Up the GalleryItem TV
      8. Gallery.Setting Up Your Gallery
    95. GatewayManager
    96. gCal
    97. getDate
    98. getFeed
      1. getFeed.Adding a Twitter Feed
    99. getPage
    100. getRelated
    101. getResourceField
    102. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    103. getUrlParam
    104. getRTImages
    105. getVimeo
    106. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
      3. GoogleSiteMapVersion1
    107. GridClassKey
    108. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    109. Hits
    110. HitsPage
    111. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    112. If
    113. Image+
    114. imageHERE
    115. ImageStyles
    116. ImportX
    117. LexRating
    118. Lingua
    119. Login
      1. Login.ChangePassword
      2. Login.ConfirmRegister
      3. Login.ForgotPassword
      4. Login.Login
      5. Login.Profile
      6. Login.Register
        1. Register.Example Form 1
      7. Login.ResetPassword
      8. Login.Roadmap
      9. Login.Tutorials
        1. Login.Basic Setup
        2. Login.Extended User Profiles
        3. Login.Request Membership
        4. Login.User Profiles
        5. Login.Using Custom Fields
        6. Login.Using Pre and Post Hooks
      10. Login.UpdateProfile
    120. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    121. mChimpX
    122. MetaX
    123. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    124. MIGX
      1. MIGX.Backend-Usage
      2. MIGX.Data-Entry
      3. MIGX.Frontend-Usage
      4. MIGX.Tutorials
        1. MIGX.Fancybox-images with seperate placeholders in Richtext-Content
        2. MIGX.Simple opening hours table
        3. Using resource-specific mediasource and multifile-uploader with MIGX
        4. MIGX.Varying layout-boxes
          1. MIGX.Varying layout-boxes.Configurator-Version
        5. Creating Selectable and Sortable lists for MIGX
        6. MIGX.sortable resourcelist
        7. Using resource-specific mediasource and multifile-uploader with MIGX (Old Version)
        8. MIGX.Using Grid Inline Editing
    125. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
          1. Add resource-specific mediasource and multifile-uploader to the gallery
          2. Add Image-Tagging to the Gallery
        2. MIGXdb.Create doodles manager with help of MIGXdb
        3. MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb
        4. MIGXdb.Manage Events-Resources in a CMP with help of MIGXdb
      3. MigxCalendars
    126. MinifyX
    127. miniShop2
      1. miniShop.Screenshots
    128. modActiveDirectory
    129. ModDef
    130. modExtra
    131. modMobile
    132. modSwiftMailer
    133. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    134. mxExtendedMenu
    135. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    136. mxHasTvs
    137. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    138. ObfuscateEmail-Revo
    139. PackMan
      1. PackMan.Roadmap
    140. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    141. Peoples
      1. Peoples.PeopleGroup
        1. Peoples.PeopleGroup.userTpl
      2. Peoples.PeopleGroups
        1. Peoples.PeopleGroups.tpl
      3. Peoples.Peoples
        1. Peoples.Peoples.tpl
      4. Peoples.Roadmap
    142. PHP Tidy (plugin)
    143. phpThumbOf
    144. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    145. POI Manager
    146. QuickCrumbs
      1. QuickCrumbs.Example
    147. Quip
      1. Quip.Quip
        1. Quip.Quip.tplComment
        2. Quip.Quip.tplCommentOptions
        3. Quip.Quip.tplComments
        4. Quip.Quip.tplReport
      2. Quip.QuipCount
      3. Quip.QuipLatestComments
      4. Quip.QuipReply
        1. Quip.QuipReply.tplAddComment
        2. Quip.QuipReply.tplLoginToComment
        3. Quip.QuipReply.tplPreview
      5. Quip.QuipRss
      6. Quip.Roadmap
      7. Quip.Upgrading
        1. Quip.Upgrading to 1.0.1
    148. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    149. Redirector
    150. renderResources
    151. ResourceWatcher
    152. RezImgCrop
    153. Rowboat
      1. Rowboat.Rowboat
    154. sekFancyBox
      1. sekFancyBox & Gallery
    155. sekFormTools
      1. sekFormTools.input.autocomplete
      2. sekFormTools.input.combobox
      3. sekFormTools.input.datepicker
      4. sekFormTools.input.helper
      5. sekFormTools.input.textfield
      6. sekFormTools Advanced Examples
    156. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    157. sekUserGalleries
      1. sekUserGalleries.album.items.helper
      2. sekUserGalleries.album.items.manage
      3. sekUserGalleries.album.manage
      4. sekUserGalleries.album.view
      5. sekUserGalleries.browse.galleries
      6. sekUserGalleries.directory
      7. sekUserGalleries.image.information
      8. sekUserGalleries.search
      9. sekUserGalleries.users.gallery.manage
      10. sekUserGalleries.users.gallery.view
    158. selfLink
    159. Shopkeeper
    160. siblingNav
    161. SimpleCart
    162. SimpleSearch
      1. SimpleSearch.Roadmap
      2. SimpleSearch.SimpleSearch
        1. SimpleSearch.Faceted Search Through PostHooks
        2. SimpleSearch.SimpleSearch.containerTpl
        3. SimpleSearch.SimpleSearch.currentPageTpl
        4. SimpleSearch.SimpleSearch.pageTpl
        5. SimpleSearch.SimpleSearch.tpl
      3. SimpleSearch.SimpleSearchForm
        1. SimpleSearch.SimpleSearchForm.tpl
      4. SimpleSearch.Solr
    163. SiteEditor
    164. sitemapFriend
    165. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    166. sLink
    167. SmartOptimizer
    168. SmartTag
    169. StatCache
    170. SocialLogin
    171. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    172. spieFeed
    173. StaticSaver
    174. StoreLocator
    175. SubscribeMe
      1. SubscribeMe.Configuring API Credentials, IPN and going Live
      2. SubscribeMe.Setting up the Payment Flow
        1. SubscribeMe - Listing the Products
        2. SubscribeMe - Setting up the Payment Methods
        3. SubscribeMe - Subscription Confirmation Page
      3. SubscribeMe.User Account Management
    176. SyntaxChecker
    177. Tagger
    178. TaggingAtoZ
    179. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    180. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    181. Upload to Users CMP
    182. VersionX
      1. VersionX.Roadmap
    183. virtuNewsletter
      1. Mailgun integration
    184. Wayfinder
      1. Wayfinder Introductory Examples
    185. xFPC

MIGX.Backend-Usage

Last edited by Rob Liberty on Jul 17, 2017.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

How the MIGX Custom Template Variable (TV) Works

The MIGX TV allows you to store complex data items as one TV. These data items are stored as JSON. This documentation page assumes that you have a working knowledge of JSON.

Each complex data item can have multiple fields associated with it. These fields can be (almost) any standard or custom MODX TV input type. These data items are defined in the "Form Tabs" field. Items can be sorted by tabs as defined by the JSON.

Creating your first MIGX TV

Sample MIGX configurations are stored under /core/components/migx/examples/. We will be referring to "tabs.txt" for this documentation page. This documentation page assumes that you have the add-on TinyMCE installed.

tabs.txt shows a sample implementation of a simple image gallery. The image gallery will consist of one complex data item that uses one richtext field (an image description), one image field (the image itself), and a short string (a caption). This short string will not be stored in a separate TV.

"Helper" TVs still work but are no longer needed; use inputTVtype: instead of inputTV:

Step 1: Create the MIGX aggregate TV

  • fill in a name, caption, description, and category as you would for any other TV
  • give the template access for which you would like to add data items. In this example, perhaps "Gallery"
  • select MIGX as the input type

Step 2: Configure the MIGX input type

For your first MIGX TV, we are only concerned with two textarea fields: "Form Tabs" and "Grid Columns"

Step 2.1 Form Tabs

The Form Tabs define the structure that end users will use to input their data.

Content of tabs.txt:

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

That's a lot of JSON -- let's break it down. The first key you see is entitled "Caption". This refers to the name of the first tab. The tab will be labeled "Info".

The second key you see is entitled "fields". This refers to each of the fields that will be accessible from that tab. The fields are stored as a nested JSON string. Let's break these down.

The first key within the nested JSON string is entitled "field". This refers to the placeholder that MIGX will generate that we will access later with getImageList. For the first item, we have labeled it "title". This refers to the short string mentioned above. The second key is labeled "caption". This refers to the label that the end user will see when they're filling in a data item. Let's label it "Title" so that our users know they're filling in the title of the image.

The second key within the nested JSON string is entitled "description". We have three keys this time: the first, "field", refers to the placeholder that we will access later. The second, "caption", is the label the user will see. The third, "inputTVtype", refers to the type of field that we want to use.

We're done with the first nested JSON string. We can now see that there is a second tab -- this one has a label of "Image" and specified an inputTVtype of "image". To specify a Media Source for the image, add another key "sourceFrom":"migx" and assign the MIGx TV to a media source using the TV's Media Sources tab.

We are now halfway done with our first MIGX TV. We have now created the form for each of the individual data items. The keys for each field are listed below in a table for your viewing convenience. Let's now define the summary view of the data items using Grid Columns in Step 3.2

Key Description
field this is the name for your placeholder to use with getImageList and a template
caption this will be the caption in your form for the end user to see
description this is the description in your form, if empty MIGX will use the description of the inputTV, if any
inputTV Pick either this or "inputTVtype". If you use this, specify the name of the TV that you would like to use. This is useful if your data type requires any custom functionality (ie, a default value, output options, etc). You can use the same input TV for different fields (ie, if you have an object that has multiple images).
inputTVtype Pick either this or "inputTV". If you use this, specify the name of the TV type that you would like to use. This is useful if your data type does not require any custom functionality.

Step 2.2 Grid Columns

In the grid columns, we're specifying the summary view that users will see to view their information.

Content of columns.txt:

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

Here is some more JSON for us to tackle! This JSON shows the caption of the image as well as a preview of it. Let's break it down.

The first key, "header", refers to the header label that will be used to categorize the fourth key, "dataIndex". The dataIndex refers to the placeholder that we've specified above in the form tabs. The first entry here uses the dataIndex we specified above of "title". We also have two more keys: width and sortable. The width defines the relative width of the column, and sortable defines whether the grid is sortable by that column.

The second entry has a fifth key: renderer. This key allows us to render a view of the image here.

We're now done specifying our first MIGX TV. Feels great, right? Make sure you click save.

Don't forget to save your Resource after adding or editing MIGX items!

We're now half done our MIGX experience. Next step: Data Entry

The keys for this grid are listed here:

Key Description
header the caption of the column
sortable if the columns is sortable by clicking the header
dataIndex the field, you want to render into this column
renderer you can use a renderer for each column. For example the included function "this.renderImage". This will render an image-preview in the grid-cell, if you are using an image-TV for this field.

Advanced MIGX Configuration

Multiple Forms

Content of switchFormTabs.txt

[[
{"formname":"image_description", "formtabs":
[
{"caption":"Info", "fields": [
{"field":"title","caption":"Title"},
{"field":"tpl","caption":"Tpl","inputTV":"tplDropdown"},  {"field":"description","caption":"Description","inputTV":"richtext"}
]},
{"caption":"Image", "fields":[
{"field":"image","caption":"Image","inputTV":"image"}
]}
]
},{"formname":"textonly", "formtabs":
[
{"caption":"Info", "fields": [
{"field":"title","caption":"Title"},
{"field":"tpl","caption":"Tpl","inputTV":"tplDropdown"}, {"field":"description","caption":"Description","inputTV":"richtext"}
]}
]
}]]

here we have an additional outer array with two keys.

key description
formname give each form an unique name. This is the value, which you will see in the generated dropdown to switch the form
formtabs this are the formtabs for this form

when using multiple forms this will produce an additional field with name 'MIGX_formname'.
You can use the value of this field to switch tpls in the frontend by using &tpl=`@FIELD:MIGX_formname` and create chunks with the same names as your formnames or you can add an additional field (listbox-TV with name tpl for example) to choose the output-tpl for this item.

Preview Feature

MIGX has a preview featured that allows you to see rendered output of items in an iframe window. In order to use this preview feature, you need to create a preview resource. This resource should have content like:

[[!getImageList? &tpl=`@FIELD:MIGX_formname`&tvname=`multiitemsgridTv`]]
[[!getImageList? &tvname=`multiitemsgridTv2`]]

If you have multiple calls on the preview resource you will also need unique values for each TV in 'Preview JsonVarKey' - default is 'migx_outputvalue'

Once you have filled out the field 'Preview Url' you will have an additional button 'Preview' on your MIGX-TV, which shows the preview window with content of your preview resource.

Inline Editor

To edit fields directly within the MIGX grid, simply add "editor": "this.textEditor" or "editor": "this.listboxEditor" to the Grid Columns JSON of the field you wish to make editable:

{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title", "editor": "this.textEditor"}

Comment Policy

Comments intended to help other users with this document are welcome! If you have a suggestion for this Extra document, please attempt to contact the author directly, possibly on GitHub or in the MODX Community Forums.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab) or become an editor of the MODX Documentation.