As an event organizer using ClearEvent, you have the power to create custom lists of registrants that can be tailored to your event's unique needs. This guide will help you understand how to use advanced templating features to render these custom lists, ensuring your event management is as efficient and personalized as possible.
Example: Using a custom template to display Speaker information
Using the List Template feature:
The List Template feature is an advanced template that can be found in the Page Editor for the Page Type is set to Registrant List.
To enable a custom list template:
Go to the Event Setup section > Event Pages tab.
Add or edit a Registrant List Event Page (Page Type = Registrant List).
Enable the Use List Template checkbox.
Modify the Custom List Template field to include the appropriate field placeholder values.
Understanding the Template Structure
At the core of creating a custom registrant list is a template that uses HTML combined with placeholders. These placeholders are designed to be substituted with actual registrant data, allowing for a dynamic and flexible way to display information about your event's participants.
Default Template:
<div>
<img src="{{Photo}}" alt="Speaker Name" class="card-profile-image"/>
<div>
<h1><span class="fa fa-user"></span> {{FirstName}} {{LastName}}</h1>
<h2>{{JobTitle}}</h2>
<h3>{{CompanyName}}</h3>
<p>{{Bio}}</p>
{% if LinkedInUrl %}
<a href="{{LinkedInUrl}}" target="_blank" class="card-button card-button">View LinkedIn Profile</a>
{% endif %}
</div>
</div>
This default template shows a Speaker registrant record as a card that includes a profile picture, first name, last name, job title, company name, bio, and if present, a button to direct visitors to the registrant's LinkedIn profile page. The placeholder fields (e.g. `{{Bio}}` map to custom fields that were added to the Speaker's registration form.
Key Concepts
HTML Foundation: Your template must be built on well-formed HTML. This means ensuring that every tag that requires a closing tag has one, attributes are correctly formatted, and the structure of your document adheres to HTML standards. This ensures your list will be displayed correctly across all devices and browsers. Important: If your HTML template is not well-formed, the Event Page may fail to load.
Placeholders: Placeholders are simple markers within your template that get replaced with actual data from your registrants. They typically look like
{{FirstName}},{{LastName}},{{CompanyName}}, etc., and are substituted with select field values when the template is rendered.
CSS Classes: ClearEvent provides built-in CSS classes that help format specific types of data, such as dates, monetary values, or names. These classes can be used to ensure consistency and professionalism in the appearance of your lists. Available CSS classes include:
CSS Class Name | Description |
card-profile-image | Formats a standard profile image with square corners. For example: |
card-profile-image-rounded | Formats a standard profile image with rounded corners. For example: |
card-profile-image-circle | Formats a standard profile image within a circle. For example: |
card-profile-image-responsive | Formats a standard profile image to be responsive and fill 100% of the available display area width. For example: |
card-profile-image-small | When combined with card-profile-image, displays a smaller sized profile image. For example: |
card-profile-image-medium | When combined with card-profile-image, displays a medium sized profile image. This is the default image size for all cards. |
card-profile-image-large | When combined with card-profile-image, displays a large sized profile image. For example: |
card-button | Displays a element such as an HTML Anchor element or Button element as a button, with one button per line. For example: |
card-button-inline | Displays an element such as an HTML Anchor element or Button element as a button, with multiple buttons on a single line. For example: |
text-primary | Displays text using the primary brand color. For example: |
text-secondary | Displays text using the secondary brand color. For example: |
fa fa-{icon} | Displays an icon from the font-awesome icon set. For example: |
Steps to Customize Your Template
Start with HTML: Define the overall structure of your list using HTML. Use the default template as a starting point. The root of the template must be wrapped in a parent
<div>...</div>element. Consider how you want to group and display information. In the example above, we're creating an unordered list where each registrant is an item within that list. We recommend using standard HTML elements to organize your content (likeh1,h2,h3,img,p,br,aelement tags).Insert Placeholders: Determine what registrant information you want to display in your list. Insert placeholders at the appropriate points in your HTML structure. Ensure the placeholders match the Fields that you selected to display for the Event Page's linked Registrant Type.
Apply CSS Classes: Use ClearEvent's built-in CSS classes to format specific elements. For example, to apply formatting to an profile image, you can add a class like
class="card-profile-image"to your<img/>HTML element.Validation: Ensure your HTML is well-formed. This includes closing all tags, using quotes around attributes (for example:
<h1 class="text-primary">My Heading</h1>), and nesting elements correctly. Incorrect HTML can lead to display issues.Preview and Test: Before finalizing your template, preview it to see how it renders with actual registrant data. This is crucial for catching any issues with placeholders, formatting, or HTML structure.
IMPORTANT: If your template contains errors, it may prevent the Event Page from loading correctly.
Advanced Tips
Conditional Rendering: If you're comfortable with more advanced techniques, you can incorporate conditional logic into your template. This can be useful for displaying certain information only if it exists or meets specific criteria. In the following example, if the field named
LInkedInUrlhas a value, then the contents between the conditional logic markers{% if LinkedInUrl %}and{% endif %}will be displayed:
{% if LinkedInUrl %}
<a href="{{LinkedInUrl}}" target="_blank" class="card-button card-button">View LinkedIn Profile</a>
{% endif %} Custom Styles: While we recommend using the built-in CSS classes to apply styling to certain elements, you can also use the
styleattribute to apply basic styles to HTML elements.
Conclusion
Creating custom lists of registrants with advanced templating features in ClearEvent offers a powerful way to tailor how registrants are displayed on your Event Portal. By understanding how to effectively use HTML, placeholders, and CSS classes, you can create professional, informative, and visually appealing lists. Remember to preview and test your templates thoroughly to ensure the best experience for your event staff and participants.
Still have questions?
Chat with us!