I have always wished that MODx posessed a tool to allow an end user some direct configuration control over their site. I realize that it is possible to grant users access to HTML chunks, but this is not within the comfort zone of most non-tech users. After playing around with it in our sandbox over the last few days I have found that it is not only possible, but relatively straight forward to create.
Create Template
In my sample site I created a template and called it Config. I then assigned it to my document ID of 1 and named my document Site Configuration. One by-product of using the number 1 document is that you will have to go to Tool/Configuration/Site and set you Site start to an ID of 2. I also unchecked Show in menu and Searchable in my number 1 document. With all of these points taken care of the config page should be well outside the ordinary flow of your site.
Create Template Variables
By utilizing a dedicated template we can now hook Template Variables (TV) into our document. Create your TVs and assign them to the Config template.
In the most straightforward sense you can use this for client controlled global information like telephone numbers and addresses, but after getting things going I realized you could also use a dynamic CSS document from within MODx (a later post) and allow the end user to control many of the design components of their site. I tested this out on things like a header image and background colors.
In my testing I was exclusively using the GetField snippet (see below) to call in my variables from within either my site template or from my dynamic CSS document:
background: [[GetField? &docid=`1` &field=`backgroundColor`]];
In this particular TV I used a DropDown List Menu to assign Hex codes to colors for example:
Red==#FF0000||Green==#00FF00||Blue==#0000FF
After putting all this together I did wonder if the addition of a color picker that generates Hex color codes might not be a nice addition to the Input Type of TVs in MODx? (I was reminded by Nick (MgrMgr dev) in the comments below that: “ManagerManager includes a color picker widget to allow you to pick any hex color value from a TV, if you want to expand it beyond a predefined list.”)
Clean It Up
Now, you can use the ManagerManager snippet to remove any extraneous fields from the Site Configuration document. In this example I removed all of them except my newly created TVs. Now, when my end user goes into their configuration they only see the appropriate configuration fields listed out: Telephone, Address, City, State, Zip, Background Color, Header Image, etc..
Nice one Greg, thanks for sharing, I'll definitely try this out
January 8th, 2010 at 8:59 pm
I've been doing that as well for complex sites. It works really well. Thanks for sharing again. One good thing about using TVs is you can let different levels of administrators edit different settings.
One thing I have also done is load all templates through a snippet like so:
$configTVs = $modx->getTemplateVarOutput(true, 1);
foreach($configTVs as $key => $value) {
$modx->setPlaceholder('settings.'.$key, $value);
}
Then you can use any of the settings via [+settings.TVNAME+]
January 9th, 2010 at 4:54 am
WOW, thanks for that snippet tip. Hadn't thought of that, very nice.
January 9th, 2010 at 5:05 am
“After putting all this together I did wonder if the addition of a color picker that generates Hex color codes might not be a nice addition to the Input Type of TVs in MODx? “
ManagerManager includes a color picker widget to allow you to pick any hex color value from a TV, if you want to expand it beyond a predefined list.
January 9th, 2010 at 10:35 am
Thanks for the comment. I remember seeing the documentation on that now that you say that. ManagerManager is one of those tools that was really a game changer for me. I amended my post to include your comment.
January 9th, 2010 at 2:21 pm
Nice post Greg. I was just getting ready to try this exact thing out for a new set of clientele. I am thinking you could also link this template to automatically fill in an address for a Google map (for a contact page, for example). I think the possibilities are really endless.
Do you think it would be better if you placed the configuration page inside a “System Pages” container (along with 404 page, sitemap, etc) and linked to it from the manager dashboard? You could use something like “index.php?a=31&id=5″, for example.
January 9th, 2010 at 5:38 pm
That's an interesting idea, especially linking it from the dashboard. I suppose it depends on who the user is. I sometimes use a container like that to organize those types of pages. In this instance I was assuming this was intended for an end user with very limited skill sets. I would usually hide all those other pages from this type of user using the permissions on the parent container.
That's what I like so much about MODx, it really can be so many things depending on your needs.
January 9th, 2010 at 5:55 pm
Using the Config Page with eForm at Greg Smart says:
[...] my previous post I described how I created an end User Configuration Page in MODx. I strongly suggest you look that post over before reading this [...]
January 14th, 2010 at 11:39 am
Greg,
You say, “In the most straightforward sense you can use this for client controlled global information like telephone numbers and addresses”. This is exactly what I am trying to do. I've followed your steps, but I'm stuck on how to actually get the addresses, phone, etc to show up on each page of the website.
How do I link the info in the TV's to each page of the site? Thanks.
January 17th, 2010 at 9:31 pm
I use the GetField snippet to call those TVs into my template.
January 17th, 2010 at 9:37 pm
Got it. Thanks! I thought for some reason the getfield snippet came shipped with Modx. I just installed it and works great! Thanks again.
January 17th, 2010 at 9:40 pm
Create a Dynamic CSS File in MODx | Greg Smart says:
[...] a previous post, Create a User Config Page in MODx, I referenced how you could create a dynamic CSS document in MODx. While on most of my development [...]
February 11th, 2010 at 9:57 am
MODx Config Page, A Practical Example | Greg Smart says:
[...] case you missed my earlier post, Create A User Config Page in MODx, I thought I would describe another practical example of how we have used this Config Page [...]
May 21st, 2010 at 7:31 am
Greg, thanks for this post. I've just started using this technique after reading a thread in the MODx forum about it. I've approached this in a slightly different matter than you have by settings as the default value for each 'global TV' as @INHERIT. I then include that TV on each relevant page of the site.
I have not used the GetField snippet, though…will check that out.
June 28th, 2010 at 7:34 pm
Gregory, here is alternative solution with simple plugin: http://unix.am/blog/modx/extended-settings
All TVs of template with alias “settings” mixing with MODx settings, and you can use native [(background_color)] construction in templates, chunks and template variables.
August 7th, 2010 at 8:57 am