From FMWebschool Reference

Contents 1 Chapter 12. Deleting and Editing Portal Rows 2 See Also

Chapter 12. Deleting and Editing Portal Rows

Deleting and editing portal rows is a slightly more involved process than Chapter 11 where we added new portal rows. This chapter will however introduce you to a number of concepts that will become very useful.

Some of the topics that will be discussed are hidden variables, as well as multiple confirmation pages that are useful in some of the more complex applications that you might be designing. Let’s start with deleting portal rows since this process is quite simple.

The flow for deleting portal rows usually starts with a link, such as delete record, and then an optional confirmation page, then a page with a delete query that actually deletes the record. All of this is usually finished off with a redirect that redirects the user back to the parent record to add, edit or delete more portal rows.

To begin this chapter, we’ll start by adding the needed links on the ‘photographer.php’ page.

1. Open ‘photographer.php’ and add a new column to the “portal-photos’ table as shown below after the price column.

Image 12 – 1: New column added to the ‘portal_photos’ table

1. Next add ‘Actions’ as the header

Image 12 – 2: Type the word Actions as the column header

1. Since we will be covering editing and deleting in this chapter, in the cell below the ‘Actions’ header, add two links. ‘Edit’ and ‘Delete’ separated by a ‘|’ pipe character. They should look like Edit | Delete.

1. Next add a dynamic data link to ‘edit’. Hi-light the word ‘edit’ and choose Server Behaviors > Links > Dynamic DataLink. The Dynamic DataLink dialogue window will appear.
2. The Target page should be the ‘photographer_photo_edit.php’ page and should pass along the ‘photoID’ variable name.
3. Also make sure that you select the ‘photoID’ from the portal set of bindings.

Image 12 – 3: Select ‘photoID’ from the portal set of bindings. Do not select the ‘photoID’ from the main photographer recordset.

Image 12 – 4: The Dynamic Data Link with all fields populated.

Now that the edit link is now completed, we will need to do the same to the delete text. Delete will be linked to ‘photographer_photo_delete.php’.

1. Hi-light the word ‘delete’ and choose Server Behaviors > Links > Dynamic DataLink. The Dynamic DataLink dialogue window will appear.
2. The Target page should be the ‘photographer_photo_delete.php’ page and should pass along the ‘photoID’ variable name.
3. Select the ‘photoID’ from the portal set of bindings.

Image 12 – 5: Select the ‘photoID’ from the portal set of bindings.

Not the main photographer recordset.

Image 12 – 6: The Dynamic Data Link with all fields populated.

Next, let’s make the delete link point to a confirmation page – this page will double check to make sure that the person actually wants to delete this record. If they confirm that they indeed want to delete the record, they will be continued to the delete query.

1. Create the ‘photographer_photo_delete.php’ page. Save this page.
2. Next add some text to the top of the page, confirming that the user wants to delete the record. “Are you sure you want to delete this record?” To make the text stand out, center it on the page, and add a style of Heading 1.

Image 12 – 7: Text confirming that the user wants to delete the record they are viewing.

We can also use this page to display some information about the record that they are going to delete. To do this, create a find recordset for this page that will find the photo linked by the photoID from the Dynamic DataLink.

1. Server Behaviors > Find (Recordset)
2. The name is ‘photo’ and the connection is ‘Photos’
3. Choose the ‘photos’ layout
4. Under ‘Add Criterion’ choose ‘PhotoID’ and then click the ‘Add’ button.
5. The Type is set to ‘REQUEST’ the Name is set to ‘photoID’ and the Operation is set to ‘= =’ with disable wildcards selected.

Image 12 – 8: The Variable Selector should be set to exact search with wildcards disabled.

1. Once recordset has been completed click ‘OK’

Image 12 – 9: The completed recordset should look like the photo above.

Now we can display some information about the photo. To do this I will drag and drop some of the bindings onto the Dreamweaver work area.

1. Type the text ‘Photo Name’ and then under ‘Bindings’ drag and drop the ‘photoName’ binding onto the page beside the ‘Photo Name’ text.
2. Type the text ‘Photo Description’ under ‘Photo Name’ and then under bindings, drag and drop the ‘photoDescription’ binding onto the page beside the text.
3. Hi-light the text and the bindings, center them on the page and apply a style of Header 2 as shown below.

Image 12 – 10: The Photo Name & Photo Description bindings placed beside the text Photo Name and Photo Description

Since this page is asking a question, “Are you sure you want to delete this record”? You need to provide the user with a way of deciding on which action to take. So the next step is creating ‘Yes’ and ‘No’ buttons.

1. Create a table to hold the ‘Yes’ and ‘No’ buttons.
2. From the main menu choose Insert > Table. Create a table with 1 row and 2 columns with a width of 200 pixels.

Image 12 – 11: Create a table with 1 row and 2 columns with a table width of 200.

