9 Developing the Task Overview Page

Create a Faceted Search page based on the SAMPLE$PROJECT_TASKS table that provides a broad, easily sortable overview of all project work tracked in the app.

About This Lesson

In this lesson, you add the final page to your app: a Faceted Search page. Faceted Search is a powerful tool for sorting through a large table with multiple columns.

You use the Create Page Wizard to add the page. Subsequent clean up in Page Designer is minimal and familiar.

9.1 Creating a Faceted Search Page

To add a Faceted Search page to the application:

1. In the Application home page, click Create Page.
2. Click Report.
3. Click Faceted Search.
4. For Page Attributes:
   1. Report Page Number - enter 8
   2. Report Page Name - enter Task Overview
   3. Click Next.
5. For Navigation Menu:
   1. Select Create a new navigation menu entry.
   2. Click Next.
6. For Report Source:
   1. For Table / View Name, click the LOV icon.
   2. Select SAMPLE$PROJECT_TASKS (table).
   3. Wait for the list of facets to populate below before proceeding.
      
      

      
      Description of the illustration create_page_faceted_search_source.png

      
      
   4. Click Create.
   When the wizard completes, Application Express loads the Task Overview page in Page Designer automatically.
7. Click Save and Run Page to view the page in the runtime.
   
   

   
   Description of the illustration runtime_faceted_search.png

   
   
8. When finished, click Edit Page 8 on the Runtime Developer toolbar to return to Page Designer.

9.2 Updating the Task Overview Page

The Task Overview page requires minimal updates:

• Update the IS_COMPLETE column.
• Hide the ID and audit columns (CREATED, CREATED_BY, UPDATED, UPDATED_BY).
• Increase the cell width of the START_DATE and END_DATE columns.
• Apply a format mask to the COST column.
• Update the Navigation Menu in Shared Components.

To update the IS_COMPLETE_YN column:

1. In the Rendering tab, select IS_COMPLETE_YN.
2. In Property Editor:
   1. Heading: Heading - enter Complete
3. In the Rendering tab, click Search Results (under Content Body).
4. In Property Editor:
   1. Source: Type - select SQL Query.
   2. Source: SQL Query - delete the contents, then copy and paste the following code:

      select ID,
             PROJECT_ID,
             MILESTONE_ID,
             NAME,
             DESCRIPTION,
             ASSIGNEE,
             START_DATE,
             END_DATE,
             COST,
             decode(is_complete_yn, 'Y', 'Yes', 'No') IS_COMPLETE_YN,
             CREATED,
             CREATED_BY,
             UPDATED,
             UPDATED_BY
        from SAMPLE$PROJECT_TASKS

   3. Click Save.

To hide columns:

5. In the Rendering tab, expand Columns.
6. Hold Ctrl and click the following columns to select them:
   • CREATED
   • ID
   • CREATED_BY
   • UPDATED
   • UPDATED_BY
7. In Property Editor:
   1. Identification: Type - select Hidden Column.
   2. Click Save.

To update the START_DATE and END_DATE columns:

8. In the Rendering tab, under Columns, hold Shift and select the following columns:
   • START_DATE
   • END_DATE
9. In Property Editor:
   1. Appearance: Format Mask - enter DD-MON-YYYY
   2. Advanced: Cell Width - enter 100
   3. Click Save.

To apply a format mask to COST:

10. In the Rendering tab, select COST.
11. In Property Editor:
    1. Appearance: Format Mask - click the LOV icon.
    2. Select $5,234.10.
    3. Click Save.

To update the Navigation Menu entry for the Task Overview page:

12. Click the Shared Components icon.
13. Under Navigation, click Navigation Menu.
14. Click Desktop Navigation Menu.
15. Click Task Overview.
    The List Entry screen displays.
16. Under Entry, for Sequence enter 80
17. For Image/Class, enter fa-table-pointer
18. Click Apply Changes.
19. Click the Edit Page 8 icon (top-right) to return to Page Designer.
20. Click Save and Run Page.

    The faceted search page is useful for quickly sorting through the contents of a table. Explore the page by trying out some of the features:

    • Select and deselect facets on the left to narrow the scope of the display.
    • Select multiple facets in the same category.
    • Click Clear to deselect all facets in a category.

Description of the illustration runtime_faceted_search_final.png

The faceted search page Task Overview is complete.

Congratulations! Your application is complete.