This document lists and shows examples for each of the the built-in Template Filters that are already registered with Modulo template system.

Template Filters

add

Adds the argument to the value. Example:

allow

Given an "allowed list" of comma separated strings, only permit values that exist exactly the "allowed list". If the value does not exist within the allowed list, it will produce an empty string (""). The fact that empty strings are "falsy" means you can chain together this filter with the default filter in order to provide a fallback as well, which is demonstrated in the third example. Examples:

Note: You should not use this for input validation for security purposes (use the backend instead, since any frontend code can be altered by users) or input validation, for which you use should pattern= instead since it's built in to HTML.

camelcase

Converts a kebab-case-style-string (like favored by HTML, or website URL slugs), among other formats, into a camelCase (like what's favored by JavaScript, others).

capfirst

Output given string with the first letter capitalized.

combine

Combine is for combining values, which results in a few different operations depending on type. For Arrays, it will combine them end-to-end. For Objects, it will attempt to "squash" them. See the following examples:

default

If the given value is Falsy, use the given default. Otherwise, use the value.

divisibleby

Returns true if the value is evenly divisible by the given argument.

entries

Convert the entire Object an Array format. If you only want one part of it, see the related values and keys.

escapejs

Escape special characters in a given string using JavaScript (specifically, JSON) escaping rules. If you have a string like "Hello\nWorld!" (where \n is a single new-line character), it will output Hello\nWorld! (that is, as "backslash-n" or two characters). It will also "double-up" any backslashes it encounters.

first

Retrieve the first item in an Array:

get

The "get" filter is very versatile. It's used for traversing complex data structures to retrieve values based on given "property path", or access properties based on the value of variables. Note that for Array types, it will use JavaScript logic of starting counting at 0 (e.g. counting index as 0, 1, 2 … ). Also note that it treats Array and Object types interchangeably: You can use dot (.) notation for either.

The following demonstrates 3 uses:

join

Formats an array to be comma-separated. Optionally, a different separator can be specified as an argument.

json

Formats given data as a JSON string. It takes one optional argument, that if specified, will cause indentation by the given amount.

keys

Show only the keys of the given Object, converted into an Array format. See also the similar values and entries.

last

Retrieve the last item in an Array:

length

Determine the length of the given value. This supports Strings, Arrays, and Objects. For Objects, it will return the number of properties on the object.

lower

Display the given string in all lowercase letters.

multiply

Performs the mathematical operation of "multiplication" of the given numbers.

number

Converts a String type to a Number type, so numeric comparisons can be made. Otherwise, the String type will default to alphabetically comparisons and operations.

See below for an example of using it to force numeric operations. In this example it's necessary since "5" comes after "1" alphabetically (e.g. just as "Jo" comes after "Anderson" alphabetically, despite "Jo" being shorter, "50" comes after "1000", even if, when read numerically, 1000 is greater than 50).

safe

By default, template variables automatically escape the output of every variable value. Specifically, >, <, ', ", and & are all turned into their "escaped" HTML equivalents, to prevent them from being interpreated as HTML tags.

|safe disables this feature. It "marks" the HTML as "safe" for inclusion, and thus allowed to be interpreted as HTML, and not just display the sourcecode to the user. Further reading on this topic is in the Templating section on "Escaping".

See below for example:

skipfirst

Takes all except for the first element. It's useful for skipping over data you don't need to process. You can skip more than one by specifying the optional argument. For example, "|skipfirst:10" will cause it to "skip the first 10".

Note that it's the opposite of |first. This means by combining these two filters, you can slice up your data for either displaying tables (as shown below), or even combine both on the same data to select. Tip for SQL developers: LIMIT and OFFSET correspond in behavior to |first and |skipfirst.

sorted

Sorts the given array, possibly by an object key specified:

subtract

Subtracts the argument from the value. Example:

tagswap

Given a string of HTML code, this will transform that HTML code by doing a simple find-and-replace operation, swapping one or more HTML tags for other HTML tags. A few examples of uses: Applying to templates (e.g. see renderas filter below), making quick previews of user-inputted HTML by substituting real HTML tags with components that generate previews, or to get around limitations of HTML with how certain tags behave differently when parsing (e.g. see how it's used in the -filter-content Processor to more conveniently construct <table> tags).

handles content in <table> and <td> tags differently than other tags).

. The result will be automatically marked as safe, since the only purpose of this tag is to output HTML.

The argument can be in the format of a String (using = to indicate substitution, separating each one by a space) or an Object. Examples of both below:

trim

Trims away whitespace and other unwanted text from the start and/or end of the given String. By default, it will only trim whitespace, but if given an argument, it will attempt to remove both whitespace, and what is specified, with a comma to separate beginning or end of the string. Example:

truncate

Cut off the given string after a number of characters specified by the argument. If it has to cut off the string, it will append an "ellipsis" character.

type

Attempts to figure out the JavaScript type of the given value, and returns the type, in all lowercase. Useful for acting differently when data, for example, is a Number, instead of a String.

renderas Sandboxing - Note that the child template will be isolated or "sandboxed" to only have access to properties of the one, specified object, meaning no CParts (e.g. state, props, etc.) will be available, unless those are explicitly included in the specified object. This is to simplify the child templates. However, sometimes it is desirable for the child template to behave just like the parent so you can quickly split up templates. To simply include another template without any sandboxing, use the include template-tag.

renderas

A highly useful filter that allows use of re-usable template snippets. Typically in the format of {{ state.data|renderas:trow }}, where state.data is some Object, and there exists a template like with the -name "trow" that renders that object. The typical usage of this is to take complicated bits of template code and refactor them into another smaller, more isolated, and less complicated helper, "child" template, that are referenced within the main template.

The "input" to renderas should always be an Object. The keys and values of that object will populate the "template variables" for that template, meaning you can access them directly as template variables within the child template. As an example, if we renderas with an Object like { "myTitle": "Newest entry" }, then within the child template the "myTitle" becomes a "top-level" variable. This means we can directly use syntax like {{ myTitle }} or {{ my-title }} (no need for "." syntax). Example:

reversed

Reverses the given input. Typically, this is used to reverse Arrays, such as when you want to iterate over an Array in the opposite direction using a {% for %} template-tag. If the input is a String or another data type, it will attempt to first convert to an Array.

upper

Display the given string in all uppercase letters.

values

Show only the values of the given Object, converted into an Array format. See also the similar keys and entries.

yesno

The |yesno filter converts the data into a string. The |yesno filter is a handy shortcut with many practical uses when generating HTML and displaying values from the database.

Typical usage

Without an argument, it will simply convert booleans to the words "yes" and "no". When an argument is provided, this will be used instead, and can end up being simpler than a full if statement. Examples of both below:

All behavior options

By default, it will convert true and other true values into "yes", false and other false values, and the "placeholder" null type into a "" (blank), since that is often used to designate something that is not yet defined (such as a null value in a database). When arguments are provided, these substitute these 3 options, as designated by commas. If a single argument is provided, then both "no" and "null" options get combined into "", and only "truthy" values will cause the given argument to show. With two arguments, the default behavior is replaced with the two alternaties. With 3 arguments, then a value is presented for the undefined third value as well.