From FMWebschool Reference

Contents 1 Chapter 10. Working With and Displaying Portals 2 See Also

Chapter 10. Working With and Displaying Portals

Working with portals is a relatively straight process. You generally have a detail page for a single parent record, and then you create a customized table that displays all of the related portal records that belong to that parent record.

Once the portal records are displayed, you can link to detail pages for those specific records and perform as many actions as needed on them. For the purpose of this chapter we will be creating a completely new section for photographers. It will list all of the photographers in the database followed by a detailed page of the photographer and all of the related portal records of the photos that the photographer has created.

The chapter will conclude with a detail page for a specific photo and a link back to the parent record from that detail page.

To begin this process we will start by creating a list of all of the photographers. This going to be a very simple find all query and a dynamic datalink to the photographer detail page.

1. Create a new PHP page named 'photographers.php'.
2. On the 'photographers.php' page, create a recordset, which finds all of the records in the photographer's table.
3. Create a Recordset and name it 'photographers'. The connection will be 'Photos', the layout will be 'photographers' and the Add Criterion will be 'photographerID'.

Image 10 – 1: Photographers Recordset using the Photos connection and the photographer’s layout.

1. The Variable Selector will be 'constant' and the Value will be a wildcard search.

Image 10 – 2: Photographer’s recordset complete

1. Make sure that the cursor is blinking in the design view. This next step will involve setting up a dynamic data table to display all of the photographers. First type the word 'Photographers'.
2. Under Server Behaviors > Wizards > choose Dynamic Tables

Image 10 – 3: Select Dynamic Table by choosing Server Behaviors > Wizards > choose Dynamic Tables

The Dynamic Table window will open.

1. Name the table 'results', select 'photographers' for the recordset, set the width for 500 and leave the Border, Caption Cell and Data Cell to their default colors.
2. Select the following fields from the drop-down: 'name', 'email', 'state' and country. Also, while adding the fields, in the 'Column Caption' text box, change the first letter in each field to a capital letter as shown in the screenshot below.

Image 10 – 4: Dynamic table set up to display name, email, state, country

Note: Remember the 'Caption' is simply a text field and can be changed to any name you like. Sometimes FileMaker field names have underscores or they do not describe the content of the field very well. This is your opportunity to give the field a nice descriptive label.

