In this lesson, you’ll learn how to create a dynamic block for when you need a list of records on a single page rather than a whole page about one record.
Home > Ontraport for no-code web apps > Ontraport Dynamic CMS > Dynamic blocks
Home > Ontraport Dynamic CMS > Dynamic blocks
Dynamic blocks
Course Instructor
- How to turn a regular block into a dynamic block
- The benefits of protecting your pages with a membership site
- How to add subheadings and images to your dynamic blocks
- How to add conditions for when your blocks should display
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
You learned in the previous video how to make a page based on a record in your Ontraport account using dynamic page templates.
That's really cool, but sometimes instead of making a whole page about a particular record, what you need is a list of records on a single page.
You created a page for each pet that goes to your veterinarian clinic.
That's good, but you also wanna have a page for each client that lists all of the pets on it and you want them to be able to click on each one and go to that pet's page.
You can do that in a lot more using dynamic blocks.
Just as a dynamic page is created for each record in your object with dynamic blocks, You'll design a block the way you want it to look and the whole block will be repeated with the data from each record. I'll show you how it works.
You'll start with just a regular OntPort page, your pets overview page. You'll pull in your page header from your global blocks to make it look nice. Then you'll add another block underneath that. This is going to be your dynamic block that lists your pets.
Click the gear icon to enter layout mode. You're going to see your new database icon up here. Just as you can convert a block into a global block by clicking on the globe icon, you can now turn it into a dynamic block by clicking the database icon.
When you do that, you're going to see a drop down field that lists all of the objects you can use as the basis for this dynamic block. You could create a list of contacts here or pets or whatever else you might set up in your account. But in this case, we're going to keep scrolling down until you see a second section of fields that says related to visiting contact. Here you'll find the objects that are children of contacts including their files, open orders, transactions, products purchased, and other custom object relationships you've created.
At this point, I have to pause to remind you about data security. The system is going to show the data for whoever it thinks the visiting contact is based on data from the cookies or login information.
Please remember that tracking with a cookie is not one hundred percent accurate or secure. For example, if someone forwards an email to their friend and their friend clicks on the email, well, they're going to think that their friend is the one who clicked on it. If you've put a page on the web that lists your contacts files and maybe one of those files is confidential, the contact's friend is going to be able to see it. So be cautious about what data you use on your pages and block.
The best plan for protecting pages with private data is putting them on a membership site. Then people have to log in with a username and password to see your content. That is far more secure and will limit the exposure of personal data to only people who have login credential. It's also more reliable because sometimes people clear their cookies, which would make it impossible for the system to show anything at all in your dynamic block if it's based on data in your contacts record.
With that out of the way, go ahead and select pets for your object. But not the top one because that will show you all of them. Select the one down here that's related to your visiting contact since you only want to show the pets owned by the visitor.
Alright. That's done.
Now you'll see that the system has added next and previous buttons.
Those are in there just in case a crazy bird lady logs in with her forty seven birds and needs to go through each page to see them all. Loading up forty seven birds on a page can take some time, but most of the time people are just gonna have three or four pets at most, so those buttons won't appear.
Now you'll design this block just like you did with dynamic pages. Drop in a picture here, a sub headline here, and another text section.
You'll start by connecting these elements to your database records. When you click on this, you'll see that you can choose from the fields in the visiting contacts record or fields from the record that this dynamic block is based on. Choose the latter and then connect this to the main photo of your pet.
Next, you'll connect the subhead to the pet's name in the same way.
In this text area, you'll do things a little differently. You're going to share three different fields from your pet record using merge fields. So just type this out and insert merge fields using the merge field tool up top. And it'll end up looking like this.
So you've designed one block here and these will get filled out with one of the visitors pets data and the block will get repeated for every pet your visitor has. Let's see what that looks like.
In order to do that, you're going to go back up to the preview data menu and then you'll see that there's a new option that says contact.
This allows you to see the page as your contacts would. So select Moira Rose here and you'll see her pets when you preview the page. If you select Johnny, you'll see his pets instead.
This is good, but there's something missing. You need the user to be able to click on each of these pets on the list and go to their dynamic page for that pet. This is super easy to set up.
Add a button on here and make it say see details.
Then click on the link editor and you'll see a new option here that says link to a page related to the displayed record. If you click on that, you'll see all of the available page types for that object. Pick the one you called pet details, and you're all done.
Let's say you want your pets to show up in cards instead of a list. All you need to do is use grid mode.
Click to edit the dynamic block and click dynamic block settings. From here, choose the number of columns you want to see. Say you wanted to show three columns and make sure that you always show three cards, then you can toggle on only show full rows.
This is great if you want to be specific about your page's design and avoid showing just one or two cards in this row. Keep in mind that if your contact has five pets, two of them won't be visible.
For this use case, let's switch back to one column and create a list.
Now each of these links will go to the related records pet details page. Perfect. I wanna show you another feature that's going to be really useful. To illustrate this, imagine that instead of wanting your pets all listed together here, you want to separate your list of pets based on the sort of animal they are. Cats in one list, dogs in another, and so on. Being able to filter your dynamic blocks to only include certain kinds of records will be useful in all sorts of different use cases.
Simply add a condition to your dynamic block so it only includes pet records where the type of animal is dog. You'll do that by going into layout mode then clicking on your dynamic block settings on the left palette.
At the top you'll see that you can add conditions here and you'll simply add a condition where the pet type equals dog click done Now when you preview this page, you'll see that there are only dogs here.
While you're here, I'll point out some other features. You can decide how many records you want to display when someone first visits your page. The more records you load the longer it will take. So you might want to keep this number under control but sixty is the maximum.
If there are more records than whatever you choose to display in your initial load, the system will show the previous and next buttons so people can click through the results.
That is unless you select none here. In that case, those buttons won't show up even if there are more records to see.
This will be useful in cases where you only want to show a few records.
For example, maybe you have a collection of testimonials and you want to show testimonials from people in the same industry as your visitor, but you don't wanna show a ton. Maybe just the first three. You could use a dynamic block for that. Put three testimonials in the initial load setting, then remove the previous and next buttons by clicking none.
Finally, you can sort the order and direction of your records. This lets you decide which records should show up first, and that's it. Now you've got your list of dogs at top and your cats below. You could even add some headlines in between to make it more clear. One could say my dogs, and the other could say my cats. Very fancy.
With that, we've wrapped up our tour of the dynamic blocks feature. It's pretty simple really. You're going to get really clever with how you use this stuff to create some very sophisticated apps when we get into the common features section in just a few minutes.
Before you do that though, we have a few more subjects to cover. We're going to explain page types and how to get your pages published and live in the next video. So let's get to it.
That's really cool, but sometimes instead of making a whole page about a particular record, what you need is a list of records on a single page.
You created a page for each pet that goes to your veterinarian clinic.
That's good, but you also wanna have a page for each client that lists all of the pets on it and you want them to be able to click on each one and go to that pet's page.
You can do that in a lot more using dynamic blocks.
Just as a dynamic page is created for each record in your object with dynamic blocks, You'll design a block the way you want it to look and the whole block will be repeated with the data from each record. I'll show you how it works.
You'll start with just a regular OntPort page, your pets overview page. You'll pull in your page header from your global blocks to make it look nice. Then you'll add another block underneath that. This is going to be your dynamic block that lists your pets.
Click the gear icon to enter layout mode. You're going to see your new database icon up here. Just as you can convert a block into a global block by clicking on the globe icon, you can now turn it into a dynamic block by clicking the database icon.
When you do that, you're going to see a drop down field that lists all of the objects you can use as the basis for this dynamic block. You could create a list of contacts here or pets or whatever else you might set up in your account. But in this case, we're going to keep scrolling down until you see a second section of fields that says related to visiting contact. Here you'll find the objects that are children of contacts including their files, open orders, transactions, products purchased, and other custom object relationships you've created.
At this point, I have to pause to remind you about data security. The system is going to show the data for whoever it thinks the visiting contact is based on data from the cookies or login information.
Please remember that tracking with a cookie is not one hundred percent accurate or secure. For example, if someone forwards an email to their friend and their friend clicks on the email, well, they're going to think that their friend is the one who clicked on it. If you've put a page on the web that lists your contacts files and maybe one of those files is confidential, the contact's friend is going to be able to see it. So be cautious about what data you use on your pages and block.
The best plan for protecting pages with private data is putting them on a membership site. Then people have to log in with a username and password to see your content. That is far more secure and will limit the exposure of personal data to only people who have login credential. It's also more reliable because sometimes people clear their cookies, which would make it impossible for the system to show anything at all in your dynamic block if it's based on data in your contacts record.
With that out of the way, go ahead and select pets for your object. But not the top one because that will show you all of them. Select the one down here that's related to your visiting contact since you only want to show the pets owned by the visitor.
Alright. That's done.
Now you'll see that the system has added next and previous buttons.
Those are in there just in case a crazy bird lady logs in with her forty seven birds and needs to go through each page to see them all. Loading up forty seven birds on a page can take some time, but most of the time people are just gonna have three or four pets at most, so those buttons won't appear.
Now you'll design this block just like you did with dynamic pages. Drop in a picture here, a sub headline here, and another text section.
You'll start by connecting these elements to your database records. When you click on this, you'll see that you can choose from the fields in the visiting contacts record or fields from the record that this dynamic block is based on. Choose the latter and then connect this to the main photo of your pet.
Next, you'll connect the subhead to the pet's name in the same way.
In this text area, you'll do things a little differently. You're going to share three different fields from your pet record using merge fields. So just type this out and insert merge fields using the merge field tool up top. And it'll end up looking like this.
So you've designed one block here and these will get filled out with one of the visitors pets data and the block will get repeated for every pet your visitor has. Let's see what that looks like.
In order to do that, you're going to go back up to the preview data menu and then you'll see that there's a new option that says contact.
This allows you to see the page as your contacts would. So select Moira Rose here and you'll see her pets when you preview the page. If you select Johnny, you'll see his pets instead.
This is good, but there's something missing. You need the user to be able to click on each of these pets on the list and go to their dynamic page for that pet. This is super easy to set up.
Add a button on here and make it say see details.
Then click on the link editor and you'll see a new option here that says link to a page related to the displayed record. If you click on that, you'll see all of the available page types for that object. Pick the one you called pet details, and you're all done.
Let's say you want your pets to show up in cards instead of a list. All you need to do is use grid mode.
Click to edit the dynamic block and click dynamic block settings. From here, choose the number of columns you want to see. Say you wanted to show three columns and make sure that you always show three cards, then you can toggle on only show full rows.
This is great if you want to be specific about your page's design and avoid showing just one or two cards in this row. Keep in mind that if your contact has five pets, two of them won't be visible.
For this use case, let's switch back to one column and create a list.
Now each of these links will go to the related records pet details page. Perfect. I wanna show you another feature that's going to be really useful. To illustrate this, imagine that instead of wanting your pets all listed together here, you want to separate your list of pets based on the sort of animal they are. Cats in one list, dogs in another, and so on. Being able to filter your dynamic blocks to only include certain kinds of records will be useful in all sorts of different use cases.
Simply add a condition to your dynamic block so it only includes pet records where the type of animal is dog. You'll do that by going into layout mode then clicking on your dynamic block settings on the left palette.
At the top you'll see that you can add conditions here and you'll simply add a condition where the pet type equals dog click done Now when you preview this page, you'll see that there are only dogs here.
While you're here, I'll point out some other features. You can decide how many records you want to display when someone first visits your page. The more records you load the longer it will take. So you might want to keep this number under control but sixty is the maximum.
If there are more records than whatever you choose to display in your initial load, the system will show the previous and next buttons so people can click through the results.
That is unless you select none here. In that case, those buttons won't show up even if there are more records to see.
This will be useful in cases where you only want to show a few records.
For example, maybe you have a collection of testimonials and you want to show testimonials from people in the same industry as your visitor, but you don't wanna show a ton. Maybe just the first three. You could use a dynamic block for that. Put three testimonials in the initial load setting, then remove the previous and next buttons by clicking none.
Finally, you can sort the order and direction of your records. This lets you decide which records should show up first, and that's it. Now you've got your list of dogs at top and your cats below. You could even add some headlines in between to make it more clear. One could say my dogs, and the other could say my cats. Very fancy.
With that, we've wrapped up our tour of the dynamic blocks feature. It's pretty simple really. You're going to get really clever with how you use this stuff to create some very sophisticated apps when we get into the common features section in just a few minutes.
Before you do that though, we have a few more subjects to cover. We're going to explain page types and how to get your pages published and live in the next video. So let's get to it.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified