Charts Dynamic data grid

The Dynamic Grid allows you to have full control over the design of any data you choose to display from a database table on your website, by editing on column of your grid you will set the whole look of the data coming from the database.

No data was found

In the following guide we will explain how to create a Dynamic database Grid on your website.

The Dynamic Grid allows you to have full control over the design of any data you choose to display from a database table on your website, by editing on column of your grid you will set the whole look of the data coming from the database.

If you already own a database table that you would like to present in the grid, continue to Step 2.

Create database table

For our next example we will use a fake database of a New York real estate company 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 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 like this: 

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 will open:

Edit the layout of the grid, choose the number of columns and rows and click "Apply".

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).  

In order To filter the 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.

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: 

לא מצאת מה שחיפשת?
צור קשר עם התמיכה שלנו

מדריכים נוספים

grad1
Customer-Managed Relationship Concept - Businessman Arranging Small Wooden Blocks with Symbols on the Table.

פרופילים

במערכת מייביזנס ניתן להגדיר הרשאות לפי פרופילים / תפקידים.
grad1
Businessman Leading the global world business community of network communication connected. Digital and technological convergence with abstract blue background.

זאפייר

במדריך זה אנו נתמקד על ביצוע פעולות מיוחדות במערכת דרך הזאפייר ללא שימוש באפליקציה של mybusiness כגון הוספת רשומה (לד...
grad1
Businessman using mobile smart phone. Business global internet connection application technology and digital marketing, Financial and banking, Digital link tech, big data.

Rest API

Rest API allows you to perform actions such as queries and data update.
grad1
Checklist concept, Businessman checking mark on the check boxes with marker red

Queries

After reading the next guide, you will be able to use Simbla.Query to perform different actions on many objects at on...