I’ve formerly written a couple of posts (Create a User Config Page in MODx & MODx Config Page, A Practical Example) about creating and using a Config page in MODx that allows a developer to easily build some additional functionality into MODx Evolution for an end user. This usually involves text fields (business name, street address, telephone number, etc.) that are called into the template footer, or image fields for a javascript slider or even PDFs for easy to upload calendars and specials.
While I can implement this approach in my sleep for Evo, until recently I hadn’t set aside the time to learn how to duplicate this technique for MODx Revolution. As with most things Revo it’s not that difficult, just different.
Getting Started, Nothing New
Set aside a document in Revo to function as your Config page. Document ID #1 is easiest, just don’t forget to set the site start ID to #2 in System Settings. Also, hide this document from the menus and the site search.
You will want to create a new template, let’s call it Config, and assign this template to document ID #1. Following this you can go in and create Template Variables (TV) and assign each TV to the new Config template.
Up to this point the process is essentially unchanged from the equivalent technique that I have previously described for Evo.
Digging Deeper
The new snippet in this process is getresourcefield. It can be installed from the Package Management area of Revo and in this example replaces the use of the GetField snippet in Evo. This is used to reach into the Config document and retrieve any TV value(s). This approach can also be extended, as I described in Create a Dynamic CSS File in MODx, to allow the end user the control over just about any of your site’s CSS values as well.
Next comes Form Customizations, these functions are now core to MODx and replaces the ManagerManger snippet used in Evo. Learning the ins and outs of customizing the Revo manager can be a bit of a task, but once learned appears to be a powerful set of tools. The rest of this post will focus on the implementation of the Form Rules necessary to create this MODx config page.
The Rules
In this example I am going to leave the text input type TVs in the Template Variables tab of my Config template, will create a new tab that will hold images for a javascript slider, will move my image input type TVs to the new tab, will hide all additional tabs and will hide my content field.
The end result will be a document page that has only two tabs, the first with text input type TVs and the second with image input type TVs (see below).
Note: I would suggest creating any Tab Creation rules first as there currently seems to be a bug that will cause some issues otherwise.
Each list item below contains a link to a screenshot for individual Update Rules:
- Create your new tab
- Hide the default tabs for resource/update (the Name field is a comma separated list: modx-resource-access-permissions,modx-resource-settings,modx-page-settings)
- Hide the default tabs for resource/create (the Name field is a comma separated list: modx-resource-access-permissions,modx-resource-settings,modx-page-settings)
- Hide the content field (it seems that the content field is not located within any of the tabs, so a singular Update Rule must be created to hide it)
- Move Image TVs to Slider Images tab (the Value field can be a comma separated list which should be formatted with the ID of the TV preceded by ‘tv’, I had a little trouble with this one, thanks BobRay!)
As I mentioned above, learning to create and manipulate the Form Customization Rules can be challenging, but with the 5 rules above you can create a custom Config page for you end users.
