FMStudio Complete Guide Chapter 6
From FMWebschool Reference
Chapter 6. From Search Results to a Detail Page
In this chapter we will be covering creating detail links and detail pages to display single
records. This chapter builds on chapter 5, which is a search and dynamics results page. Let’s
start with the search results, which will link using a dynamic link to a specific detail page
for a single photograph. The detail page will display this record in, well you guessed it,
more detail.
If you remember, in Chapter 5, we created a page called 'search_results.php'. We will continue
working with this page, as I will need to link it to a detail page. The first step in this
process is to set-up a 'dynamic link'.
A dynamic link sends a single piece of data from one page to another page. Why do we need
this? On the web, each page is independent, it relies on information from another page and
when you link two pages, you have to somehow identify exactly what record you want to display.
In this example we will be adding the dynamic link to the 'photoName' binding. The whole
'photoName' will become a link to its detail page.
- To create a dynamic link, Select the text 'photoName' in the dynamic table so it is
highlighted.
Image 6 – 1: Hi-light the binding ‘photoName’ in the first column of the table
- Then Navigate to Server Behaviors > Links > Dynamic Data Link. Once selected, the
Dynamic Data Link dialogue window will open.
Image 6 – 2: The Dynamic Data Link Dialogue window – ready for action
- Enter the Target Page. This is just like the action page of the form; this will point to the
landing or destination page. In this case it will be 'photo_detail.php'.
- We will pass the 'photoId' to the detail page. Name the Variable Name,
'photoID'.
The Variable Value requires that we select a dynamic piece of information that corresponds to
the unique value you are sending to the page. To do this, simply click on the lightning bolt,
and select the 'photoID' binding and clicking 'OK'.
Image 6 – 3: Select the photoID binding and click ‘OK’
A quick explanation as to what we have just done. The Dynamic Data Link will be linking to
'photo_detail.php' and for every row in the search results, it will be sending along a
unique 'photoID'.
Image 6 – 4: Dynamic Data Link sending along a unique photoID
The 'search_results.php' page is now complete.
Now that the 'search_results.php' page is complete, we will need to create the
'photo_detail.php' page.
- Create a new PHP page and save it into my local folder as 'photo_detail.php'.
This page will be display a single record; therefore just like any other pages that are
displaying a dynamic record, or many records from FileMaker it will start with a recordset.
- Select Server Behaviors > Click the Plus Button > Find (Recordset)
- Name of the recordset will be 'photo'
- The connection will be the 'Photos' database
- Use the layout 'photos'
- The Add Criterion will be 'PhotoID' then click the 'Add' button.
Remember the Dynamic Data Link passed a 'photoID' from the search results page to this page –
the 'photo_detail.php' page. Therefore the search will be performed by entering into the
'photo' FileMaker field the 'photoID' value from the link.
Image 6 – 5: Variable Selector with Type of ‘Request’ and Name ‘photoID’
And, since an exact match is desired, we want to match one photo with one photo ID, we need to
specify the operation as double equal "= =". Also make sure that you disable wildcards which
might interfere with the value being correctly parsed by FileMaker.
Image 6 – 6: The double equal operation allows for an exact search. I have also disabled
wildcards which may interfere with the value being correctly parsed by FileMaker.
- Now the recordset has been created with a single find criterion and an exact match to the
'photoID' variable coming from the request variable, click 'OK'.
The next step is displaying the single detail record. FMStudio provides a convenient way to
display a single record on a page. It will give you a quick jumpstart towards a more
productive and customized page.
- Before we continue building the 'photo_detail.php' page, make sure that you are in design
view and that you have a blinking cursor in my work area. To build the contents of the detail
page, select Server Behaviors > Wizards > Single Record Table.
Image 6 – 7: To create a single record table select – Server Behaviors > Wizards > Single
Record Table
The Single Record Table Dialog box will open.
Image 6 – 8: Single Record Table patiently waiting
- Give the table the name 'results'
- Use the 'photo' recordset
- Set the table width for 400 pixels and leave the border, caption cell, and data cell to
their default values.
- Since this is a detail page, it can display all of the values in it. Select the ‘All’ button
to choose all of the fields.
Image 6 – 9: Select the ‘All’ button to add all of the fields
Note: The 'All' button allows you to very quickly add all of the fields from the current
layout into the single record table. It is often a great way to get a quick starting point,
and then removing the fields that you do not want to include on the page.
- Now that we have created the single record table, we can use the bindings to add a nice
header to the page. To do this Click to the left of the dynamic table – make sure you blinking
cursor is to the 'left' of the dynamic table. Then click enter a few times to move the table
down the page.
Now that we have space for the header, use the bindings to create a header with the photo
names and photo categories for this page.
- Select Bindings > Select Recordset Photo > Click the plus sign
- Find the 'photoName' binding and drag and drop it above the single record table
- Then add some brackets after the 'photoName' like this ( )
- Find the 'categoryName' binding and drag and drop it into the brackets ( ) that you
just created.
- Select both bindings, and set them to be formatted as style Heading 1.
Image 6 – 10: The ‘photoName’ and ‘categoryName’ binding added to the page.
- Save this page.
Now that the 'photo_detail.php' page is complete, open the 'search.php' page in the browser
and test the new page. Once again let’s search on the word 'Girl'.
In the screenshot below you can see that the name column now contains links instead of just
text.
Image 6 – 11: The table now displays links in the first row instead of just text
By clicking on one of the links, you can now choose a single record to view its detail.
To test this, you can search for a specific photo, once the search result are displayed, click
on a specific name and you should be at the detail page, which will display the photo name and
its category in the header at the top and all of the fields in the layout within a single
record in the dynamic table.
Image 6 – 12: Detail record for photo PHO0006
