9 Developing the Tasks Master Detail-Detail Regions

Add master detail-detail regions to the Tasks detail region on the Maintain Project master detail form.

About This Lesson

Previously, you added the Milestones and Tasks detail regions to the Maintain Project form to create a master detail page.

In this lesson, you learn how to add master detail-detail sub regions to a detail region. Master detail-details are basically detail regions within detail regions.

Add the To-Dos and Links sub regions to the Tasks region to query the DEMO_TO_DOS and DEMO_LINKS tables. These sub regions display additional information depending on which Task the user selects. When you are finished, your users can update as many as five different tables with this single form in your app.

Creating master detail-detail regions is very similar to creating a master detail region, so many of the steps in this lesson should be familiar to you.

Starting from here:

Basic Projects App Export - Topic 7.sql

If you have not completed the previous lessons, you can use the appendix "Importing an Application into a Workspace" to import the above SQL script into your workspace and continue working from this lesson forward. You can find this script in the /files subdirectory of where you unzipped the .zip file accompanying this tutorial.

9.1 Creating the To-Dos Sub Region

Add the To-Dos editable interactive grid sub region to the Tasks region so that your users can easily update their to-dos for a task.

To add an interactive grid as a sub region to the Tasks region:

  1. On the Application home page, click 5 - Maintain Project to navigate to the Maintain Project form in Page Designer.
  2. In the Rendering tree, right-click Tasks and select Create Sub Region.
    A new sub region appears.
  3. In the Property Editor:
    1. Identification: Title - enter To-Dos
    2. Identification: Type - select Interactive Grid
    3. Source: SQL Query - enter select * from demo_to_dos
    4. Appearance: Template - select Standard
    5. Master Detail: Master Region - select Tasks
    6. Server-side Condition: Type - select Item is NOT NULL
    7. Server-side Condition: Item - select P5_ROWID

To make the interactive grid editable:

  1. In the Rendering tree, under To-Dos, select the Attributes folder.
  2. In the Property Editor:
    1. Edit: Enabled select Yes
    2. Toolbar: Buttons - deselect Save

9.2 Linking the To-Dos Sub Region

Hide columns from display, but link them to the higher level tables so that this region functions as the detail in a master-detail relationship. Then change the Assignee column to a select list for improved usability.

To hide and link the ID, PROJECT_ID, and TASK_ID columns of the To-Dos sub region to the Tasks region:

  1. In the Rendering tree under To-Dos, expand the Columns folder and select the ID column.
  2. In the Property Editor:
    1. Identification: Type - select Hidden
  3. In the Rendering tree under To-Dos, select the PROJECT_ID column.
  4. In the Property Editor:
    1. Identification: Type select Hidden
    2. Master Detail: Master Column - select PROJECT_ID

      Note:

      The columns displayed are the columns defined in the Tasks (master) region.
  5. In the Rendering tree under To-Dos, select the TASK_ID column
  6. In the Property Editor:
    1. Identification: Type select Hidden
    2. Master Detail: Master Column - select ID

To change the ASSIGNEE column to a select list:

  1. In the Rendering tree under To-Dos, select the ASSIGNEE column.
  2. In the Property Editor:
    1. Identification: Type - select Select List
    2. Heading: Alignment - select start
    3. Layout: Column Alignment - select start
    4. List of Values: Type - select Shared Component
    5. List of Values: List of Values - select TEAM MEMBERS
    6. List of Values: Display Extra Values - select No
    7. List of Values: Null Display Value - enter - Select Assignee -

9.3 Improving the To-Dos Columns

Change the Name column to a text field and the Is Complete? column to a switch for easier editing in the runtime.

Then make the audit details display only.

To change the NAME column to a text field:

  1. In the Rendering tree in the To-Dos columns, select the NAME column.
  2. In the Property Editor:
    1. Identification: Type - select Text Field

To change the IS_COMPLETE_YN column to a switch:

  1. In the Rendering tree in the To-Dos columns, select the IS_COMPLETE_YN column.
  2. In the Property Editor:
    1. Identification: Type - select Switch
    2. Heading: Heading - enter Is Complete?

To make the audit details display only:

  1. In the Rendering tree in the To-Dos columns, select the CREATED column to select only it. Then press and hold the Ctrl key to select all of the following items:
  2. In the Property Editor:
    1. Identification: Type - select Display Only
