Develop the Projects report and form pages to support your users’ project management tasks.
About This Lesson
You used the Create Application Wizard to generate a report and form for the DEMO_PROJECTS
table. This generated some default output similar to the raw Home and Team Members pages in the previous lessons, except the Projects report uses an interactive grid and the Projects form is a separate page (not a modal dialog).
The Maintain Project form is a master detail form (or "master detail" for short). A master detail reflects a one-to-many relationship between two tables in a database. Typically, a master detail form displays a master row and multiple detail rows within a single HTML form. With this form, users can insert, update, and delete values from two tables or views.
In this lesson, you learn how to create a shared list of values (LOV) in Shared Components and then add it to the report in Page Designer. You also tweak the report to look more like the Team Members report for visual consistency.
For the form, you learn how to change the page directly in the runtime by using Live Template Options with the Developer Toolbar. Then in Page Designer you learn how to create a static list of values, a dynamic action, and a validation.
Finally, you learn how to copy sub regions between pages in Page Designer.
Starting from here:
Basic Projects App Export - Topic 5.sqlIf 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.
Begin by updating the Projects report page by updating the SQL query of DEMO_PROJECTS
and reconfiguring the default displayed columns in the Primary report (similar to what you did for the Team Members pages).
Unlike the Team Members page, the Projects report page uses an interactive grid. An interactive grid is similar to an interactive report, but features more functionality to support more sophisticated interaction with data sets.
To update the SQL query and column display of an interactive grid:
To remove extraneous columns in the runtime:
Two columns are not sortable by default (Name and Description), so you should enable this function.
To enable sorting for a column in an interactive grid:
To find sort attributes in the Property Editor, enter a search in Filter Properties:
If you look at the runtime, you can see that the Project Lead column of the Projects report currently displays numeric identifiers instead of names of users. This is technically accurate, but not user-friendly.
The Project Lead ID's are pulled from the DEMO_PROJECTS
table. However, the DEMO_TEAM_MEMBERS
table contains the names associated with each product lead ID. To convert the numeric IDs into the names of the team members, you must create a connection between the two tables.
To connect the two tables to the Project Lead column, create a shared list of values (LOV) and add it to the Projects page interactive grid.
To access the Shared Components menu:
To create a shared LOV:
You have created the LOV. Next, add it to the PROJECT_LEAD column of the Projects interactive grid.
To add an LOV to a column in Page Designer:
The Create Application Wizard generates buttons on pages for you automatically, but you should always evaluate and reconfigure them as necessary to best suit your users.
Move the Create button to the Breadcrumb region (similar to what you did on the Team Members report page).
Additionally, change the appearance template of the interactive grid to the one for interactive reports for a consistent look across your app.
To move a button in Page Designer:
To change the appearance template of the Projects region:
In the runtime, you should update the interactive grid that make it easier to read.
Prioritize the name of the project by freezing it in place on the page. Then move the Description column to the end of the grid and apply a default sort rule to all columns with the Data submenu in the Actions menu.
To freeze a column in an interactive grid:
To change the order of columns:
Tip:
You can also drag and drop columns into place to reorder them by clicking and holding the Drag Handle that appears when you hover the mouse cursor over a column heading.To sort the records by their creation date:
Consistency is important for your application’s usability. Update the properties of the Project form modal dialog to match the look and function of the Maintain Team Member modal dialog. Some of this should seem familiar because you are applying the same set of settings from earlier in the tutorial to a new page.
Use the Live Template Options on the Developer Toolbar to modify the appearance of the form in the runtime, then switch to Page Designer for more elaborate changes (such as moving buttons and changing the condition of fields).
To navigate to the Maintain Project page:
To update the page using Live Template Options:
For the Projects report, you moved a Create button to the top-right of the page in the Breadcrumb region. Note that the same space is empty on the Maintain Project form. The default placement of a Create button in Page Designer is in the top-right corner of the page, but you can place any button in the placeholders (especially since nothing is there now).
You also need to change some fields to required and add the TEAM MEMBERS LOV to the Project Lead field (similar to the changes you made to the Maintain Team Member form).
Begin with the buttons.
To move the navigation buttons for the project entries to the Create position:
To make the Name field required:
To add a LOV to the Project Lead field:
Currently, your users must manually type one of the words "Assigned," "In-Progress," or "Completed" into the Status field in order to update a project. This process is slow and prone to human error. You should convert this field to a selectable list of options.
Earlier you created a dynamic list (TEAM MEMBERS) that queries two tables to replace numeric identifiers in the Project Lead fields with names. You can use the simpler static list element for the Project status list because the Status information can be contained in a single table.
Create and apply a list of possible options to the Status field in the Maintain Project form.
To define a list with static values:
A good business practice is to require users to input a date for when a project is updated to "Completed."
To make the Completed Date required when a project status is changed to Completed:
Often when an item is required, you update Appearance: Template to Required and the Validation: Value Required to Yes in the Property Editor. However, do not change the Value Required attribute because the item is only mandatory when the status is Completed, not for the other statuses.
Next, add a custom validation later to accommodate this business rule.
Dynamic Actions within Oracle Application Express are used to declaratively define client-side behaviors without writing JavaScript or AJAX. Instead, the Application Express engine implements the necessary code based on your declaration.
Add a Dynamic Action to the P5_STATUS item so that when it is set to Completed it triggers the Completed Date field to display.
To create a Dynamic Action:
For Dynamic Action types such as Show, Enable, and Expand Tree, it is important to also include the corresponding opposite action. In that way the affected elements are set one way if the When Condition evaluates to True and the opposite if the When Condition evaluates to False. Here, the P5_COMPLETED_DATE item is shown when P5_STATUS equals Completed, and is hidden when any other status is selected. To add an opposite action:
Add a validation for the Completed Date so that when a user changes the status to Completed, they must also add the Completed Date.
To add a validation for the Completed Date:
To add a Validation for Completed Date is not Forward Dated:
In an earlier topic you created a sub region called Audit Details for the Maintain Team Member form. Since the four items included in that region are the same as those on the Maintain Project page and are associated with the exact same database columns, you can copy them to the Maintain Project form and save some time. Copying the region also copies the previously defined template and template options.
First delete the four existing audit detail columns on the Maintain Project form, then copy the Audit Details sub region from the Maintain Team Member form to the Maintain Project form and modify it to fully suit its destination.
Note:
If you do not delete the audit columns, the item names in the copied Audit Details region are renamed with a unique name to ensure all page items have unique names (for example, when P5_CREATED is copied to its destination, it is renamed to P5_CREATED_1). While this automatic renaming does not break the page processing, Oracle does not recommend this approach.To delete the four existing audit items on Maintain Project form:
To copy the Audit Details sub region from Page 3 to Page 5:
To update the Audit Details sub region for the Maintain Project form:
You have made substantial revisions to the Projects report and Maintain Project form. In the next lessons, you add more regions to the form so that users can view more details of the project and further control their project management.
Proceed to the next lesson.