Ontraport's drag-and-drop editor can build a lot. But any visual builder has limits. Dynamic list HTML gets you past some of them. You write a list in HTML and CSS, and Ontraport fills it in with your records. Here's how it works, where you add it, and how to control what it shows.
Dynamic list HTML is only available on some Dynamic CMS plans. To see which ones, check the Dynamic CMS add-ons chart on Ontraport's pricing page. To add a plan, click your profile icon, then Account. Next to "Add Dynamic CMS to your account," start a trial or add a plan.
This is an advanced feature for people who are comfortable with HTML and CSS. Ontraport Support can't troubleshoot custom code. If you'd rather not write it yourself, an Ontraport Certified Expert can build these lists for you.
Dynamic lists work just like dynamic blocks. The only difference is that you build them with code. You wrap your HTML in a dynamic list tag. Ontraport repeats whatever's inside the tag once for each record, using that record's data each time. In this example, the list shows each contact's first and last name.
Let's build the Support Center's example: a sidebar of blog post links. First, make space in your page layout where the list should go. Here, that's an empty column beside the article.
Next, drag the Custom HTML element into that spot. Click the element, click Edit Code, and replace the default code with your dynamic list tag. The Custom HTML element accepts HTML, CSS and JavaScript.
This list pulls from Blog Posts. For each post, it shows a link with the post's page name, and the post's image. And there's your sidebar. You can use dynamic lists on a regular Ontraport page or on a dynamic template.
Source is the only required attribute. It tells the list which records to pull. That can be any object in your account, like Contacts, Blog Posts or one of your custom objects. Or it can be a subcollection, meaning related records, saved on the dynamic page's record, the dynamic block's record, or the visitor's own record. For example, inside a dynamic block that pulls from Contacts, a list can show each contact's notes.
Every other attribute is optional. They're the same settings you'd use on a dynamic block, written in HTML. You can set how many records show. The default is 10, and the most is 60. You can sort by any field, ascending or descending, or shuffle the list randomly. By default, the newest records come first. And you can choose which record the list starts on.
Include-if attributes filter the list. You can include records based on their tags, on what a field equals or contains, or on whether they're related to the page's record or to the visitor. Each filter also has an opposite, like "does not contain." To combine conditions, use the and and or operators shown in the Support Center. When you combine conditions that exclude records, always join them with and.
Relationship filters need the relationship's ID or name. To find them, go to the Custom Objects collection, click the object's name, then Manage Relationships, and add the ID and Name columns.
Inside the tag, merge fields pull in each record's data, and you can mix them with your own text. A prefix tells Ontraport where to look: Page for the dynamic page's record, Block for the dynamic block's record, and Visitor for the person viewing the page. On a regular Ontraport page, you only have the visitor's fields. If your source is a custom object with a field that has the same name as a contact field, add the List prefix so you get the list record's value.
You can use merge fields inside attributes too. For example, on a blog post, you can list only the posts in the same category as the page. Use the merge field dropdown when you can, because it formats fields correctly. And if a field name contains an apostrophe, swap the apostrophe for the special code the Support Center gives.
So: wrap your HTML in a dynamic list tag, choose a source, filter and sort with attributes, and use merge fields to fill in each record. That wraps up the Dynamic CMS section and the Ontraport for no-code web apps course. For more detail on any feature, the Support Center is always there. Thanks for learning with us.