Create a User Config Page in MODx

ModxI 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..

Comments Posted by Greg on Friday, January 8, 2010 at 2:29 pm.

Filed under CMS, CSS, Development, .

  • buddyrigotti
    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.
  • I use the GetField snippet to call those TVs into my template.
  • buddyrigotti
    Got it. Thanks! I thought for some reason the getfield snippet came shipped with Modx. I just installed it and works great! Thanks again.
  • buddyrigotti
    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.
  • 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.
  • Nick (MgrMgr dev)
    "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.
  • 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.
  • Chuck
    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+]
  • WOW, thanks for that snippet tip. Hadn't thought of that, very nice.
  • einsteinsboi
    Nice one Greg, thanks for sharing, I'll definitely try this out :)
blog comments powered by Disqus