Add / Delete a row from a SQL based Tabular Form (Static ID)

The current application I am working on involves a re-write to a 12 screen wizard that was written 18 months ago. Several of the screens make use of manually built tabular forms (SQL report regions) and collections to hold the values entered. Some of the screens in the wizard have multiple tabular forms on them as well.

Currently all tabular forms have 15 lines which cannot be added to or deleted from. In the new version, we removed this limit and allow the user to add as many rows as he / she needs. Furthermore, specific rows can now be removed from the Tabular form. Since all entered data is written into collections, we wanted to avoid "line by line" processing i.e. submitting the form for each time, updating the collection and branching back to the page. By utilising some simple JavaScript and the new "Static ID" of the Reports Region new to APEX 3.0, all requirements could be met.

The Static ID attribute of the reports region allow us to add our own (unique) ID to a report region. From here we can simpley navigate down the DoM, clone a row in the form using cloneNode and append it to the table using appendChild.

The JavaScript will work even if you have multiple report regions on the same page providing each report region has a unique Static ID value.

Method:

• Create a new region on your page using the following details:

1. Region Type: Report
2. Report Implementation: SQL Report
3. Title: Add Row to Report
4. Region Template: Reports Region
5. SQL Query: view
6. Report Template: Standard

• Add the following JavaScript to your Page Header: view

• Copy the region template: Reports Region and name it Reports Region (Static ID)

• Edit the region template: Reports Region (Static ID) and replace the Substitution String #REGION_ID# with #REGION_STATIC_ID# in the Definition section

• Edit the region: Add Rows to Report and insert the value: REPORT1 into the Static ID textbox found in the Identification seciton. Note that the values entered into the Static ID textbox must be unique to the page if using multiple report regions where you are specifying a Static ID. Then change the template of the region to use the newley created Reports Region (Static ID) template

• Copy the report template: Standard and name it Standard (Static ID)

• Edit the report template: Standard (Static ID) and replace the text: id="#REGION_ID#" with: id="datatable_#REGION_ID#" in the before rows section.

• Edit the report attributes and change the report template to use the newley created: Standard (Static ID)

• Add a button to the page using the following details:

1. Select a Region for the Button: Add Rows to Report
2. Position: Create a button in a region position
3. Button Name: ADD_ROW
4. Label: Add Row
5. Button Type: HTML Button
6. Action: Redirect to URL without submitting page
7. Target is a: URL
8. URL Target: javascript:addRow('REPORT1');

Please note that REPORT1 refers to the Static ID of the region you want to add your row to

• Test your Add and Delete a row functionality

An example with all the source code can be seen here