Oracle Application Express Tutorial

Week 5 Oracle Application Express Creating a Database-Centric Web Application Using Oracle Application Express (APEX) Purpose In this lab you will create an application. You will start with a text file that will be converted to tables in an Oracle database. From these tables, you will create an application. Topics This lab covers the following topics: Creating a Table from a Spreadsheet/Text file Normalize the database: Create a Related Table Modifying a Table Creating an Application Editing Application Objects Applying a New Theme Examine the data set 1. 2. Open the text file tasks.txt as an Excel spreadsheet. Note that the first row consists of column headings. There are 16 rows of data Close the file.

Creating a Table from a Text File To load the data for this tutorial from a text file, perform the following steps: 1. Login to the hosted Oracle site 2. To create the table based on a text file, click the down arrow next to Utilities > Data Load/Unload. 3. Click the down arrow next to Load, then click Text File . 4. Ensure that the import target (Import To) is set to New table. For Import From, select the Upload file (comma separated or tab delimited) option. Click Next >. 5. Click Browse. 6. Locate the tasks.txt file in the SQL Scripts directory and click Open. Because the data in the text file is tab delimited, enter \t in the Separator field. The first row DOES contain the column names, so make sure that box is checked. Click Next >. 7. The Table Information page displays the columns in the table and their formats, as well as the data to be inserted into the table after the table is created. Verify that the fields have been imported correctly: the start_date and end_date fields have been accepted as date types and all others are character (VARCHAR2). There should be 16 rows of imported data. For Table Name, enter Tasks, and click Next >.

1 of 5

Oracle Application Express Tutorial

8. Using the Primary Key page, you can add a system-generated primary key to your table and populate that column with a new sequence. Oracle uses sequences rather than Autonumber fields. This step saves a lot of manual coding because it automatically creates a primary key with the generic name of ID. It also creates a new object, TASKS_SEQ and a primary key constraint named TASKS_PK. Review the default values, and click Load Data. 9. After the table is created and the data is loaded, you are left on the Files page. You can see the file that you just uploaded with 16 rows successfully uploaded. 10. To view your new table, click Home and SQLWorkshop>Object Browser > Tables. 11. To view the table definition, click the Tasks table under the list of tables in the left navigator. 12. This page displays only the table definition. To view all the data in the table, click the Data tab. 13. The rows of data are displayed. Normalize the database: Create a related table When you examine the tables data you see that the description of the project is repeated multiple times in the PROJECT column. This indicates that this table has not been normalized. The PROJECT column should be placed in a separate table along with a project ID. The Create Lookup Table feature in APEX easily performs this task for you. To create a separate table on the Project column, perform the following steps: 1. Return to the Table Definition by clicking on the Table tab. 2. Click Create Lookup Table button. 3. To specify the column on which the master table is to be created, select PROJECT - varchar2, and click Next > . 4. Enter the following values, and click Next >. New Table Name: PROJECTS New Sequence: PROJECT_SEQ Click Finish. To see the definition of the new PROJECTS table, click PROJECTS in the Parent Table column. Note that the new PROJECTS table contains a numeric primary key along with the PROJECT column. Look again at the TASKS table and note that the PROJECT column is not in this table anymore it moved to the PROJECTS table. The PROJECT column in the TASKS table has been replaced by the PROJECT_ID.

5. 6. 7. 8.

Modifying a Table Now that you have the two main tables, enhance the PROJECTS table by adding a PROJECT LEAD column to it. To do this, perform the following steps: 1. Make sure the PROJECTS table is selected. You are going to add a column to the table. Click Add Column.

2 of 5

Oracle Application Express Tutorial

2. Enter the following values, and click Next >. Add Column: PROJECT_LEAD Type: VARCHAR2 Length: 30 Click Finish. You see the modified table definition with the new PROJECT_LEAD column added. Click the Data tab to view the data. You see all the projects that were referenced in the TASKS table. You can change data from here. Click the Edit icon ( ) on the left of Project Id for Public Website. For Project Lead, enter your name. Click Apply Changes. You see the data that you added. To begin creating the application, click Home on the breadcrumb menu.

3. 4. 5. 6. 7.

Creating an Application To create the application, perform the following steps: 1. From the APEX home page, click the down arrow next to Application Builder > Create Application > Create Application. 2. For Name, enter Project Tasks Application. Keep the default value of From Scratch for the Creation Application, and click Next >. 3. Select the Report Page Type and click the up arrow by Table_Name to select the table you want the report to be based on. 4. Click PROJECTS. 5. Select Classic for the Implementation 6. Click Add Page. 7. Select Report and Form Page Type and select PROJECTS(1) for Subordinate to Page. Then click the up arrow by Table_Name to select the table. 8. Click TASKS. 9. Select Classic for the Implementation 10. Click Add Page. Your application should now look like this:

