Dynamic page
Dynamic pages allow you to create separate pages that correspond to every individual row in your database table. A user would be able to click on an item shown in a dynamic grid, and a separate page will open for that item containing information from your database table that you choose to display. You need only create one separate page for this to apply to every row in the table; the page will duplicate for as many rows as you have.
Before setting up your dynamic pages, you will need to create a dynamic grid connected to a table in your database (see how to do that here).
We will continue using the example of a New York Real Estate table that was used in the previous guide. Until now, the fields in this table include property square footage, number of rooms and bathrooms, date of entry, price, type of home (“style”), neighborhood the home is located in, and whether the property is for sale or for rent (“market”).
Create a new page in your website. This page will serve as a “template” on which all of your rows’ individual pages will be based.
Give the page a name. Then, go to the “Database” tab, tick the “Dynamic pages” option, and choose the table that you previously connected to the Dynamic Grid Database Widget.
Under “URL field,” you will specify the names of the links of the pages you’re creating for your table’s rows. For example, if you choose the field “neighborhood”, you will get a link that ends in “Flatbush” for a page of a house in Flatbush, a link ending in “BoroughPark” for a condo in Borough Park, etc.
You can use any existing field in your database that does not contain repeating values. (For example, we wouldn’t use the “style” field, because there is more than one co-op, more than one condo, etc. and we want each of our houses to get their own separate pages when clicked on.)
It is recommended to create a new field in your table called “Page Name” for SEO purposes, so you can specify exactly how you want each item to be categorized in its page’s URL.
You have full control over the design of your pages. Here, in order to define the fields of your table that you want to appear on the individual pages, insert the field names between these curly brackets {{{ }}}, three on each side of the field name.
Note: To add images from an image field in your database table, drag and drop a Picture element (under “Multimedia”) to the place on your grid you want your images to appear. Under “Paste image URL here” in the “Web” tab, insert the name of the image field followed by _url within three curly brackets.
For example, our table field with images is called “Image”, so we would insert {{{Image.url}}} in the image URL space.
In order to display a field from a pointer table the format would be {{{pointer.field}}}. For example {{{carId.model}}}.
In order to display a date use: {{{fieldName.format(date, en-US)}}} or {{{fieldName.iso}}}
You can change the format by changing the parameter en-US to en-GB.
When you’ve finished designing the page to your liking, return to the page where your dynamic grid is. Here, you’ll need to insert a hyperlink wherever you want page viewers to be able to access the item’s individual page from (in a header, text, image, etc.).
The link should be: page name/{{URL field}}. For example, we named our page “dynamic_pages” and chose “Page_Name” for our URL field, so our hyperlink would be:
dynamic_pages/{{Page_Name}}
(Note: After you’ve inserted the hyperlink, if you want to edit the text connected to the link by customizing the theme, the text will be found under “Link” instead of “Heading.”)
Once you’ve inserted the link, hit “Publish,” and view your results live! Go to the page with your dynamic grid and click on any of the items shown to see its corresponding individual page.
