FMStudio Complete Guide Chapter 15
From FMWebschool Reference
Contents |
Chapter 15. Design Patterns
Design Pattern 1: Search, List, Detail, Edit and Save
This design pattern is very common. Start by finding a record or multiple records. Then edit the found records, the edit then saves the record, and you are then taken back to the detail page. This pattern is extremely easy to create with FMStudio.
- Create a new folder and name it ‘pattern1.’
- Inside the folder, create a new file and name it ‘search.php’.
Image 15-1:
- Next, create a form using the Form Builder. Select Server Behaviors > Wizards > Form Builder. The Form Builder dialogue window will appear. In this example, we will be searching for photo, and then editing that record.
- Begin by naming the form ‘find’, and make sure that the checkbox beside ‘Generate Table’ is selected.
- Choose the photos Layout and the action should be set to ‘results.php’.
- The method should be set to ‘GET’ since it is a search.
- The submit button text should be ‘search’.
- We will allow searching on three fields: ‘photoID’, ‘photoName’ and ‘photoDescription’. To add these fields, simply Select the field from the drop down menu under field and click on the ‘+’ button.
- The completed Form Builder should look like
Image 15-2:
- With the form in place, save the ‘search.php’ page.
Next, create a new page named ‘results.php’. Make sure that this file is saved within the ‘pattern1’ folder as well. The ‘result.php’ page will display the list of the found records. By now, you know that this means creating a new Recordset.
- Create a new Recordset and name it ‘photos’ using the ‘photos’ connection
- Use the photos layout
- Next select the three fields from the previous page. They are: ‘photoID’, ‘photoName’ and ‘photoDescription’.
Image 15-3:
- Next let’s create a Dynamic Table on this page – Select Server Behaviors > Wizards > Dynamic Table. The Dynamic Table dialogue window will open.
- Name the table ‘results’, and select the ‘photos’ Recordset. Leave the width at 400 pixels, and the border, caption cell and data cells at their default values.
- Select two fields from the Field dropdown menu: ‘photoID’ and ‘photoName’.
Image 15-4:
- Now that the table is on the page, right click the table, and choose Table > Insert Rows or Columns.
Image 15-5:
- Insert a column after the last ‘photoName’ column.
Image 15-6
- Inside the last column, choose the bottom cell and type the word ‘Detail View’ this will be used as the ‘Detail’ link.
Image 15-7:
- Hi-light the word Detail View, and then select Server Behaviors > Links > Dynamic Data Link. The Dynamic Data Link dialogue window will open. This will send the photoID to the page ‘detail.php’.
- Set the target page as ‘detail.php’.
- Set the Variable Name as ‘photoID’ and for the Variable Value; use the (photos) Recordset, and the ‘photoID’ binding. Save the page once you are finished.
Image 15-8:
Completed Dynamic Data Link.
Image 15-9:
The table should look like this when completed.
Image 15-10:
Next create the ‘detail.php’ page and save it in the ‘pattern1’ folder. We will use the ‘detail.php’ page to find the photo. To do this, you guessed it; we will need to create a find Recordset’.
- Select Server Behaviors > Find (Recordset)
- Set the Name to ‘photo’, the Connection to ‘Photos’ and the Layout to ‘photos’.
- Under Add Criterion, select ‘photoID’ and then select the ‘Add’ button.
- When the Variable Selector window opens, choose the Type as ‘REQUEST’, the Name as ‘photoID’ and use the ‘= =’ double equal operation with wildcards disabled.
Image 15-11:
Image 15-12:
Now that the recordset is in place, let’s create a single record table to display the details for this photo.
- Select Server Behaviors > Wizards > Single Record Table.
- Set the name to ‘photo’ the Recordset to ‘photo’ and leave all other table embellishments to their default values.
- Next add the following fields: ‘photoID’, ‘photoName’, ‘photoDescription’.The completed table should look like.
Image 15-13:
- Next, once the table has been added to your page, click under the table and press the ‘enter’ key once or twice and type the word ‘Edit’.
- Hi-light the word ‘Edit’ and then apply a Dynamic Data Link. To do this, select Server Behaviors > Links > Dynamic Data Links.
- Set the target page as ‘edit.php’ and the Variable Name as ‘photoID’. Select the lightning bolt to open the Dynamic Data window.
- Select the ‘photoID’ value from the ‘photo’ Recordset.
- The completed Dynamic Data Link dialogue window should look like.
Image 15-14:
- Save this page, ‘detail.php’ is now complete.
Next create the ‘edit.php’ page and save it in the ‘pattern1’ folder. The ‘edit.php’ page is a form page, so it needs to find a photo and fill in a filled form. Before this is done, we have to first find the photo using a Recordset.
- Select Server Behaviors > Find (Recordset)
- Set the Name to ‘photo’, the Connection to ‘Photos’ and the Layout to ‘photos’.
- Under Add Criterion, select ‘photoID’ and then select the ‘Add’ button.
- When the Variable Selector window opens, choose the Type as ‘REQUEST’, the Name as ‘photoID’ and use the ‘= =’ double equal operation with wildcards disabled.
Image 15-15:
Now that the photo has been found, we will need to create a filled form using the Filled Form Builder Wizard.
- Select Server Behaviors > Wizards > Filled Form Builder.
- For Name, use ‘form’ and for Recordset, use ‘photo’
- The Action should be set to ‘edit_result.php’ and it should be a ‘POST’ form.
- The text for the submit button should be “Save Changes”.
- Add the fields ‘photoName’ and ‘photoDescription’ and click ‘OK’.
Image 15-16:
- The form will display on the ‘edit.php’ page.
Image 15-17:
The next page that we need to create is ‘edit_results.php’. Go ahead and create this page and save it in the ‘pattern1’ folder. This page will be an edit query since the record ID is sent by the Filled Form Builder.
- Select Server Behaviors > FileMaker Queries > Edit (Query). The Edit (Query) dialogue window will appear.
- Name it ‘edit_photo’ and use the ‘Photos’ connection and the ‘photos’ layout.
- For the Record ID press the select button and choose a type of ‘POST’ and the Name should be ‘-recid’.
Image 15-18:
- For the Fields, select the ‘photoName’ and ‘photoDescription’ from the drop down list. Make sure to click add.
Image 15-19:
Next, let’s set up the ‘edit_result.php’ page to redirect the user back to the ‘detail.php’ page. To redirect the user to the ‘detail.php’ page we will need to set up a redirect.
- Choose Server Behaviors > Page Actions > Redirect. The Redirect dialogue window will appear.
- Set the Redirect URL as ‘detail.php’ and we will send the ‘photoID’ back to the detail page. So Option Variable Name should have a value of ‘photoID’.
- Next, select the lightning bolt, and click on the ‘+’ sign to expand ‘Edit (Query) (edit_photo) choose the ‘photoID’ binding and click ‘OK’.
- The completed Redirect should look like the screenshot below.
Image 15-20:
Congratulations! Our first simple pattern is complete. Before we test out the pages in our browser, quickly go back through the pages and make sure that they have all been saved.
- Open ‘search.php’ in your browser.
Image 15-21:
- Enter a ‘*’ in the photoName field and click enter. A table of 10 photos will be returned with ‘Detail View’ represented as a link.
Image 15-22:
- Select the ‘Detail View’ of one of the photos by clicking on the link.
Image 15-23:
- Click the ‘Edit’ link. This will bring you to ‘edit.php’ where you can edit the fields ‘photoName’ and ‘photoDescription’. Change the text in the records, and then click on the ‘Save Changes’ button.
Image 15-24:
- You will automatically see the new text appear on the detail page.
Image 15-25:
You have successfully completed a pattern that allows your user to search, display a list of records, continue to a detail view, edit that record, and automatically redirect them back to the detail page.
