6 Developing the Milestones Page

Use the Create Page Wizard and Page Designer to add an interactive grid page to the application so that users can manage project Milestones.

In this lesson, you use the Create Page Wizard to add a new interactive grid page. Similar to the older interactive report, interactive grids do not require a paired form page to change the content displayed on the page.

In addition to the EBA_PROJECTS table, the app also contains the EBA_PROJECT_MILESTONES and EBA_PROJECT_TASKS tables. These two tables contain data for incremental milestones and tasks that help to track the progress of an entire project more precisely.

Currently, your app only supports changes to the status of entire projects. Develop the Milestones interactive grid so that your users can view and change the status of these tasks and milestones.

Add and configure a Milestones entry in the Desktop Navigation Menu so it displays across the entire app.

Use Dynamic LOVs (or lookups) to intelligently substitute information from another table by checking against the ID of the content in the original table.

Repeat some familiar tasks to clean up the interactive grid in Page Designer and in the runtime to make it more user-friendly.

6.1 Creating an Interactive Grid Page

Start by using the Create Page Wizard to add a new page.

To add an interactive grid page to the application:

1. On the Application home page, click Create Page.

   The Create Page Wizard displays.

2. Click Report.
3. Click Interactive Grid.
4. Enter the following:
   1. Page Number - enter 5
   2. Page Name - enter Milestones
   3. Click Next.
5. For Navigation Menu, click Create a new navigation menu entry.
6. Use the default settings and click Next.
7. For Report Source, enter the following:
   1. Editing Enabled - click to enable.
   2. Table / View Name - click the LOV icon and select EBA_PROJECT_MILESTONES (table)
      
      

      
      Description of the illustration create_app_add_interactive_grid.png

      
      
   3. Click Create.

   The new Milestones page loads in Page Designer.

8. Click Save and Run Page.

The Milestones report displays in the runtime.

6.2 Updating the Navigation Menu for Milestones

On the Milestones page in the runtime, examine the Milestones entry in the navigation sidebar (click the menu icon in the top-left to expand the menu).

Elements that appear on all pages (such as the Navigation Menu) are controlled in Shared Components.

To view the Navigation Menu in Shared Components:

1. Click Edit Page 5 on the Runtime Developer toolbar to return to Page Designer.
2. Do one of the following:

   • Above the Rendering tab, click the Shared Components tab. Click Desktop Navigation Menu and in Property Editor click Edit Component.

     
     
     
     Description of the illustration page_designer_shared_components_tab.png
     
     
   • Near the Save button, click the Shared Components icon (). Under Navigation, click Navigation Menu, and click Desktop Navigation Menu.
     
     

     
     Description of the illustration shared_components_list_details.png

     
     

Update the sequence and the icon from the blank default for Milestones.

To update the Milestones list entry:

3. Click Milestones.
4. Enter the following:
   1. Sequence - enter 50

      Use 50 to stay in sync with the page number (5).

   2. Image/Class - click the LOV icon and select fa-table-pointer

      Tip:

      Use the search function in your browser to find the icon easily (Ctrl + F or Cmd + F).

   3. Click Apply Changes.
5. Click the Run icon () in the top-right corner to run the app. Note the changes to the navigation sidebar.
   
   

   
   Description of the illustration runtime_milestones_nav_menu.png

   
   

6.3 Hiding Columns in the Application Runtime

Develop the Milestones interactive grid on page 5 in the application runtime by hiding several columns from view and moving the Due Date column.

Tip:

Oracle recommends hiding columns rather than deleting them in case you need them in the future.

In the runtime, you can hide columns using the Column Heading menu or the Actions menu.

To quickly hide a column in an interactive grid:

1. Click the Id column heading and select Hide.
   
   

   
   Description of the illustration runtime_column_heading_menu_hide_milestones.png

   
   

To hide multiple columns in an interactive grid:

2. Click the Actions menu and select Columns.
   
   

   
   Description of the illustration runtime_milestones_actions_menu_columns.png

   
   
3. In the list of columns on the left, click the check boxes adjacent to the following columns to deselect them:

   • Created

   • Created By

   • Updated

   • Updated By

   
   

   
   Description of the illustration milestones_columns_dialog.png

   
   
4. Click Save.

Rearrange the columns in the interactive grid to prioritize the Due Date over other information.

