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.
- Text - a simple text field.
- Raw Text - a simple text field. This isn't used any more; use Text.
- Textarea - a textarea field.
- Raw Textarea - a textarea field. This isn't used any more; use Textarea.
- Textarea (mini) - a small textarea field.
- Rich Text - a textarea with the code necessary to use the default manager's Rich Text Editor.
- DropDown List Menu - a select field. Using this type requires filling in options in the Input Option Values field.
- Listbox (single select) - a drop-down list box that allows a single selection. Using this type requires filling in options in the Input Option Values field.
- Listbox (multiple select) - a drop-down list box that allows multiple item selection. Using this type requires filling in options in the Input Option Values field.
- Radio Options - radio buttons; only one option can be selected. Using this type requires filling in options in the Input Option Values field.
- Check Box - check boxes; multiple boxes can be checked. Using this type requires filling in options in the Input Option Values field.
- Image - Opens the Manager's resource manager to allow selection of an image and/or the upload of an image. As with inserting images into the Rich Text Editor, images are stored in the assets/images folder. The TV output will be the image's filename.
- File - Opens the Manager's resource manager to allow selection of a file and/or the upload of a file. As with inserting links to files into the Rich Text Editor, files are stored in the assets/files folder. The TV output will be the filename.
- URL - a text field.
- Email - a simple text field.
- Number - a simple text field.
- Date - a text field with the manager's javascript date selection/removal widgets.
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.
- Name the TV "stylesheet", with a caption "Stylesheet", and a description "Choose a stylesheet".
- We'll be using an input type of "Radio Options" for this TV, so pick that one from the Input Type drop-down.
- Now we need to put something in the Input Option Values field. The syntax for multiple option elements depends to some degree on what the element is. In all cases, the options are separated by double pipe characters, ||.
Home==home||Inner==inner
- This will give two radio buttons, with captions of Home and Inner, and values of home and inner.
- Set the default value to "inner".
- Check the box next to the template you want to use this TV with.
- Now, in your template head, in the link to the css file, simply replace the file's name with the TV tags [*stylesheet*].
<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.
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.
- Create chunks for each block. The chunk should contain the full HTML elements that contain the block's content. For example, for a submenu block:
<div class="sideblock" id="submenu"> [[Wayfinder? &startId=`[!UltimateParent!]` &level=`1`]] </div>
- Create a new TV and name it "leftSidebar".
- Enter a caption of "Left Sidebar", and a description "select the content blocks to use on this page."
- Select "Check Box" as the Input Type.
- In the Input Option Values field, put your chunk tags, separated by || delimiters:
Block 1=={{Block1}}||Block2=={{Block2}}||Block 3=={{Block3}}||Block 4=={{Block4}}
- You can leave the Default Value empty, put in a default chunk (use the chunk tags here) or use the @INHERIT binding.
- Make sure to check the box for the template you want to use this TV with then save the TV.
- Go to your template and put the TV tag in the container div for the left sidebar:
<div id="side1">
[*leftSidebar*]
<!-- end side1 --></div>
- Edit your pages and select the blocks you want to show in the left sidebar.
- Edit the TV and duplicate it. Name the duplicate rightSidebar. Make sure you have the chunks you will want to use for the right sidebar in the Input Options field, and that the checkbox for the template is checked.
- Add the TV's tags to the right side div in the template.
- Edit the home page and choose the blocks you want in the right sidebar.
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. MODxCarbon is the default. So if you haven't changed the default Manager style, then you'll want manger/media/style/MODxCarbon/style.css. Around line 1437 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.
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.
Files and Images
Both File and Images input types will display a text field for entering a path or URL to a file or an image, with a button to open the default MCPuk javascript file browser (the code is in /manager/media/browser/mcpuk) for selecting an existing file or image or uploading a new one, with the Files browser set to view the assets/files folder and the Images browser set to view the assets/images folder.
To work correctly, it is vital that your main site Configuration settings for Resource Path and Resource URL are correct. You'll also need to have sufficient permissions to read and write files and folders in these directories.
Your paths and URLs can be checked by using the phpinfo() view link in Reports -> System Info. Scroll to the bottom PHP Variables section of the phpinfo() view, and look for the _SERVER["DOCUMENT_ROOT"] value. The _SERVER["SCRIPT_FILENAME"] value can also give you a clue; your actual Resource Path will need to be the path up to /manager, with /assets added. Remember that a path is not the same as a URL; in a path the leading / will mean the root of your server's filesystem, while in a URL the leading / will mean the root of your webspace (usually something like htdocs or www in the filesystem path).
And here are the settings in my local development site's configuration. As you can see, the path is an absolute path from the server root, while the URL is a relative URL from the root of the MODx installation.
The permissions required for accessing the assets/files and assets/images folders on your server will depend on what your server platform is (Windows, linux etc) and how your server's web server and PHP environment are configured. On UNIX-like systems (linux, solaris, bsd etc) you can usually set these from your FTP client. You may be able to set them from your domain's control panel. If you have problems, consult with your hosting provider.
URL, Date, Email and Number
- the URL type will provide a drop-down to select the type of URL - http, https, ftp or mailto. Enter the url in the text field. The URL will be output where you place the TV tags. No HTML tags are included; this is just the plain URL. Tags can be added using the Hyperlink output widget.
- The Date type will present a text field and two Javascript date pickers, one to select a date and one to remove the date. The calendar widget from manager/media/calendar is used. The date is saved as a string in the format day-month-year hour:minutes:seconds; for example 27-09-2008 23:04:47.
- The Email input type is a plain text input field.
- The Number type is also a plain text input field.
Comment On This Article
Do you find something unclear? Did I miss something or get something wrong? What do you like or not like about this chapter? Please do not ask for help here; use the forums if you need help.
