Sliding Panels Manual

Advanced: Dynamic Sliding Panels

In this tutorial we will go through the creation of Sliding Panels that retrieve their content from a database using standard Dreamweaver Recordsets and Repeat Regions.

How to do it

1.Define your site in Dreamweaver and create a new page.

2.Applying the extension – Choose the  icon from the DMXzone object bar to apply the extension.

 

3.Preparing the Panels for the dynamic content - By default, the Sliding Panels extension inserts some random text and two panels. For our tutorial we need only one panel, so we'll delete the second one – Click the "-" button in order to remove it.

 

 

4.Editing the content - We've already created a dynamic page and now, we're going to insert it within the Sliding Panels page. Copy the dynamic content and paste it in the Sliding Panels.

5. 

This is how it should look like in your Panels:

 

 

6.Setting up repeat region – We're going to set up a repeat region in the panel content area in order for all the records in our database to be shown in separate panels.

• Select the Panel content area (1)

• Click the Server Behavior icon (2)

• Click the Add Item button (3)

• Select the Repeat Region menu item (4)

 

 

7.Adding Recordset - Choose the recordset that corresponds to your content (1), select all records (2) and click OK button (3).

 

 

8.Sliding Panels names – Now, we're going to set the Sliding Panels to retrieve their panels' names from our database.

• Click on the Panel 1 name and select the text (1)

• Click on the Bindings icon (2)

• Drag and drop the recordset in the place of the Panel title (We've already created a Recordset that retrieves the titles of the panels) (3)

*Note that you need two recordsets – onefor the dynamic content and another one for the titles of the panels. You can use the same database table for both recordsets

• Click the Server behavior icon (1)

• Click the Add item button (2)

• Select the Repeat region menu item (3)

• Select the Recordset that correspond the panels names (4)

• Select All records (5)

• Click the OK button (6)

Now, you can save your work and preview it in your favorite browser!