FMStudio Complete Guide Chapter 13
From FMWebschool Reference
Contents |
Chapter 13. Advanced Display and Search Result Navigation
In this chapter, we will discuss a number of methods that allow you to display your data in more advanced ways than a simple dynamic table.
This chapter will start by expanding on the standard dynamic table and adding sortable columns to any of the fields as well as recordset navigation to that page. Next we will discuss arbitrary record display by manually applying repeating regions to portions of a page. Both of these parts will be based on a find all recordset within the photos table. They will be two distinct pages.
I’ll start by expanding on the dynamic table. To do this, I will need to create a new page named ‘advanced_display1.php’. The new page ‘advanced_display1.php’ will list all of the photos using a dynamic table.
- Begin by creating a photos recordset named photos, using the photos layout. This recordset will be a find-all. Just like in chapter 3.
Image 13 – 1: Completed Find All photos Recordset
- Once the recordset has been created, place you cursor in the work area of Dreamweaver. You want to make sure there is a flashing cursor in design view so you can add a Dynamic Table. Select Server Behaviors > Wizards > Dynamic Table (The Dynamic Table dialogue window will appear)
- Name the table photos, and choose photos as the Recordset. The width should be set to 700 pixels, and all other table embellishments such as border, caption cell and data cell can be left to their default values.
- Next add 5 fields: ‘photoId’, ‘photoName’, ‘photoDescription’, ‘photoPrice’ and the related ‘categories::categoryName’. Change the labels of the fields as shown in the screenshot below.
Image 13 – 2: Add the fields: photoID, photoName, photoDescription, and the related categories::categoryName fields.
Once the table is completed, it will display the first 10 records in the photo recordset. The first advanced feature we will discuss is sorting. When working on any ‘result’ page such as this – which happens to be a find-all, you might want to add links to the headings in order to sort the found records by certain fields.
In this example, we’ll add the ability to sort each of the 5 columns of the dynamic table.
Image 13 – 3: Dynamic table with 5 fields. We will add the ability to sort each field.
- To add a sortable link to a specific field, start by highlighting the text and then selecting Server Behaviors > Sorting > Sort Link. The Sort link dialogue window will open.
Image 13 – 4: Select Server Behaviors > Sorting > Sort Link
The Sort Link is very easy to use.
- Start by selecting a recordset to use. This is the recordset that will be sorted.
- Next, choose the field that this link represents. You can use any text as the clickable link text. In this case we will be sorting the first field in the table which is the ‘photoID’ field. Once we are finished adding the correct information simply click OK, and that heading will instantly become a sortable link.
Image 13 – 5: Select the field and the recordset you want to add a Sort Link to
- Repeat this process for each table heading, turning each into a sortable link.
Image 13 – 6: Table with Sort Link added to all of the table headers
Since this page will be returning the first 10 records in the database, we can view this page live and test out the sort links. To do this, we simply need to preview the page in a browser.
Image 13 – 7: Browser view of the 10 records. The table headers are now clickable links.
10 Records are displayed in my browser. To sort all of the records by name, I can simply click on the word ‘Name’ all of the records are instantly sorted.
Image 13 – 8: In the screenshot above, the ‘Name’ heading is selected. Notice the [asc] beside the label. This stands for ascending. Click the name again for descending.
We can also reverse the sort by simply clicking on the word ‘Name’ again. Sorting is very easy to apply to any FMStudio dynamic table.
Now, I know that this is amazingly exciting, and it is hard to believe that there could be more, but yes, we are going to extend the capabilities of this page with navigation. FMStudio provides a very convenient way to navigate between records.
To add a navigation bar, simply place your cursor under the table that we just created and select Server Behaviors > Paging and Record Counts > Navigation Bar.
Image 13 – 9: To add a navigation bar, select Server Behaviors > Paging and Record Counts > Navigation Bar.
The Navigation Bar dialogue window will appear. Simply choose the recordset and under settings, custom settings can be applied for the different links.
Image 13 – 10 Select the Recordset and then press the ‘Settings’ button to apply other settings.
If your application is in a different language than English, this is the place to change your labels.
Image 13 – 11: The Advanced Dialog allows you to apply additional labels and values to your Navigation bar.
That is it. That is how simple it is to add navigation to the page. To make the page look a little more presentable Select everything in the Dreamweaver work area and center it on the page.
Image 13 – 12: Table with Navigation Bar centered in the Dreamweaver work area.
Image 13 – 13: This is the page as viewed in a browser. Notice the navigation bar at the bottom of the screenshot.
Image 13 – 14: Once the ‘Next’ link is clicked, other navigation elements will appear.
Now that we have sorting and navigation under our belts, let’s look at another advanced topic – the arbitrary display of records. To demonstrate this, we will display a number of records on the page but instead of using a dynamic table; let’s use free form Dreamweaver design to separate the records on the page.
This will also work with a find-all of all of the photos and can be extended to work with any search results.
- Start by creating a new page ‘advanced_display2.php’.
- Create the standard ‘photos’ recordset.
Image 13 – 15: Create the standard photo Recordset
Unlike the other chapters, where we used an FMStudio wizard, to display and separate records, we will use standard Dreamweaver tools to display and separate records.
- Click into the design view area and add the text ‘Photos’ and apply a style of heading 1.
- Under Bindings, drag and drop ‘photoName’ and ‘photoID’ onto the Dreamweaver work area under the word ‘Photos’. Place brackets around the ‘photoID’ binding so it looks like this.
Image 13 – 16: The ‘advanced_display2.php’ page with bindings and text added.
Whenever you design a page where you want the record to repeat with a specific design many times, you first have to design it as if you only had 1 record. Once that has been accomplished I can add the repeating functionality.
I’ll continue setting up the page, and then introduce how to repeat the records.
- Hi-light both of the bindings on the page and apply a style heading of 2.
- Drag and drop the ‘photoDescription’ binding under the previous bindings and apply a style of heading 3. Your page should now look like this.
Image 13 – 17: The completed page with style heading applied
- Next underneath the ‘photoDescription’ binding, add a ‘$’ dollar sign, and then drag and drop the ‘photoPrice’ binding beside it. Hi-light the ‘$’ and the binding and apply a style heading of 3 and change the font color to red.
- Click underneath the last binding – so you have a flashing cursor there, and apply a horizontal rule to separate the records. Insert > HTML > Horizontal Rule.
Image 13 – 18: Create a Horizontal Rule by selecting Insert > HTML > Horizontal Rule
Image 13 – 19: Completed page with horizontal rule applied under the photoPrice binding.
Now, that the single record is formatted, it is time to apply repetition to it. You can select any part of your page and repeat the bindings within it for every record in the found set.
- Select everything in the work area except for the title of the page. We do not want the title to repeat. With the entire content of the page hi-lighted (excluding the title) go to Server Behaviors > Repeating Regions > Repeat Region.
Image 13 – 20: Select Server Behaviors > Repeating Regions > Repeat Region
The Repeat Region dialogue window will appear.
- Choose the ‘photos’ recordset and click ‘OK’
A grey border will surround the area that will be repeated for every record. A ‘Repeat – photos’ tab will also show at the top of the repeating area.
Image 13 – 21: A gray border surrounds the region that will be repeated for every record.
To make sure that the page is functioning properly, save the page and then preview it in the browser. If the page is correct, the browser will display the first 10 records separated by a horizontal rule.
Image 13 – 22: Records separated by a horizontal rule
To complete this example, let’s add navigation before and after the repeating region. That way the navigation for the page can be easily accessed before all of the records and after the records.
- Add a navigation bar between the ‘Photos’ header and the first row of bindings. Server Behaviors > Paging and Record Counts > Navigation Bar.
Image 13 – 23: Select Server Behaviors > Paging & Record Counts > Navigation Bar
When the Navigation Bar dialogue window appears, choose the ‘photos’ recordset.
- Next place your cursor under the repeating region area. Make sure that it is outside of the grey border. Insert another navigation bar. Server Behaviors > Paging and Record Counts > Navigation Bar
- Save this page, and preview it in the browser. The page should now have navigation at the top of the page and at the bottom of the page.
Image 13 – 24: Completed page, though not visible in this screenshot, the navigation is now at the top and the bottom of this page.
