Lesson 1.6: Create an update page

1. Open the update_record.jsp file by double-clicking it in the Project Explorer view.
2. Delete the default text Default content for bodyarea.
3. In the Palette view, click the Data drawer to expand it.
4. Drag the Relational Record component from the Palette onto the blank content area. The Add Relational Record window opens.
5. In the Name field, type update_record.
6. Under Create controls for, click Updating an existing record.
7. Make sure the Add input/output controls to display the Relational Record on the web page option is selected.
8. Click Next.
9. In the Table box, expand W5SAMPLE and select ADS.
10. Click Next. The Add Relational Record page opens.

A relational record can show only one record from the database. Therefore, you must filter the database table so only one record appears for the user to edit. (You didn't need to filter the database in the previous exercise because you created a new record and thus there were no results from the database to filter.) Since each record in the database has a unique ID number, you will filter the results to the one with a given ID number.

1. The Add Relational Record page has a list of task links. Under Tasks, click Filter Results. The Filters window opens and inserts the default filter condition ID = #{param.ID} in the Filter column. The Filters window looks like this:
   
   This code filters the records in the database so only the record with the specified ID number will appear in the relational record. You will learn more about this condition in the Add a row action section later in this exercise. Click Close.
2. Click Next. The Configure Data Controls page opens.
3. In the Fields to display section, clear the check box next to every field name except for those you want to display in your input form:
   • ID
   • TITLE
   • DESCRIPTION
   • MAINCATEGORY
   • PRICE
   • PHONE
4. By clicking Up or Down, reorder the field names from top to bottom as follows:
   • ID
   • TITLE
   • DESCRIPTION
   • MAINCATEGORY
   • PRICE
   • PHONE
5. For the ID field, select Output field from the drop-down list in the Control Type column. Although you want users to be able to view a record ID number, you do not want them to be able to update it. Making the ID field into an Output field will help you avoid the problem of duplicate IDs.
6. Click Options. The Options window opens. Make sure the Submit button option is selected. Type Update in the Label field. Click OK. The Add Relational Record window should look like this:
   
7. Click Finish to generate your update form on the page, as shown below:
   

Again, you will add code to refer the user to the all_records.jsp page to display the changed record along with all the other records.

1. Right-click the Update button that you just created on the Web page and select Properties.
2. Click Add Rule. The Add Navigation Rule window opens.
3. From the Page drop down, select all_records.jsp. In the This rule is used by box, click This action only. Ensure the field contains: #{pc_Update_record.doUpdate_recordUpdateAction}. Click OK.
4. Repeat steps 1-3 to edit the code in the same way for the Delete button on the Web page. Ensure the This rule is used by field contains: #{pc_Update_record.doUpdate_recordDeleteAction}
5. Save the page. If you want to try adding a record to the database to verify that you will return to the all_records.jsp page, run new_record.jsp on your test server.

Now, you will add a row action to the table on all_records.jsp so the user can select a database record to update. #{param.ID} represents the ID number of the record that the update page will update. When the user clicks a row, that record ID number will be sent to the update_record.jsp page as the #{param.ID} parameter. Then, the filtered relational record you just inserted into the update_record.jsp page will display only that record for updating.

1. In the Project Explorer view, double-click the all_records.jsp file to open it in the Editor. Click anywhere inside the data table. Open the Properties view.
2. In the Properties view, click the Row Actions tab under hx:dataTableEx from the list of HTML tags.
3. Click Add an action that's performed when a row is clicked. The Configure a RowAction dialog opens. Select Clicking the row sends a request to the server with row information sent as parameters then click OK. A column is added to the data table.
4. In the Properties view, click the hx:requestRowAction tab.
5. Click Add Rule. The Add Navigation Rule dialog opens.
6. From the Page drop down, select update_record.jsp. In the This rule is used by box, select This action only. The this action only field is automatically populated by #{pc_All_records.doRowAction1Action} which was created when you added the row action. Click OK. If the field is not automatically populated with the above method, type the method in the field and add the following to ClassifiedsTutorial/Java Resources: src/pagecode/All_records.java:

   public String doRowAction1Action() {
   				return "";
   }

7. In the Properties view, click the Parameter tab under hx:requestRowAction. Click Add Parameter then type ID in the Name field. You need to bind the ID parameter to the ID column. Binding the row action to the ID column of the data list means that when the row is clicked, the request parameter will be the ID of the record in the list.
   1. Click Value then click the Select Page Data Object button.
   2. In the Data Object tab, expand all_recordlist (Service Data Object) > all_recordlist (ADS) and select ID (java.lang.Integer).
   3. Click OK.