You have completed the To-Dos sub region.

9.4 Creating the Links Sub Region

Create and configure the Links sub region in the Tasks region.

To add the Links sub region to the Tasks region:

  1. In the Rendering tree, right-click Tasks and select Create Sub Region.
  2. In the Property Editor:
    1. Identification: Title - enter Links
    2. Identification: Type - select Interactive Grid
    3. Source: SQL Query - enter select * from demo_links
    4. Appearance: Template - select Standard
    5. Master Detail: Master Region - select Tasks
    6. Server-side Condition: Type - select Item is NOT NULL
    7. Server-side Condition: Item - select P5_ROWID

To change the region to an editable interactive grid:

  1. In the Rendering tree under Links, select the Attributes folder.
  2. In the Property Editor:
    1. Edit: Enabled - select Yes
    2. Toolbar: Buttons - deselect Save

9.5 Linking the Links Sub Region

Hide columns from display but link them to the higher level tables so that this region functions as the detail in a master-detail relationship.

To hide the ID column:

  1. In the Rendering tree under Links, expand the Columns folder and select the ID column.
  2. In the Property Editor:
    1. Identification: Type - select Hidden

To hide the PROJECT_ID column and link it to the Tasks Project Id column:

  1. In the Rendering tree, select the PROJECT_ID column.
  2. In the Property Editor:
    1. Identification: Type - select Hidden
    2. Master Detail: Master Column - select PROJECT_ID

      Note:

      The columns displayed are the columns defined in the Tasks (master) region.

To hide the TASK_ID column and link it to the Tasks Id column:

  1. In the Rendering tree, select the TASK_ID column.
  2. In the Property Editor:
    1. Identification: Type - select Hidden
    2. Master Detail: Master Column - select ID

9.6 Improving the Links Columns

Change the Link Type column to a select list, update several columns with more user-friendly labels, and change the audit details to display only.

To change the LINK_TYPE column to a select list:

  1. In the Rendering tree in the Links columns, select the LINK_TYPE column.
  2. In the Property Editor:
    1. Identification: Type - select Select List
    2. List of Values: Type - select Static Values
    3. List of Values: List of Values - enter STATIC2:URL,Application
    4. List of Values: Display Extra Values - select No
    5. List of Values: Display Null Value - select No

To update the labels for the URL, APPLICATION_ID, and APPLICATION_PAGE columns:

  1. In the Rendering tree, select the URL column.
  2. In the Property Editor:
    1. Heading: Heading - enter URL
  3. In the Rendering tree, select the APPLICATION_ID column.
  4. In the Property Editor:
    1. Heading: Heading - enter Application ID
  5. In the Rendering tree, select the APPLICATION_PAGE column.
  6. In the Property Editor:
    1. Heading: Heading - enter Page

To make the audit details display only:

  1. In the Rendering tree, select the CREATED column to only select it, then press and hold the Ctrl key to select all of the following items:
  2. In the Property Editor:
    1. Identification: Type - select Display Only

9.7 Adding a Dynamic Action to Enable Columns for Link Type

Users can add two kinds of links to the Links sub region:

  • the URL of a relevant website

  • a page in the application

Currently, when your users add a new entry to the Links sub region, they can enter information into columns that may not apply, which may be confusing.

Add a dynamic action to the LINK_TYPE column so that the interactive grid displays only the relevant columns when they select the link type. You must create and define two different "True" dynamic actions to enable the relevant columns for URLs. Then, create an Opposite Action for each dynamic action to enable the Application Pages columns.

To add a dynamic action to the LINK_TYPE column for URLs:

  1. In the Rendering tree under Links, expand the Columns folder and locate the LINK_TYPE column.
  2. Right-click the LINK_TYPE column and select Create Dynamic Action.
    A new Dynamic Action populates in the Rendering tree.
  3. In the Property Editor:
    1. Identification: Name - enter Enable Columns Based on Link Type
    2. Client-side Condition: Type - select Item / Column = Value
    3. Client-side Condition: Value - enter URL
  4. In the Rendering tree under the LINK_TYPE column, expand the True folder and select the Enable action.
  5. In the Property Editor:
    1. Affected Elements: Column(s) - select URL

