8.7.3 Creating Master Detail from an Existing Interactive Grid

A single page master detail features two editable interactive grids based on two related tables or views. You can define any number of master detail relationships on a single page by simply adding a related interactive grid to the page. If you have an existing interactive grid, you can add another related interactive grid by doing the following:

• Create the parent interactive grid.

• Define the primary key (if needed).

• Create the child interactive grid.

• For the child interactive grid, specify the Master Region and Master Column.

The following example demonstrates how to create an interactive grid on the departments table, OEHR_DEPARTMENTS by running the Create Page Wizard. This wizard creates the parent interactive grid and enables you to define the primary key. Then, you create a child interactive grid on the employees table, OEHR_EMPLOYEES.

To add a related interactive grid below an existing grid:

1. Create an application.
2. Run the Create Page Wizard. On the Application home page, click Create Page
3. In the Create Page Wizard:
   1. Select a Page Type - Select Report and then select Interactive Grid.
   2. Page Attributes - For Page Name enter Departments and click Next
   3. Navigation Menu - Select how you want this page integrated into the Navigation Menu and click Next.
   4. On Report Source:

      • Editing Enabled - Select On.

      • Source Type - Select Table.

      • Table / View Name - Select OEHR_DEPARTMENTS (table).

      • Click Create.

      Page Designer appears.
4. Click Save and Run Page to view a rendered version of the parent interactive grid.

   This following illustration shows an editable interactive grid created on the OEHR_DEPARTMENTS table.

   
   Description of the illustration master_detail_parent.png
5. Return to Page Designer. Click Page X on the Runtime Developer toolbar, where X is the page number.
6. Create the child interactive grid on the OEHR_EMPLOYEES table:
   1. In the Gallery, locate the Regions tab.
   2. Under Regions, find and then right-click Interactive Grid.
   3. Select Add To, Body, the region, Departments, and then After.

   The Rendering tab and Layout tab both display a new region in red.

   
   Description of the illustration master_detail_new_child_region.png
7. Edit the New child region:
   1. In the Rendering tab, select the New region (if not already selected).
   2. In the Property Editor, edit the region attributes:

      Note:

      To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

      • Identification, Title - Enter Employees.

      • Source, Type - Select SQL Query.

      • Source, SQL Query - Enter the query:

        select OEHR_EMPLOYEES.EMPLOYEE_ID as EMPLOYEE_ID,
            OEHR_EMPLOYEES.FIRST_NAME as FIRST_NAME,
            OEHR_EMPLOYEES.LAST_NAME as LAST_NAME,
            OEHR_EMPLOYEES.HIRE_DATE as HIRE_DATE,
            OEHR_EMPLOYEES.EMAIL as EMAIL,
            OEHR_EMPLOYEES.PHONE_NUMBER as PHONE_NUMBER,
            OEHR_EMPLOYEES.JOB_ID as JOB_ID,
            OEHR_EMPLOYEES.SALARY as SALARY,
            OEHR_EMPLOYEES.DEPARTMENT_ID as DEPARTMENT_ID 
         from OEHR_EMPLOYEES

      • Layout, Start New Row - Select On.

      • Appearance, Template - Select Standard

      • Master Detail, Master Region - Select the region, Departments.

8. For the child interactive grid, Employees, define DEPARTMENTS as the Master Column:
   1. In the Rendering tab, under the child interactive grid, Employees, expand the Columns node and select DEPARTMENT_ID.
   2. In Property Editor, edit the following:

      • Find Master Detail.

      • For Master Column, select DEPARTMENT_ID.

9. Click Save. To run the page, click Save and Run Page.
   
   Description of the illustration master_detail_run.png

   Note that parent, Department, filters the results in Employees, the child.

   Next, make the child, Employees, editable.

10. Make Employees report editable:
    1. Access Page Designer. Click Page X on the Runtime Developer toolbar.
    2. In the Rendering tab, select the Employees region.
    3. In the Property Editor, click the Attributes tab.
    4. In the Property Editor, edit the following:

       • Edit, Enabled - Select On.

       • Allowed Operations - Verify the following operations are enabled: Add Row, Update Row, and Delete Row.

11. Define the EMPLOYEE_ID column as the Primary Key Column:
    1. In the Rendering tab, under Employees, expand Columns and select EMPLOYEE_ID.
    2. In the Property Editor, find Source, Primary Key and select On.
12. Click Save. To run the page, click Save and Run Page.

    The child interactive grid, Employees, is now editable

    
    Description of the illustration master_detail_editable.png