Dynamic data grid
The following guide will take you through the steps of adding a Dynamic Grid database widget to your website.
The Dynamic Grid widget allows you to have full control over the design of any data you choose to display from a database table on your website, and will adapt to accommodate any new data you add to your table. You need only edit one column in the Grid for the display to apply to the entire database table.
If you already own a database table that you would like to present in the grid, continue to Step 2.
1. Create database table
We will use the example of a New York real estate company throughout the guide to illustrate the full functionality of the Dynamic Grid and how it can be set up.
Enter the database that is connected to your website.
Create a new database table.
We’ve created a new table called “Real Estate,” which will showcase available New York residential properties on our website.
Name the table and set its fields and permissions.
We’ve set up our fields to include the 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”).
Set your permissions as you want them (we’ve enabled all permissions for the purpose of the example).
When you’ve finished setting up your table, it should look something like this:
2: Drag and Drop the Dynamic Grid Database Widget
Go to your website and enter Pro Mode. You can create a new page or use an already existing page to display your grid. Under “Database Widgets” in the top left corner, click and drag the “Dynamic Grid” database widget to wherever you’ll want your grid to appear on your page.
A window like this will open:
Choose the number of columns and rows you want your grid to have, and click “Apply” when you’re finished configuring the layout.
Click on the grid and select “Grid Settings” to connect your new grid to your database table. Select the dropdown menu under “Choose table” and pick the table you want to connect (we’ve chosen the “RealEstate” table).
You can also add filters if you want to only display specific rows from your table.
To filter your data, go to the “Filters” tab and either choose “Use search form” or “Filter by criteria.” A search form will allow your users to search for a specific value in the table, while filtering by criteria will simply only show partial data from your table.
You can choose the number of results that you want to appear on your grid, sort the results according to the order of a specific field (“Sort by field”), or define a specific criteria by which to filter your results.
As you can see, we’ve set the grid to show us only condo listings, in price order (from lowest to highest).
At this point, you have full control over the design of your grid. If you’ve created a page from scratch, you can spruce it up by adding headers, footers, text and images--anything that suits your tastes.
3: Define fields and objects
In order to define which fields you want to appear in your grid, insert the name of the field as it appears in your table between these curly brackets {{ }}, two on each side of the field name, in the first column of the grid. (The letters are not case-sensitive, just make sure the field names inside the brackets match ones in your database table.) Anything you define inside that column will consequently apply to every column in your grid, corresponding to each row of your table.
As you can see, we’ve set up our grid so that each listing on our page will be titled by the number of bedrooms and the style of the home (for example, “2 Bedroom Condo”), followed by information about the square footage, number of bathrooms, price, etc.
To do this, we defined {{NumberBedrooms}} Bedroom {{Style}} in the Header, and {{NumberBedrooms}} Bedrooms, {{Bathrooms}} Bathrooms, ${{Price}} {{SquareFT}} sq ft. in the text box below.
When you’ve finished setting up the grid as you like, click “Publish” to view your grid live. (Note: You will not see the complete grid in “Preview” mode, but don’t worry! The full dynamic grid will appear after you’ve published the site and are viewing it live.)
Here is our result:
Because we filtered the grid to show condos only, only two homes appear on the page. If we take off the filter, we get a page that looks like this:
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 curly brackets.
For example, our field is called “Image”, so we would add {{Image._url}}.
Our final result looks like this:
