From FMWebschool Reference

Contents 1 Chapter 11. Adding New Portal Rows 1.1 Adding a hidden form field 2 See Also

Chapter 11. Adding New Portal Rows

Adding new portal rows is a very similar process to creating new records with one very important difference. When you add new portal rows you must fill in the value of the field that connects the new portal row with a parent record.

In this example create a new portal row inside the 'photos' table and then fill in the photographer ID for which we are adding this portal row. This is accomplished by submitting a blank form with user submitted data as well as a hidden field that passes along the photographer ID for this portal row.

I'll begin with the 'photographer.php' page from Chapter 10, which displays the detail information for a single photographer.

1. Begin by creating a new form. To do this, place your cursor under the portal table' and hit the enter key a couple times to give yourself some space.
2. Next Select Server Behaviors > Wizards > Form Builder. The Form Builder dialogue window will open.

Note: An important thing to note about this form builder, we will be creating this portal row directly inside the child table, directly inside the photos table and not the photographer table. Therefore the field names would be best if they are the ones that match the photos layout. Therefore, when creating this form use the photos layout from the connection for the field.

1. Name the table 'add photo' and check the 'Generate Table' check box.
2. Choose the 'Photos' connection, the 'photos' layout and the action should be 'photographer_photo_add.php'. This is a POST form and the Submit button should read "Add Photo".
3. Next for the Input Fields section – The form will be asking for the 'photoName', 'photoDescription' and the 'photoPrice'. Click 'OK' once this is completed.

Image 11 – 1: Create a form with the following fields: photoName, photoDescription, photoPrice.

1. The form will appear on the bottom of the page with a red outline and three text boxes with descriptions. Hi-light the descriptions and change them to: Name, Description, and Price.

Image 11 – 2: Form with three fields – the labels have been changed to be more descriptive.

The form will now allow us to submit data to the photographer add page, but it also needs to send the photographerID to connect this photo. To do this a hidden form field needs to be sent along with this form.

Out of habit, I usually place the hidden form fields next to the submit button, this way they are easy to find and I always know where to look for them.

Adding a hidden form field

1. Place your cursor next to the submit button. Navigate to Insert > Form > Hidden Field from the Dreamweaver main menu.

Image 11 – 3: Add a hidden field by selecting: Form > Hidden Field

1. Hidden field is just like any other form input it has a name and a value. In the 'Properties' panel add 'photographerID' in the Hidden Field.

Image 11 – 4: Add ‘photographerID’ as the value

1. For the main value, click on the lightning bolt and choose the 'photographerID' binding of the main photographer Recordset.

Image 11 – 5A: Choose ‘photographerID’ from the photographer Recordset

Image 11 – 5B: The value will be displayed in the properties panel.

Now that the photographerID is going to be submitted with this ‘Add Form' there are only a couple of steps left to be completed. The Add page needs to be created and the query will need to be executed. Once that is done, we will redirect the user back to the parent record page that will reflect the new portal row in the list of photos.

1. Create the 'photographer_photo_add.php' page. The 'photographer_photo_add.php' will not have any specific content on it, within the design view. It will be a simple new query, followed by a redirect to the photographer.

1. Create the new query. Select Server Bindings > FileMaker Queries > New (Query)

Image 11 – 6: Create a new query by selecting Server Behaviors > FileMaker Queries > New (Query)

The New Query dialogue window will open.

1. Name the new query 'photo_add', use the 'Photos' connection, and select the 'photos' layout. We will be adding a record to the photos layout.
2. The first field will be the 'photographerID'. This will come from the type 'REQUEST' and the Name 'photographerID' this is a hidden field that is sent with the form and will cause this record to be part of the new portal. It will cause this record to show up in the portal records of the photographer.
3. Next the photo name will need to be populated, as well as photo description and photo price. This is simply accomplished by selecting the fields from the drop down menu and clicking 'Add' for each field. Press 'OK' once this is done.

Image 11 – 7: Add the fields: photographerID, photoName, photoDescription and photoPrice.

Now that the new query named 'photo_add' is in place, it is time to redirect the user back to the main parent record. In this case, we need to know which photographer ID we want to redirect to.

1. Choose Server Behaviors > Page Actions > Redirect

Image 11 – 8: To redirect the user back to the main parent record start by choosing Server Behaviors > Page Actions > Redirect.

1. The Redirect dialogue box will appear. Type 'photographer.php' as the Redirect URL.
2. The Option Variable Name is 'photographerID' and then click the lightning bolt and choose 'photographerID' from the newly created record.

Image 11 – 9: Choose ‘photographerID’ from New (Query) (photo_add)

Image 11 – 10: Enter the redirect page as ‘photographer.php’ and ‘photographerID’ as the optional variable name.

Now that the new query is performed and the user is redirected back, we need to test our pages to make sure everything is working as expected.

1. Open the 'photographers.php' page in your browser.
2. Click the 'View Details' link and then fill out the form at the bottom of the 'photographer.php' page.
3. Once you have filled in the form, click the 'Add Photo' button and you will be redirected back to the same page you were on, except this time you will see the new photo record at the end of the portal.

It is that simple to add new portal rows and redirect the user back to the parent record that reflects a new row in the list of portal records.

In this chapter we learned how to add new portal rows and how to redirect the user to destination pages that we choose. In Chapter 12, things will get a little more complex as we learn how to delete and edit portal rows.

See Also

• FMStudio Complete Guide Table of Contents