1. Center the table on the page.
2. In the first cell, insert a new form. Insert > Form > Form

Image 12 – 12: Insert > Form > Form to add a form to the page

1. In the Properties panel, set the ‘Action’ to ‘photographer_photo_delete_query.php’ and set the ‘Method’ to post.

Image 12 – 13: The Action is set to ‘photographer_photo_delete_query.php’.

Just a quick reminder as mentioned in other chapters, ‘POST’ should be used for edits and deletes, while get should be used for linking to specific pages or searches that do not actually modify data. Since delete modifies data, you should use POST.

1. Within the form, I will add a ‘submit’ button. Insert > Form > Button
2. In the properties panel, type ‘Yes” as the value.

Image 12 – 14: Name the buttons ‘Submit’. Give ‘Yes’ as the value.

1. Within the same form to the right of the button, add a hidden field that will pass along the ‘photoID’ of the record that we are attempting to delete. Insert > Form > Hidden Field

If this hidden field is not added, the ‘photographer_photo_delete_query.php’ page would not have any idea as to the specific photo you are trying to delete.

1. Under the ‘properties’ panel, give the hidden field a name of ‘photoID’ and then click the lightning bolt beside the ‘Value’ field.
2. From the ‘photo’ Recordset, choose ‘photoID’.

Image 12 – 15: Select the ‘photoID’ from the photo Recordset

1. The properties should look like the screenshot below.

Image 12 – 16: The hidden field is set to ‘photoID’

Now that the Yes button is complete, we need to turn our attention to the No button. The No button will be very simple; it will simply take the user back to the photographer parent record that displays all of the portal rows.

1. Add another form to the second cell in the table. Insert > Form > Form
2. Under Properties, set the action to ‘photographer.php’ and set the method to ‘Get’. By using Get, the photographer ID will be visible in the URL once the button is pressed
3. Next, insert a button into this form. Insert > Form > Button

Image 12 – 17: Insert a button into a form by choosing Insert > Form > Button

1. Under properties, give the button a value of ‘NO’.
2. Next insert a hidden field to the right of the button. Insert > Form > Hidden Field. The hidden field will tell ‘photographer.php’ which photographer ID to use to display the parent record.

Remember: The ‘Yes’ button is passing a ‘photo ID’ while the ‘NO’ button is passing a ‘photographer ID’

1. Under properties, give the Hidden Field a name of ‘photographerID’ and select ‘photographerID’ from the photo record as well.

Image 12 – 18: Select photographerID from the photo Recordset

1. Save this page. The completed page should look like the screenshot below.

Image 12 – 19: Completed page with Yes and No buttons

Now that this page is complete, create a new page that actually deletes the record. Name the page ‘photographer_photo_delete_query.php’.

1. Create a new page named ‘photographer_photo_delete_query.php’
2. Create the standard photo recordset to find the photo based on the photoID.

Image 12 – 20: Completed photo Recordset

1. Next I will use the delete query which will use the found photo to extract the record ID. Server Behaviors > FileMaker Queries > Delete. The Delete dialogue window will open.
2. Give the name as ‘photo_delete’, the connection as ‘Photos’ the layout as ‘photos’.
3. Choose the ‘select’ button next to the ‘Recid’ field – under the ‘TYPE’, select ‘Recordset (photo) Meta-Data

Image 12 – 21: Select the Recordset (photo) Meta-Data

and choose the ‘RecordID’ from the ‘Name’ dropdown list.

Image 12 – 22: Choose Record ID from the Name dropdown list

Do not apply any other operators.

1. Once completed, the Delete Query should look like the screenshot below.

Image 12 – 23: Completed Delete Query

Now that the photo has been found and deleted, redirect the user back to the ‘photographer.php’ page.

1. Select Server Behaviors > Page Action > Redirect. The Redirect dialogue box will appear.
2. Type ‘photographer.php’ for the redirect URL
3. For the variable name, use ‘photographerID’
4. For the variable value, use the recordset ‘photo’ and choose the ‘photographerID’ as the binding.

Image 12 – 24: Select the photographerID from the photo Recordset

The completed Redirect dialogue box should look like this.

Image 12 – 25: Completed Redirect Dialogue window

Now that several pages are complete, it is a good idea to test them to make sure they are performing as expected.

1. Open ‘photographers.php’ in the browser and select view details.
2. Click the ‘delete’ link on one of the records

Image 12 – 26: Select the delete link on one of the records

– You should immediately be taken to the ‘photographer_photo_delete.php’ page.

Image 12 – 27: The ‘photographer_photo_delete.php’ page gives you the choice of selecting ‘Yes’ to delete the record, or ‘No’ to return back to the ‘photographers.php’ page.

1. First test the ‘NO’ button. Remember the ‘NO’ button should take you back to the correct photographer record.
2. This time select delete again, and choose the ‘YES’ button.
3. This time a record is deleted. Ah success is grand!

Image 12 – 28: Photo Record deleted

