Exploring MODx From the Inside: Using TV Input Types

Using TV Input Types

Input types determine what kind of field will be added to the document editing form. When creating a Template Variable, you need to select what kind of form field you want to use to collect the values from the individual documents. The input type you select depends on what kind of data you want, and what you want to do with it.

The Input Types

There are 17 different input types, corresponding to different types of input fields you can have in your document editing form.

Using Radio Buttons to Select a Stylesheet

In our template in the last chapter, we made a three-column template. I mentioned that you could use CSS to hide one of the columns and resize the others to make the same template two column. The home page would use all three columns, while the rest of the pages would use two.

We'll create a slightly more complex TV to simplify this choice of stylesheets for the page editor.

Create a new .css file to hide the right column and resize the center and left column. This variation will have the sidebar on the left; it would be just as easy to adjust the styling to have the sidebar on the right (or have no sidebars at all). Name it inner.css, and rename the original to home.css (you can change the path in the template's head to reflect this temporarily; we'll be putting our TV's tags there shortly).

/** inner.css - hide right sidebar, resize and reposition left and main sections **/
* html body {border: 0; margin: 0; padding: 0;}
body {font: 100%/1.25 arial, helvetica, sans-serif; background:#fff; color: #000;}

/********** Layout **********/
#masthead {width: 980px; margin: auto;}
#wrapper {width: 980px; margin: auto;}
/* reposition and resize */
#main {float: left; width: 75%; margin-left: 25%; min-height: 400px;} 
* html #main {display: inline;}
/* reposition */
#side1 {float: left; width: 25%; margin-left: -100%; min-height: 400px;}
/* hide */ 
#side2 {width: 1px; display: none;} 
#footer {width: 980px; height: 40px; margin: auto;}
.clearing {clear: both; height: 0; line-height: 0; font-size: 0;}

/********** Presentation **********/
/***** Masthead *****/
#masthead {height: 100px; background: green; color: white;}
#masthead h1 {padding: 0 20px;}
#masthead h2 {padding: 0 60px;}
#masthead ul {}
#masthead img {}
#masthead a {}

/***** Wrapper *****/
#wrapper {background: darkgreen;}

/***** Main *****/
#main {background: white;}
#main h2 {}
#main p {padding: 10px;}
#main ul {}
#main p a {}

/***** Side 1 *****/
#side1 {background: lightgreen;}
#side1 h2 {}
#side1 p {}
#side1 ul {}
#side1 p a {}

/***** Side 2 - hidden *****/
#side2 {}
#side2 h2 {}
#side2 p {}
#side2 ul {}
#side2 p a {}

/***** Footer *****/
#footer {background: darkgreen; color: #fff; padding-top: 10px; text-align: center;}
#footer p {}
#footer a {color: lightgreen;}
#footer #modxicon a {color: darkgreen;}

Now create a new TV like we did for the keywords meta tags. There are two ways we could handle this. We could make it a text input field, and the editor would have to enter the name of the .css file he wanted to use. We could make the two-column one the default value, and then he'd only have to edit the home page to set the file to home.css. But we'll make it even easier; we'll use two radio buttons and all he has to do is click the one that he wants to use.

Actually, there is a third option; we could use a single-select listbox. I prefer to have all my options out where I can see them, though, so I'll use the radio buttons.

If you really want to get fancy, create four .css files, one the original three-column, one with a left sidebar, one with a right sidebar, and one wide one with no sidebars. Then you'd need four radio buttons in the TV.

Home==home||Inner==inner

Create a TV

<link rel="stylesheet" type="text/css" href="assets/templates/legalized/[*stylesheet*].css" >

Choose which one you want for a given page when editing that page (by default it's set to Inner), and that's what will be inserted into the link url.

Keywords Template Variable

Using Checkboxes to Control Sidebar Content Blocks

In many sites you'll have sidebars that you want to have different content blocks for different pages. For example, you may want to have a login form only on the home page. You could use different templates for each of the pages you want to have different sidebars, but then you still have the problem of needing to remember which templates have what code when you want to change something across the site. The answer, of course, is to use Template Variables.

As might be expected with anything MODx, there are at least two ways to handle this situation. Similar to the above stylesheet options, you could just use a textarea or rich text input and the editor would have to put in the content he wants for each page. To make it easier, though, we could use a multiple select listbox or a set of checkboxes. I prefer to have all my options out where I can see them, so we'll use a set of checkboxes.

The only disadvantage to this is that you cannot change the order in which the blocks will appear; this is determined by the order in which the option values are entered when creating the TV.

<div class="sideblock" id="submenu">
[[Wayfinder? &startId=`[!UltimateParent!]` &level=`1`]]
</div>

Block 1=={{Block1}}||Block2=={{Block2}}||Block 3=={{Block3}}||Block 4=={{Block4}}

    <div id="side1">
        [*leftSidebar*]
    <!-- end side1 --></div>

One thing about this method is that MODx creates the check boxes in a vertical row. It would look better if these were in a nice neat horizontal row. To do that, we need to make a little change to the default stylesheet. The .css file is in manager/media/style/... and whichever theme you are using. MODxLight is the default. So if you haven't changed the default Manager style, then you'll want manger/media/style/MODxLight/style.css. Around line 229 you'll find the styles for the form fields for template variables. We'll need to add a line here:

.tmplvars br {display: none;}

Reload the Manager page with your browser's Reload button to reload the stylesheet. Now the radio buttons and the check boxes are lined up horizontally.

TV Checkboxes

We could also hack the manager/includes/tmplvars.inc.php file. On line 119 of that file we find the code for generating the checkboxes. At the end, it has a <br /> tag. Just remove the <br /> tag, or replace it with a non-breaking space or two if you prefer.

The help for the Input Options field says that you can use @BINDINGS for your data source. In this case, you could put the options in a chunk and use @CHUNK chunkname in the Input Options field. This would be easier to manage if you have a long list of options. Just make sure that the list is in the same form: name==value||name2==value2 etc.

URL, Email, Number and Date

Files and Images



to be continued...