Template Variables (TV's) Explained with Example (For Newbies)

Template Variables is one thing that sets MODx apart from other CMS’s.

What is a template variable?

Think of "TV’s" as document objects. Expression Engine calls them "Custom Entry Fields".

From Expression Engine:
"Custom Entry Fields
Each weblog can have its own unique set of entry fields. These can be input boxes, pull-down menus or textareas."

The difference: TV’s have much more flexibility. TV’s are Custom Entry Fields that can be any of the following:
- Pull-down menu
- Checkbox
- File
- Text (Input box)
- Textarea
- Rich text area
- Listbox (single-select)
- Listbox (multiple-select)
- URL
- Email
- Date
- Number

Also, you have multiple ways to display the input in these fields such as:
- DataGrid
- Floating Div
- Marquee
- Ticker
- IFrame

So what does this mean? Let’s say you have a client that needs to create pages that have a Title, Author, Content, Custom Image header, Start Date, End Date, and 4 custom fields named Where, Who, Why, How.

With MODx TV’s, you don’t hack your way around and telling your customer to create a table and fill in the items where they go. Instead you create the following TV’s (or document objects).
1. TV #1
- name: tvImageHeader
- input Type: File
- Widget: Image
- Default Value: (If you need a default Image)

2. TV#2
- name: tvStartDate
- input Type: Date
- Widget: Date Formatter

3. TV #3
- name: tvEndDate
- input Type: Date
- Widget: Date Formatter

4. TV #4
- name: tvWhere
- input Type: text
- Default Value: (if needed)

5. TV #5
- name: tvWho
- input Type: text
- Default Value: (if needed)

6. TV #6
- name: tvWhy
- input Type: text
- Default Value: (if needed)

7. TV #7
- name: tvHow
- input Type: text
- Default Value: (if needed)


Why would I use these?

When you use TV’s, the content creator does not have to bother with HTML formatting or design.

How do I use these then?

In your template (or ditto), you will place these TV’s as placeholders where you want them to appear, and MODx will fill in the details for you.

Example:



Now the content creator does not ever have to deal with how the site looks. You create the fields they need, they fill them out, and the page will populate to look as pretty as you want it to be.

I hope this helps some people (switch from Expression Engine) and understand TV’s. They give you, the designer or developer, a great flexibility for your clients or content creators.

Chuck

If anyone finds any errors or would like to expand on this to include radio options, select lists, or other types, please do so. I am a newbie with this too.

Chuck

The main problem I’m having with at the moment is trying to find out if there’s any sort of conditional display functionality. Your example above assumes that all fields will be used in all cases. On the other hand, I need the following(recycling your template):

...so that if a particular variable wasn’t given a value, absolutely nothing is shown on the front end. In your example, there would be orphaned "Why" and "How" headings, which is just ugly.

Is there something I’m just not seeing about the core templating(this seems like something that should be a basic function), or a snippet that takes care of this?

There are several ways to do what you need, but personally I use a snippet that calls the value of that TV before returning output:



If you name your snippet "outputWhy" then you would just add [[outputWhy]] to your template where you want to show that information.

Hi,

PHx is the answer ==>http://wiki.modxcms.com/index.php/PHx

This plug-in allows if else statement on template variables, document properties and many other thing.

It’s a must have.

:-)

I have a question about TV’s. (I think TV’s are good for this)

I want to have some sideblocks and top blocks for my site. Here is an example:


I am coming from Joomla and am used to being able to turn on and off a side block for a particular page. How can I:
a: have multiple side blocks that can be turned on/off per page (a checkbox TV maybe?)
b: have each side block editable per page (like normal) with inheritance (if checked to show)
c: for the top modules, do something like ’if (left block && right block), then topper == %50, elseif (left block || right block), then topper == 100%, else topper == hidden?

Thanks for any feedback. I plan on adding this to collection to the wiki.

Chuck

Great info! Thanks.

Can TV’s be used to call script javascript SRC’s in the page head? The idea being that different pages need different javascripts running under the same template?

Greg.

Yes, use

or

Hi,

here is a way to easily do it.

Create a TV (type checkBox) named "jsCall" or whatever you want

Create as many chunks as needed with JS code inside
for instance {{chunkJS1}}

Then edit your tv options and insert:
namejsTools1=={{chunkJS1}}||namejsTools2=={{chunkJS2}}

Attach the TV to your template

In your template add [* jsCall*] where the tv output must be displayed
Then you can choose per page which js to include

:-)

That’s what I really love about MODx, there are lots of different ways to do things, you’re not tied in to any one way!