1. Once the new table appears on the page, add a new column. Right click the last column (to the right of the word 'Country' and choose Table > Insert Rows or Columns

Image 10 – 5: Choose Table > Insert Rows or Columns

1. When the Insert Rows or Columns dialogue window opens, select the 'Columns' radio button and click 'OK'. A new column will appear at the end of the table.
2. Type the words 'View Details' in the bottom cell of the last column. Hi-light 'View Details' and apply a dynamic data link that sends a photographer ID to a photographer detail page. The target page is 'photographer.php' and the variable name is 'photographerID' and for the variable value, select the photographerID dynamic binding.

Image 10 – 6: Select the ‘photographerID’ binding from the photographers Recordset

The 'View Details' will now change to a link.

1. Highlight the word 'Photographers' at the top of the page and apply a style of Heading 1. The table and text should now look like this

Image 10 – 7: Table with multiple fields, a view detail link, and a Photographers heading with a style heading of 1 applied.

Step 12. Save 'photographers.php' and then create 'photographer' for a single photographer detail page.

Creating the photographer detail page

1. Create a new page and name the page 'photographer.php'.
2. On the 'photographer.php' page start by adding a recordset named 'photographer'. This recordset will be used to find a single photographer.
3. Choose the 'Photos' connection and choose the 'photographers' layout.
4. Search for a photographerID by selecting 'Add'. The Variable Selector window will open choose a type of 'REQUEST', the name 'photographerID' and the operation should be '= =', an exact match. Wildcards should also be disabled for the 'photographerID variable.

Image 10 – 8: Variable Selector with a type of Request and photographerID set to exact match with wildcards disabled.

Image 10 – 9: Completed photographer recordset

Now that the photographer is found, this page will display all of the photographer's information in a single record table.

1. Type the word 'Photographer - ' and then apply a style of heading 1.
2. Next, under bindings click on the (photographer) Recordset and drag and drop the ‘name’ field beside the text.

Image 10 – 10: Recordset (photographer) bindings

1. On the next line, use the single record table wizard to display the whole record.

Image 10 – 11: Select Server Behaviors > Wizards > Single Record Table

1. Name the table 'photographer', use the 'photographer' recordset and choose a table width of '400' leaving the Border, Caption, Data Cell fields to their default values.
2. Under the 'Field' section of the Single Record Table, click the "+" button next to the word 'All'.

Image 10 – 12: Select the ‘All’ button, to load all of the fields into the Field and Caption Window.

1. This will load all of the fields. Delete the photographer image file from the list of fields and press OK.

Image 10 – 13: Press OK to add a single record table to the work area with all of the fields.

Image 10 – 14: This is the single record table displaying all of the fields from the photographer recordset.

Adding a Portal to 'photographer.php'

Adding a portal is very simple. The easiest way to add a portal is to first create a simple Dreamweaver table and then apply a portal-repeating region.

1. From the main menu – choose Insert > Table. The Table dialogue window will open.
2. This portal will display 4 columns from the database. It will need 2 rows. The first row for the headings and the second row for the data (that row will be repeated, for every portal row) and 4 columns for 4 pieces of data. The width should be set to 400 pixels, and all other table settings can be left to their default values.
3. Next add the following headings to the portal table. Photo ID, Name, Description and Price.
4. Next the portal bindings need to be added to the second row of the table. To do this, go to the Bindings menu and find the portal bindings.

Image 10 – 15: Portal Bindings found under Portal (photographer::photos)

1. Drag and drop the following portal bindings into the table: 'photos::photoID', 'photos::photoName', 'photos::photoDescription', and 'photos::photoPrice'. Remember, bindings are just another name for 'fields' in your FileMaker database. A binding is a Dreamweaver term.

If you were to look at a live or dynamic view of this portal table it would only display the first row of information. Can you guess why? Correct, we need to add a repeating region to be able to view all of the records.

1. To add the record binding, select the entire second row (highlight the row) of the portal table. Go to Server Behaviors > Repeating Region and choose Portal Region.

Image 10 – 16: To add a repeating region to the portal, choose Repeating Regions > Portal Region

1. The Portal Region dialogue window will open. Under Recordset, choose 'photographer', and the Portal 'photos' which will supply the information, and then select the 'All records' radio button.

Image 10 – 17: Portal Region using the photographer recordset and the ‘photos’ portal.

1. Save this page.

Let’s do a Quick recap. With the portal region in place I now have a completed page with a single record detail table and a portal that will display repeating rows for all of the records in the portal.

To test this page, open the 'photographers.php' page in the browser and click the 'View Details' link on one of the photographers. When the 'photographer.php' page loads, the photographer's information will be displayed in the table, and all of their photos will be displayed in the portal region below the table.

Image 10 – 18: All of the records displayed

To conclude this chapter, we will create a detail page for the portal records in order to view more information about a specific photo.

1. To make the portal information look a little more structured, first add a border of 1 to the portal table. This can be done by simply selecting the table and then adding a border of "1" in the table properties in the bottom of the Dreamweaver work area.
2. Highlight '{photographer::photos::photoID} located in the first cell of the portal table.
3. Next add a Dynamic Data Link to this binding. Choose Server Behaviors > Links > Dynamic Data Link - The Dynamic DataLink dialogue window will open.

Image 10 – 19: Choose Server Behaviors > Links > Dynamic Data Link

1. The target page will be a special portal detail page named 'photographer_photo.php' The Variable name is photoID and the Variable Value will be the related photoID record – therefore do not use the main photographer record set. In fact click the minus button to close it, and then find the 'Portal Group' of bindings and select the 'photos::photoID' from the portal group.

Image 10 – 20: Click Portal (photographer::photos) to display the portal bindings.

Otherwise you will always get the first photoID from the portal row, which is not what you want in this case.

Image 10 – 21: Completed Dynamic DataLink Dialogue Window

1. Now that the photoID is linked, create the 'photographer_photo.php' page.

The 'photographer_photo.php' page will be an exact find for the 'photoID' that was passed along. This means that a new recordset will need to be created.

Creating Photo Recordset

1. Create a new recordset, and name it 'photo'.
2. The Connection should be 'Photos' and the layout is 'photos'.
3. Search for the photoID form the photos layout "Click the Add Criterion button to do this) using an exact match with wildcards disabled.

Image 10 – 22: The Variable selector should have a Type of ‘Request’, the Name ‘photoID’ and should use an exact search with wildcards disabled.

Image 10 – 23: Completed Find Recordset

1. Press 'OK'
2. Next add the text "Add "Photo –" to the top of the 'photographer_photo.php' page and give it a style of Heading 1.
3. Then, add the 'photoName' binding

Image 10 – 24: Choose the ‘photoName’ binding from the photo Recordset

1. On the next line under the text, add a single record table for this specific photo. Server Behaviors > Wizards > Single Record Table - The Single Record Table dialogue window will open.
2. Name the table 'photo' use the 'photo' recordset, choose 400 for the width, and leave the border, caption cell and data cell to their default values.
3. Under the Field Category, select the 'All' button, adding all of the fields. Click OK, once you are finished.

Image 10 – 25: Completed Single Record Table with all of the fields added

Image 10 – 26: Table displayed on the Dreamweaver Work Area. Notice the repeat region and the ‘photoName’ binding above the table.

1. Next, we will need to link this page back to the original photographer. This is very simple task using a Dynamic Data Link.

Creating the Dynamic Data Link

1. Under the 'photo' table type the words "Go Back to Photographer Record". Hi-light this text and choose Server Behaviors > Links > Dynamic Data Links. The Dynamic Data Link dialogue window will open.

Image 10 – 27: The Dynamic Dialogue box with all of the fields populated

1. Link the Target Page to 'photographer.php' set the variable name to the 'photographerID' and for the variable value use the 'photo' Recordset and the 'photographerID' field to link the variable.

Image 10 – 28: Choose the ‘photographerID’ from the photo Recordset

1. Save this page, and run through the complete process.
2. Open 'photographers.php' in your browser.
3. Click the 'View Details' – For now, choose Ryan Mitchell.
4. When that page opens, scroll down to the bottom and you will now see links in the 'PhotoID' column. Select one of the links to view that specific photo from that photographer, and then select "Go Back to Photographer Record" to get back to the photographer you were viewing.

Image 10 – 29: Click on the ‘PhotoID’ link to view that record

To summarize, in chapter 10 you learned how to display portal rows, repeating portal rows, and you also learned how to work with portal detail pages. In Chapter 11, you will learn how to add new portal rows.

See Also

• FMStudio Complete Guide Table of Contents