How can I format placeholders with Liquid markup?

Question

How can I format placeholders with Liquid markup? 

Answer

Today we'll focus on output markup and using filters to modify placeholder output. Output markup (such as our placeholders) is surrounded by matched pairs of braces, {{ticket.ticket_id}} for example. A filter is a simple method that acts on the output markup. The filters modify the output and the result is displayed as a string. The output and the markup are separated by a vertical bar, or "pipe" (|), and the overall format is {{ output | filter: }}.

You can see all of the standard filters on the Liquid for Designers page. To illustrate the concept, let's look at two real-world examples that use filters to modify a placeholder output.

Example 1: Showing only the last element in nested custom ticket fields

When building custom drop-down fields, you can nest the structure using double colons - "::". For example, if you make a drop-down with options of "Support::Password", "Support::Performance", "Billing::Invoice", and "Billing::Refund", the end user will first select either "Support" or "Billing" and then choose the options within these categories. You can output custom ticket fields like this in a placeholder, following the format {{ticket.ticket_field_ <field ID number> }}.

However, this default placeholder format does not take nesting into account. The output for the above example would be "Billing::Invoice", which shows the double colons. To show the last element only, "Invoice", we will use two filters in combination. The first filter, called "split", splits the string up on a matching pattern ("::"). The second filter, "last", gets the last element of the passed-in array. Because we want to split on "::" that is what will go after the split filter:

{{ticket.ticket_field_<field ID number> | split:"::" | last }}

Tip: The same principle applies if you want to return only the first element of a nested field. Simply use the "first" filter instead of "last."

Example 2: Changing the default date formatting

Some ticket placeholders, such as {{ticket.created_at}}, return a date. These dates are by default in the dd/mm/yyyy format, which may not be appropriate for your region or users. This date format can be modified by using the "date" filter.

In this example, I will demonstrate changing dates to the mm/dd/yyyy format. To do this, we add the date filter to our placeholder and type out the date format we want.

{{ticket.created_at | date: "%d/%m/%Y"}}

This will show the day of the month, month of the year, and year with century in that order. You can control how you would like dates to display using the full date filter syntax.

Now you can modify your placeholder output to fit your needs. Use Liquid markup filters to bring Zendesk Support's customization options to the next level! Full documentation for Liquid is available at Liquid for Designers.