Now that we have successfully deleted a record, let’s discuss how to edit a portal row. If you remember, at the beginning of the chapter, we added an edit and delete link to the ‘photographer.php’ page. This means that at the end of every portal row, there will be an edit and delete link. The edit link is pointing to the ‘photographer_photo_edit.php’ page.

Editing portal rows with FMStudio is a very similar process to deleting them. You point to a page which will present a filled form with information about the record that you are editing. You can edit values, and then resubmit the form, which goes to the actual query page, executing the edit and then redirecting the user back to the parent portal record where they can see the newly edited record in the list of portal records.

1. Create a new page named ‘photographer_photo_edit.php’. Save this page.

The ‘photographer_photo_edit.php’ page needs to first find the record, and then present the filled form to modify the record information. If you are unclear as to why this needs to be done, please refer back to chapter 8, Editing Records.

1. Create the standard photo recordset to find the photo based on the photoID.

Image 12 – 29: Completed photo Recordset

1. Now that the photo is found, we need to create the page with the form. At the top of the page, type ‘Editing a Photo-‘ and drag and drop ‘photoName’ binding beside the text.
2. Next, add a filled form under the text and binding. Click your mouse on the work area and then select Server Behaviors > Wizards > Filled Form Builder. The Filled Form Builder dialogue window will appear.
3. Name it ‘photo_edit’, and check ‘Generate Table
4. The action will be ‘photographer_photo_edit_result.php
5. Type ‘Save Changes’ for the Submit Button text
6. Next, add three fields. ‘photoName’, ‘photoDescription’, ‘photoPrice’.

Image 12 – 30: Completed Filled Form Builder with the fields: photoName, photoDescription and photoPrice.

1. Next take a few moments to tidy up the page to make it more presentable. Start by hi-lighting the text and the binding at the top of the page and applying a style Heading 1.
2. Change the field titles so the first letter is capitalized.

Image 12 – 31: Change the field labels to read Name, Description, and Price

Unlike chapter 8 where we trusted the filled form builder to pass along the internal record ID to the result page, we’ll pass along the photoID in a hidden field along with this form and detect the internal record ID with a recordset inside the result page.

1. Add a hidden field to the right of the ‘Save Changes’ button. Insert > Form > Hidden Field
2. In the properties panel, give the field a name of ‘photoID’ and give it a value of ‘photoID’ from the found recordset.
3. To complete this edit, create the ‘photographer_photo_edit_result.php’ page.

The ‘photographer_photo_edit_result.php’ page will start by finding the photo using the passed in photoID of the hidden field. We will do this by creating a new recordset which is an exact match on the passed in photoID.

Image 12 – 32: Completed photo Recordset

Now that the photo is found, it is time to create the edit query.

1. Select Server Behaviors > FileMaker Queries > Edit (Query). The Edit (Query) dialogue window will appear.
2. Name it ‘photo_edit’, and use the ‘photos’ layout.
3. For the recordID, choose the “Recordset (photo) Meta-Data and then select the –RecordID

Image 12 – 33: Choose the Record Id from the Name dropdown list

1. Next we need to select the 3 fields that are getting updated in this edit. Select: ‘photoName’, ‘photoDescription’ and ‘photoPrice’.

Image 12 – 34: Select the Add button, and add the following fields: photoName, photoDescription and photoPrice.

Now that the photo record has been updated, we need to redirect the user back to the ‘photographer.php page’ with the photographer ID of the edited record.

1. Choose Server Behaviors > Page Actions > Redirect. The Redirect dialogue window will appear.
2. Set the Redirect URL to ‘photographer.php’
3. Set the Variable Name to ‘photographerID’ and for the Variable Value, choose the ‘photographerID’

Image 12 – 35: The Redirect URL is set to ‘photographer.php’ and the Variable Name is set to ‘photographerID’.

Now that the redirect is in place, you should test your pages to make sure your solution works. To test the pages, go back to the list of photographers.

1. Open ‘photographers.php’ in the browser and select view details.
2. Click ‘edit’ on one of the records.

Image 12 – 36: Click ‘edit’ on one of the records

You should immediately be taken to the ‘photographer_photo_edit.php’ page.

Image 12 – 37: Change the content in any of the three fields and then select the ‘Save Changes’ to implement your changes.

1. Change the price field and then select the ‘Save Changes’ button
2. The edit query will be executed and you should be redirected back to the photographer page. The record should also be updated reflecting any changes that you made.

Image 12 – 38: Any changes that you made will be reflected when you are automatically redirected to the photographer page.

In this chapter we covered deleting and editing portal rows. We then learned how to redirect the user to a specific page set up. Most web developers return the user to either a confirmation page, or back to the page where they began the edit process.

In chapter 13 we will discuss a number of methods that allow you to display information in more advanced ways than a simple dynamic table.

See Also

• FMStudio Complete Guide Table of Contents