To add a second dynamic action to the LINK_TYPE column for URLs:

  1. In the Rendering tree, right-click Enable Columns Based on Link Type and select Create TRUE Action.
  2. In the Property Editor:
    1. Identification: Action - select Disable
    2. Affected Elements: Column(s) - enter APPLICATION_ID,APPLICATION_PAGE

      Description of GUID-4758BA83-B29A-4081-927F-CE2206E1EB7C-default.png follows
      Description of the illustration GUID-4758BA83-B29A-4081-927F-CE2206E1EB7C-default.png

      Important:

      Do not enter any spaces in the Affected Elements: Column(s) field.

      Tip:

      You can also use the Select List button to select the first column, then use it again to select the second column.

9.8 Adding Opposite Actions to Dynamic Actions

Include the corresponding opposite action for dynamic action types such as Show, Enable, and Expand Tree. With an opposite action, the affected elements are set one way if the Client-side Condition evaluates to True and the opposite if the Client-side Condition evaluates to False. In this case, the URL column is enabled when LINK_TYPE equals URL, and is disabled when any other link type is selected. Conversely, APPLICATION_ID and APPLICATION_PAGE are disabled when LINK_TYPE equals URL.

To create an opposite action for each True action:

  1. In the Rendering tree under the LINK_TYPE Dynamic Actions True folder, right-click the Enable True action and select Create Opposite Action.
  2. In the Rendering tree under the LINK_TYPE Dynamic Actions True folder, right-click the Disable True action and select Create Opposite Action.
    Two items (Enable and Disable) appear under a folder named False in the Rendering tree.
    Description of GUID-418DE504-573B-4C9B-A099-E63552D622FF-default.png follows
    Description of the illustration GUID-418DE504-573B-4C9B-A099-E63552D622FF-default.png

9.9 Improving the To-Dos Interactive Grid in the Runtime

Clean up the columns in the To-Dos report by removing the audit details and reordering the columns, then save your changes to the Primary report.

  1. In Page Designer, click Save and Run Page to view the runtime.

To remove the audit detail columns and reorder the remaining columns:

  1. On the To-Dos sub region, click the Actions menu and select Columns.
    The Columns dialog appears.
  2. In the Displayed column, deselect the following items:

    • Created

    • Created By

    • Updated

    • Updated By

  3. Select Name and click the move up icon ( ^ ) to move the column above Assignee.
  4. Select Is Complete? and click the move up icon ( ^ ) to move the column above Description.
  5. Click Save.
  6. On the To-Dos region, click the Actions menu, select Data, and select Sort.
    The Sort dialog appears.
  7. For Column, select Is Complete?
    The Is Complete? column appears in the left-hand pane.
  8. Click the Add icon ( + ) to add a new entry.
  9. Click within the new entry to select it, then for Column, select Created.
  10. Click Save.

To resize the columns:

  1. Click the Name column heading and click the Freeze icon (snowflake) to lock the Name column in place.
  2. (Optional) For the remaining columns in the To-Dos sub region, click and drag the dividers between the columns to suitable widths, such as a narrow column for Is Complete? and a wider column for Description.

To save the report:

  1. Click the Actions menu, select Report, and select Save.
You have completed the To-Dos detail sub region.

9.10 Improving the Links Interactive Grid in the Runtime

Perform similar tasks to make the Links sub region consistent with To-Dos, then save your changes to the Primary report.

To remove the audit detail columns:

  1. In the Links sub region, click the Actions menu and select Columns.
    The Columns dialog appears.
  2. In the Displayed column, uncheck the following items:

    • Created

    • Created By

    • Updated

    • Updated By

  3. Click Save.

To order the report by the Created column:

  1. Click the Actions menu, select Data, and select Sort.
    The Sort dialog appears.
  2. For Column, select Created.
  3. Click Save.

(Optional) To resize the columns:

  1. (Optional) For the remaining columns in the Links sub region, click and drag the dividers between the columns to suitable widths, such as a narrow column for Is Complete? and a wider column for Description.

To save the report:

  1. Click the Actions menu, select Report, and select Save.
  2. When you are finished, click Application #### on the Developer Toolbar to return to the application overview in App Builder.

You have completed the Links detail sub region and fully configured the master detail-detail page.

Proceed to the next lesson.