5. To move a column, do one of the following:

   • Drag and Drop Column Heading

     1. Hover the mouse over the Due Date column heading. Note the thin dotted columns that display at the start of the heading. These are the grip handle.

        
        
        
        Description of the illustration runtime_column_heading_grip_handle.png
        
        

     2. Click and hold the grip handle and drag and drop the Due Date column between Project Id and Name.

   • Columns Dialog in Actions Menu

     1. Click the Actions menu and select Columns.

     2. Click the Due Date column to select it. (Do not click the check box.)

     3. Use the Move Up and Move Down buttons below the list to move Due Date below Project Id.

     4. Click Save.
   
   

   
   Description of the illustration runtime_milestones_due_date_column_sorted.png

   
   

To save your changes to the report:

6. Click Actions, select Report, and click Save.
   The message "Default report saved for all users" displays.

6.4 Adding Project Names to the Milestones Interactive Grid

While the Milestones interactive grid is based on EBA_PROJECT_MILESTONES, note that none of the columns provide alphabetical names for the projects. Project names are stored in another table: the NAME column in EBA_PROJECTS. Report regions can query other tables with a Dynamic LOV. This is also called a lookup.

First, create the Dynamic LOV in Shared Components and configure it to query EBA_PROJECTS.

Then use Page Designer to convert the PROJECT_ID column to a Select List, and choose the Dynamic LOV / lookup to display the alphanumerical name of the referenced project instead of the numerical ID.

To return to Page Designer:

1. Click Edit Page 5 on the Runtime Developer Toolbar.

To create a new Dynamic LOV lookup:

2. Click the Shared Components icon (top-right).
3. Under Other Components, click List of Values.
4. Click Create.
5. Select From Scratch and click Next.
6. For Name and Type:
   1. Name - enter Project Name
   2. Type - select Dynamic
   3. Click Next.
7. For Source Type, select SQL Query.
8. Copy and paste the following code:

   select NAME d, ID r
   from EBA_PROJECTS
   order by NAME

9. Click Next.
10. Click Create.

    The Lists of Values screen redisplays with the Project Name LOV present.

11. Click the Edit Page 5 icon in the top-right to return to the Milestones page in Page Designer.

    

To convert a column to a Select List:

12. Click the Rendering tab icon to switch back to it.
13. In the Rendering tab, under Milestones, expand Columns and select PROJECT_ID.
14. In Property Editor:
    1. Identification: Type - select Select List
    2. Heading: Heading - enter Project
    3. List of Values: Type - select Shared Component
    4. List of Values: List of Values - select Project Name
    5. List of Values: Display Extra Values - click to disable
    6. List of Values: Null Display Value - enter the following:

       - Select Project -

15. Click Save and Run Page.
    
    

    
    Description of the illustration runtime_milestones_project_lookup.png

    
    
16. Review your changes to the Project column in the Runtime. When finished, click Edit Page 5 to return to Page Designer.

6.5 Changing the Appearance of an Interactive Grid in Page Designer

Perform some routine clean-up tasks to make the interactive grid more user-friendly:

• Change the heading of the Name column to instead refer specifically to Milestones.

• Convert the audit columns to Display Only to prevent end users from changing the contents.

To change a column heading:

1. In the Rendering tab, under Milestones, expand Columns.
2. Select NAME.
3. In Property Editor:
   1. Identification: Type - select Text Field
   2. Heading: Heading - enter Milestone

To change multiple columns to Display Only:

4. Hold Ctrl and select the following columns:
   1. CREATED
   2. CREATED_BY
   3. UPDATED
   4. UPDATED_BY
5. In Property Editor:
   1. Identification: Type - select Display Only
6. Click Save and Run Page to enter the runtime.
   
   

   
   Description of the illustration runtime_milestones_appearance_after_page_designer.png

   
   

6.6 Finalizing the Milestones Interactive Grid in the Runtime

Perform some routine clean-up tasks to complete the default Milestones report:

• Sort the report so that it displays projects alphabetically.

• Save your changes to the report layout as the new default.

To set multiple columns to sort ascending:

1. Hover over the Project column heading and click the Sort Ascending icon (up arrow).
2. Hold the Shift key, hover over the Due Date column heading, and click the Sort Ascending icon (up arrow).

   Icons display next to the Project and Due Date column names indicating their sort order.

   
   

   
   Description of the illustration runtime_milestones_columns_sorted.png

   
   

To save the report layout as the new default:

3. Click the Actions menu, select Report, and select Save.

   You cannot use the Save button at the top of the report for this step because it does not overwrite the report default.

4. Click Application ##### on the Runtime Developer toolbar to return to the Application home page.

The Milestones page is complete. Proceed to the next lesson.