Using custom fields in HTML templates

Custom fields allow you to store information in Ezus that is specific to your account and your way of working.

You can display this information in an HTML template, but the syntax depends on where you are using the custom field.

There are two main cases:

Outside a loop: use the classic custom field variable from the Variable Drawer.
Inside a Jinja loop: retrieve the custom field from the current object's custom_fields.

💡Before adding a custom field to your HTML template, identify where the field is configured and which object it belongs to. A project custom field and an activity custom field do not use the same context.

1. Find the technical name of the custom field

Custom fields have a technical name that is used to identify them in templates.

The technical name is particularly important when you retrieve a custom field from an object inside a Jinja loop.

For example, imagine you have a custom field called:

Additional information

with the technical name:

additional_information

The value you need to use in the HTML is the technical name, not necessarily the visible name of the custom field.

💡 Copy the technical name directly from the custom field configuration. This helps avoid errors caused by spaces, punctuation, or differences between the visible name and technical name.

2. Use a custom field outside a loop

When the custom field is available as a standard Ezus variable, find it in the Variable Drawer.

In HTML, classic custom fields use a specific syntax.

For example, instead of:

$$project.{{description}}$$

use:

$$project.__description__$$

Here, description is the technical name of the custom field.

This syntax is used when you are working with a classic Ezus variable rather than a current object inside a Jinja loop.

💡If the custom field is available in the Variable Drawer, copy it from there rather than rebuilding the variable manually.

3. Use a custom field inside a loop

Inside a Jinja loop, the custom field belongs to the current object.

For example, if you are looping through activities:

{% for activity in activities %}   {{ activity.custom_fields.additional_information }} {% endfor %}

In this example:

activity is the current activity in the loop.
custom_fields gives access to its custom fields.
additional_information is the technical name of the custom field.

If each activity contains a different value for Additional information, Ezus retrieves the corresponding value for each activity as the loop is generated.

The same principle applies to other objects that expose custom fields, including:

Steps
Accommodations
Transport
Travellers
Suppliers
Products
Packages

For example, inside the corresponding loop, the structure follows the same logic:

{{ step.custom_fields.technical_name }}

{{ accom.custom_fields.technical_name }}

{{ transp.custom_fields.technical_name }}

{{ supplier.custom_fields.technical_name }}

{{ product.custom_fields.technical_name }}

Replace technical_name with the technical name of the custom field you want to display.

🔭 See Using loops in HTML templates to learn how to create and work with repeated content.

4. Custom fields with special characters

Some technical names contain punctuation or other special characters.

In this case, dot notation may not work correctly.

Instead of:

{{ activity.custom_fields.technical_name }}

use brackets and quotation marks:

{{ activity.custom_fields["technical_name"] }}

For example, if the technical name is:

_01_-additional-information--_

use:

{{ activity.custom_fields["_01_-additional-information--_"] }}

💡If a custom field does not display even though the field contains information, check its technical name first. If it contains punctuation or special characters, try bracket notation with quotation marks.

5. Preserve line breaks in multi-line custom fields

A custom field can contain several lines of text, but HTML does not necessarily preserve those line breaks when the webpage is generated.

If a multi-line custom field appears as one continuous line, use CSS to preserve the line breaks.

For example:

white-space: pre-line;

You can apply this to the HTML element displaying the custom field.

For example:

<p style="white-space: pre-line;">   {{ activity.custom_fields.additional_information }} </p>

If you also want to preserve spaces in addition to line breaks, use:

white-space: pre-wrap;

You can also apply the rule globally to paragraph elements:

<style>   p {     white-space: pre-line;   } </style>

⚠️A global CSS rule applies to all matching elements in the template. If you apply white-space: pre-line; to every <p> element, check the complete generated webpage to make sure other paragraphs are not affected unexpectedly.

6. Add a clickable link inside a custom field

If the content of a custom field needs to include a clickable link, use an HTML link:

<a href="https://example.com" target="_blank">Text to show</a>

For example:

<a href="https://example.com" target="_blank">View more information</a>

The URL should start with:

https://

This allows the link to open when the content is displayed in the generated webpage.

7. Troubleshoot a custom field

If a custom field does not display correctly, check the following:

Does the custom field contain a value?
Check the source information in Ezus.
Are you referencing the correct object?
An activity custom field must be retrieved from the activity context, a product custom field from the product context, and so on.
Is the technical name correct?
Compare the name in your HTML with the technical name configured in Ezus.
Does the technical name contain special characters?
If so, use bracket notation:
```
{{ activity.custom_fields["technical_name"] }}
```
Are you using the correct syntax for the context?
A classic custom field from the Variable Drawer and a custom field inside a Jinja loop do not use the same syntax.
Has a multi-line field lost its line breaks?
Use white-space: pre-line; or white-space: pre-wrap;.

⚠️ An empty result does not necessarily mean that the HTML syntax is incorrect. Check that the custom field is populated on the specific object used to generate the webpage before modifying the template.

8. Test your custom field

After adding a custom field to an HTML template:

Save the template.
Generate the webpage with a project where the custom field contains information.
Check that the expected value appears.
If the custom field is inside a loop, check several generated items rather than only the first one.
Test the same template with an empty custom field to make sure the surrounding layout still works correctly.
If the field contains multiple lines, special characters, or links, check those elements in the generated webpage as well.

💡 For custom fields inside loops, test with several objects containing different values. This makes it easier to confirm that the template is retrieving the custom field from the current object, rather than displaying the same information repeatedly.