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 photo, first name, last name, job title, company name, bio, and if present, a button to direct visitors to the registrant's LinkedIn profile page.
Placeholders
You can substitute any data you have collected through a registration form into the Custom List Template using placeholders. Placeholders enclose a form field's Short Field Name in curly braces (e.g. "{{Bio}}").
To display a form field in a Registrant List Custom List Template you must:
Choose the Registrant Type (e.g. "Speaker") then click the Fields button to choose which fields will be included.
Select the field you wish to add, then click the +Add button:
Click the OK button.
These fields will now be available to add to the Custom List Template.
Using Text Placeholders:
Most fields you collect on your registration form will contain simple text data.
In the default template shown above, the placeholder fields map text answers for form fields from the "Speaker Registration" form into the template that will be used to display each registrant. Examples of text placeholders are:
{{FirstName}}: A built-in user profile field containing the registrant's first name.
{{LastName}}: A built-in user profile field containing the registrant's last name.
{{JobTitle}}: A custom form field containing the registrant's job title.
{{CompanyName}}: A custom form field containing the registrant's company.
{{LinkedInUrl}}: A custom form field containing the registrant's LinkedIn page.
Using Image Placeholders
It is possible to display images collected on your registration form in a custom registrant list template. To do this, a few extra steps are required when setting up your registration form:
In the Registration section > Forms tab > Form Designer > Fields tab, add a File field type to the desired registration form. This will allow an attendee to upload an image on the registration form.
Provide a value for the Short Field Name (e.g. "Headshot") and Label (e.g. "Please provide a headshot for your public event profile.") properties.
Set the File Type property to "Image".
Check the "Allow public access?" checkbox if you wish to later display this image in a Registrant List custom template on your Event Portal.
In the Event Setup section > Pages tab, add or edit a Registrant List page.
Select the appropriate Registrant Type.
Check the Use List Template checkbox to enable a custom template.
Modify the default Custom List Template to ensure that your fields are mapped properly to valid placeholders (e.g. "{{Headshot}}"):
Best practices for displaying images:
Ask attendees to upload images in a certain resolution/size or aspect ratio. This can help you to display images that look more consistent.
If you need to resize, crop, or edit any uploaded images, you can create a hidden office-use File field (e.g. "HeadshotApproved") on your registration form to store any image file you have modified for display purposes. You can then instead map this hidden office-use field to your Registrant List custom template if needed.
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!