11. Click on the link Tasks for Page 2. 12. You need to link the PROJECTS Master Page with this page. The Projects table and the Tasks table are linked by the PROJECT_ID field. In the Parent Page to This Page Column Associations section, select PROJECT for the Link Column, select PROJECT_ID for the parent report column - column 1, select PROJECT_ID for the link to this report column - report column. Deselect the Use theme-specific edit button check box. The variable #PROJECT# should appear in the Link Text field. Click Apply Changes. 13. Select the PROJECTS link for Page 1.

3 of 5

Oracle Application Express Tutorial

14. For the PROJECT_ID column, select No for the Show parameter and click Apply Changes. 15. Click Next >. 15. Accept the default to create One Level of Tabs. Click Next >. 16. You do not want to share these components with other applications. Click Next >. 17. Select No Authentication. Click Next >. 18. Accept the default Theme 1. Click Next >. 19. Review your choices. Click Create. 20. The Application and its associated pages were created. To run the application, click the Run Application icon. 21. 22. The List of Projects is displayed. Notice that the PROJECT_ID column is not displayed and the link is shown on the PROJECT column. This is what you accomplished in step 12. Click the Public Website Project. Turn in a printout of this page. 23. The Projects list of Tasks is displayed. You can edit the task by clicking on the edit icon right in front of the task you want to edit. 24. The Task Details are displayed. Editing Application Objects Although the Master-Detail form is fully functional, the looks can be improved. Perform the following tasks in this topic: Create a List of Values Change the Date Format Change the Status field to use the LOV To do this, follow the following steps: 1. Click the Edit icon in front of the task Check software licenses. Page 3 appears. This is the page you will edit 2. Click the Edit Page 3 Link. 3. Before you edit the report, you need to create the Named LOV that is referenced by the Status field. By creating it as a Named LOV, it can be used by other pages in the application too. Under the List of Values section on the right, click the Create button ( ). 4. For Create List of Values, keep the default value From Scratch, and click Next >. 5. For Name, enter STATUSES. For Type, keep the default Static. Then click Next >. 6. For Display Value and Return Value, enter the following: Display Value open on-hold closed Return Value open on-hold closed

Click Create List of Values. This LOV will ensure that all projects are open, closed are on-hold. 7. To return to the page, click the Run Page 3 icon at the top right, under the Administration tab. 8. Click the Show Edit Links link. The Show Edit Links allows you to jump back and forth

4 of 5

Oracle Application Express Tutorial

9. 10. 11. 12. 13. 14. 15. 16. 17.

between a displayed page and edit mode. This is very handy for editing, but be sure to Apply Changes. Also note that you wont see the changes in the displayed page unless you Refresh the page in your browser! Click the Edit icon ( ) to the right of Start Date. Under the Page Item section, select Date Picker (DD-MON-YYYY) from the Display As dropdown list. Click Apply Changes and then Cancel to close this edit page. Click the Edit icon ( ) to the right of End Date. Under the Page Item section, select Date Picker (DD-MON-YYYY) from the Display As dropdown list. Click Apply Changes and then Cancel to close this edit page. Click the Edit icon ( ) to the right of Status. Under the Page Item section, select Select List from the Display As drop-down list. From the links at the top of the page, click the LOV link. Under the List of Values section, select STATUSES from the Named LOV drop-down list. Click the Top icon ( ). Click Apply Changes and then Cancel to close this edit page. Click the Refresh button in your browser and notice the changes that occur. The Start Date and End Date format changes and the Status field use the List of Values. Click Hide Edit Links. Turn in a printout of this page

Applying a New Theme When you created the application, you selected the red theme. You can change the look and feel of the application by changing the theme. You first create a new theme by selecting one from the APEX Repository. To apply a new theme, perform the following steps: 1. 2. 3. 4. 5. 6. 7. 8. 9. Click the Application # link from the Developer Links at the bottom of the page. Click the down arrow next to Shared Components > User Interface > Themes. To create a new theme, click Create. Accept the default Repository and click Next >. From the Theme options, select the Theme 10 option. Click Next >. Click Create. To switch to the Sand theme, click Switch Theme. For Switch to Theme, make sure 10. Sand is selected. Click Next >. Notice that the page displays the compatibility between the two themes. This utility checks whether there is a template in the new theme to replace each of the templates in the current theme. The check marks in the Status column indicate that the templates are compatible. Click Next >. 10. To confirm the theme switch, click Switch Theme. 11. To see the new theme, click the Run Page icon ( ) at the top right of the page. 12. Notice that the entire appearance of your application has changed. The color scheme has changed. Click Edit Application from the Developer Links at the bottom. Turn-in Checklist: List of Projects page from Creating an Application Step 21 Tasks page with changes Edit Application Objects Step 17

5 of 5