Using conditional statements in Module Layouts

Apr 26, 2014 5:36 pm

Module layouts can make use of conditional statements, which add an additional level of control and flexibility. Conditional statements contain the word "if":
"If (something) is the case, then (something)."

Accrisoft Freedom allows you to put these types of statements, along with HTML, into module layouts.

Formatting
HTML-style <if> and <else> tags are used to make conditional statements in Freedom. Below is an example of a very simple conditional statment:

<if [[category]]='Press Releases'><h1>Press Release</h1></if>

In this example from a News Articles detail layout, the header text will only display if the item's category is "Press Releases." Note the </if> tag to close the statement.

Here is an example of the same statement incorporating the <else> tag:

<if [[category]]='Press Releases'><h1>Press Release</h1><else><h1>General News</h1></if>

In this case, if the article's category is not "Press Releases," the header "General News" will display instead. Please note that there is no </else> tag, that the </if> tag closes the entire statement.

Basic Operators
Certain operators can be used as part of conditional statements. The basic operators available are:

  • And (&)
  • Or (|)
  • Equals (=)
  • Does not equal (!=)
  • Greater than (>)
  • Greater than or equal to(>=)
  • Less than (<)
  • Less than or equal to (<=)


These operators work like in the original example: <if [[category]]='Press Releases'>. Note that the value, in this case Press Releases, is in single quotes.

Mathematical Operators
In addition to simple operators, you can use mathematical operators

  • Modulus Operator, which computes a remainder (%)
  • Multiplication (*)
  • Division (/)
  • Subtraction (-)
  • Addition (+)

An example of using a mathematical operator is using the modulus operator to determine if the row in a lister is even or odd so you can alternate the background color:

<if [[#]]%2=0><tr class="even"><else><tr class="odd"></if>

If it's an even numbered row, the row number divided by two will have a remainder of zero. Otherwise, it won't. Setting a different background color for the .even and .odd classes in the stylesheet will let you display alternating row colors on the lister.

A Practical Example
One common use of conditional statements is to display information only if it exists in Blue. For example, there are many fields you can fill out in Blue when adding a news article, and most of them aren't required. If you set up the layout to display the article's author like this:

<span class="newsAuthor">Author: [[author]]</span><br />

and a certain news article doesn't have the Author field filled out, on the live website you'll just see "Author:" with a blank space after it:

However, you can use a conditional statement to display the Author line only if there has been something entered into the Author field:

<if [[author]]><span class="newsAuthor">Author: [[author]]</span><br /></if>

Now, when any news article displays, the text "Author:" will only display if an author has been added to that article. Otherwise, nothing from the above statement will display on the live website:

You could also use the <else> tag to display a message saying the author's name is unavailable:

<if [[author]]><span class="newsAuthor">Author: [[author]]</span><else><span class="newsAuthor">Author: Unavailable</span></if>

Oct 29, 2014 2:23 pm

Interestingly, you can also use the contents of another module layout within an <if> tag if the condition is formatted properly. For example, if you have some events which you only want to display on the calendar if the user is logged in, you could do the following:

First, create a membership login/logout layout named "is_logged_in" (or whatever you want) containing code which will display "true" if the user is logged in and nothing if they are not:


<if [[logged_in]]>true</if>

In the Item section of the events_glance_inner layout, surround your event markup with a conditional statement like this:


<if ([[layout.is_logged_in]] = 'true')>
<div><a href="[[detail_url]]">[[title]]</a></div>
</if>

Note: the parentheses surrounding the <if> condition are essential.