5 Developing the Projects Page
Use the Create Page Wizard and Page Designer to add a sophisticated form page for the Projects report.
About This Lesson
In this lesson, you are introduced to the two primary means of development: Page Designer and the Application Runtime ("runtime" for short).
In Page Designer, use the Rendering tab and Layout tab to add new regions to the Projects page. Then, use the Property Editor to edit a wide array of attributes for region and page components, including SQL statements and appearance options.
In the runtime, you use the Runtime Developer toolbar to make changes on the page immediately and to quickly shift back to Page Designer.
5.1 Navigating to Page Designer from the Application Runtime
At the end of the previous lesson, you ran the application from the Application home page in App Builder and opened the Home page of the application.
Running an application from App Builder also displays the Runtime Developer toolbar at the bottom of the window.
You can use the Runtime Developer toolbar to quickly edit the page (and some aspects of the entire application). This toolbar only displays for users with developer or administrator privileges.
To view the Home page in Page Designer using the Runtime Developer toolbar:
Tip:
Page Designer is the primary asset for Application Express developers. It's a powerful IDE (integrated development environment) with a robust array of tools for building, maintaining, and enhancing applications. Up to this point, you have mainly experienced the Create Application Wizard and SQL Workshop.
You rely primarily on Page Designer for the rest of this tutorial.
You can always learn more about Page Designer with the official Oracle Application Express App Builder User’s Guide.
5.2 Creating a Form Page Using the Create Page Wizard
Use the Create Page Wizard to add new pages to an app. It has a more robust interface for adding new pages than the Create Application Wizard.
Add a form to the Projects report to give your users a way to edit the information themselves.
To open the Create Page Wizard in Page Designer:
Page Designer reloads displaying Page 4: Maintain Project.
5.3 Linking Project Cards to Maintain Project Form
You can now update the SQL queries on the Projects report to call the Maintain Project form.
Reconfigure the cards on the Projects page to display Maintain Project form when clicked.
To navigate to the Projects page (page 3) in Page Designer:
To update the SQL of the Projects region:
To quickly return to Maintain Project form in Page Designer:
5.4 Updating the Maintain Project Form in Page Designer
Use Page Designer to make the following updates to the Maintain Project form (page 4) to improve usability and security:
- Hide a column by changing the type to hidden
- Move an item within an existing region
- Change an item to a select list
- Change multiple items to text fields
- Create a sub region to organize items into a read-only, expandable group
End users do not need to see the ID column in the form. Change P4_ID to a hidden column to keep it from rendering in the app at all.
To hide a column in Page Designer:
To move an item in a region:
To convert an item to a select list:
To change multiple items simultaneously:
To create a collapsible sub region:
Rather than using drag and drop, you can use Property Editor to move multiple items into the Audit Details sub region, convert them to Display Only, and switch their appearance template all at once.
To move items into a sub region with the Property Editor:
The Maintain Project form is a modal page. You cannot run a modal page directly from Page Designer the way you can other pages. You must navigate to the associated non-modal page in the runtime (in this case, page 3 - Projects), then open the modal page from there.
To run the modal Maintain Project page:
5.5 Creating a Dynamic Action
Add a Dynamic Action to the P4_STATUS_ID item select lists so that when the user changes the project Status to "Completed," the completion date displays.
Dynamic Actions within 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.
To create a Dynamic Action:
For some types of Dynamic Actions (such as Show, Enable, and Expand Tree), you must also create the corresponding opposite action. With an opposite action, if the True When Condition affects elements one way, then the False When Condition affects elements the opposite way.
To add an opposite action:
5.6 Adding Validations to Completed Date
Page validations ensure the data entered by end users is correct. If a validation fails, then an error message is raised, and the values are not saved to the database.
Add two validations to the Completed Date item so that:
- When a user changes the status to Completed, they must also add the date.
- A user cannot enter a date in the future.
To create a new validation:
To copy a validation:
The form is complete.
Try the following tasks to see how the application behaves:
- Change the Status and see how the Completed Date displays or vanishes.
- Find an In-Progress project, change the status to Completed but leave the Completion Date empty, and click Apply Changes. (An error message should display.)
- Enter a Completion Date in the future and click Apply Changes. (An error message should be displayed.)
When finished, click Application ##### on the Developer Toolbar to return to the Application home page.