Template Variable Input Types

There are a number of built-in template variable types.

Auto-Tag

Auto-Tag is a convenient template variable for using tags when blogging, have multiple categories a resource can belong to, or anytime you need a list of tags that have been used before. Every time you edit or create a resource with access to an auto-tag template variable, you will see the tags that were used before. You can easily click on priorly used tags to chose them in the list.

To make auto-tag tvs useful in the front end, you will need to set the output type to "Delimiter" and specify a delimiter of your choice, and/or use an output filter to present it in the way you prefer.
To output the tags in such a way that you each tag links to a certain resource and passes the tag in a GET parameter, you can use an output filter (snippet) as follows:

  if ($input == '') { return 'Error'; } // In case the TV is empty
  $tags = explode(', ',$input); // Based on a delimiter of ", " this will split each one up in an array
  foreach ($tags as $key => $value) { // Loop through the tags
    $output[] = '<a href="'.$modx->makeurl(9, '', array('tag' => $value)).'">'.$value.'</a>'; // Add it to an output array, with a link to resource 9 and the get parameter.
  }
  return implode(', ',$output); // Merge the output array and output

Check Box

Simple Usage

The basic usage of this is to simply define the field as a checkbox. You can control whether or not the box is checked by default or not by manipulating the "Input Option Values" and "Default Value" fields.

Checked by Default

• Input Option Values: My Option==1
• Default Value: 1

Unchecked by Default:

• Input Option Values: My Option==1
• Default Value: 0

The box will be checked by default as long as the value following the "==" matches the default value.

Advanced Usage

The Check Box input type allows multiple checkboxes to be displayed with a single TV. Set input option values in the option1==value1||option2==value2 format. To declare default checked checkboxes, supply the default value field with the option names, delimited by two pipes (||). You can use a @SELECT to select items from your database, e.g. Input option values:

@SELECT pagetitle, id FROM modx_site_content WHERE parent=35

If you are using multiple checkboxes like this, you will probably need to set the Output Type to "Delimiter" (e.g. a comma) so you can distinguish the values contained in each checkbox.

Date

This allows you to set both a date and a time.

You use the Date TV Output Type to change the format of the Date returned.

DropDown List Menu

Set input option values in the option1==value1||option2==value2||option3==value3 format. Make sure to choose an output type of delimited (or other of your liking) to be able to present this to the front-end in a certain manner. You can also use a @SELECT binding to select 2 columns, e.g.

@SELECT name, value FROM your_table

Also see Resource List TV type.

Email

This is a text field that comes with its own validation: only text that's in a valid email format will be accepted.

File

Creates a file input form to browse the server for a file. Files can be uploaded through the MODx File Manager. You can declare a default value file by specifying the path to the file.

Take extra note of relative file paths when using friendly url paths.

Hidden

A hidden field does not show up in the manager, so it's rare that you'd use this option. You can set a default value that can be retrieved on all pages using this variable. Another possibility is to store a Snippet that takes a page's ID as input.

HTML Area

This gives you a small WSYIWYG editor for the field. It looks exactly like the Richtext fields.

Image

Creates an image input form to browse the server for a file. Files can be uploaded through the MODx File Manager then.

In MODX 2.2+ there are no input options for Image TVs anymore. Instead, head over to the "Media Sources" tab and choose a media source to assign to this TV for every context. You can configure base paths and the like in the Media Source.

1) You can declare a default value file by specifying the path to the image.

2) If you want to limit the images used for this TV to a specific folder, you can specify (since Revolution 2.1) a base-path and base-url. You can also set relative or absolute paths. Take extra note of relative file paths when using friendly url paths.
For correct display of images in frontend and backend be sure to have correct settings in base_url and base_path settings!

3) You can prepend URL if filepath doesn't begin with a trailing slash. 

4) You can specify file extensions that can be selected.

This input type returns the link (to be used as src attribute) to the image. You can also set the whole html-img-tag as a output-type.

Listbox (Single-Select)

Listbox (Multi-Select)

This behaves similar to the checkbox fields: you can select multiple items, and this field can be powered by a @SELECT binding in its "Input Option Values" parameter. Like checkboxes, you probably want to set the "Output Type" to delimiter so you can distinguish between values.

Number

This is another text field with some pre-emptive validation. You literally cannot type anything but the digits 0 to 9, the minus sign (-) , and a period (i.e. a decimal point). A validation error is triggered if you enter more than one decimal point or minus sign. Complex numbers (e.g. using radicals "^" or "e" are not supported).

Note that trailing zeros are truncated, e.g. 4.50 gets trimmed to 4.5; this may make this input type unsuitable for currency fields.

Radio Options

Simple Usage

The basic usage of this is to provide a list of radio option. You can control the default option by manipulating the "Input Option Values" and "Default Value" fields.

Selected by Default

• Input Option Values: My Option==1
• Default Value: 1

The option will be selected by default as long as the value following the "==" matches the default value.

Advanced Usage

The radio option can be used to output more than simple numerical values.  One such example is using the radio option to determine the chunk used for a sidebar.

Set your input option values using the format Title==value the title will show in the manager, and the value will be output on the page.  To declare multiple options use two pipes (||) after the value, before the next options title.

Sidebar Example EvolutionInput Option Values: Related==related-call]]||Content==[\*sidebar-txt\*]||Twitter=={{twitter
Default Value: related-call

Sidebar Example Revolution
Input Option Values: Related==[[]]||Content==[[\*sidebar-txt]]||Twitter==[[]]
Default Value: [[]]
In the above examples, you can output a chunk or another Template Variable without the aid of an extra.

Resource List

Supply the definition with a resource ID, and you'll end up with a drop down list of all pages/resources that are children of that resource. The value stored after you've made a selection is the ID of the single selected resource.

This is similar to using a @SELECT binding in a DropDown list menu, but the Resource List will traverse the entire resource browser, whereas with a @SELECT binding, you'd have to update your query to list children of each parent.

Rich Text

See HTML Area.

Tag

This appears to look and act just like a standard text field.

Text

This is a vanilla text field.

As of MODX 2.1, there are three input options you can set for this TV:

• Allow Blank: yes/no, when "no" the resource cannot be saved without it being filled in.
• Max length: a number representing the number of characters that can be filled in in this field.
• Min Length: a number representing the minimum number of characters needed to be filled in. May want to use this with the allow blank option to "no".

Textarea

This is a standard textarea field, with a height of 15 rows. It's the same size as the HTML Area fields, but without the WYSIWYG editor.

Textarea (Mini)

This is a smaller textarea field, with a height of only 5 rows.

Textbox

This appears to be exactly the same as the vanilla Text field.

URL

This is a guided text field, which a dropdown option to select the protocol: none, http://, https://, ftp://, or . No validation is performed to ensure the correctness of the URL structure.