Create an APEX Application

Introduction

In this lab, you learn to create an APEX application by importing data from a spreadsheet. APEX can declaratively build an app from a table that is created using a spreadsheet. Later, you learn to modify the pages and the theme of the application.

Note: The screenshots in this workshop are taken using Dark Mode in APEX 24.2

Estimated Time: 5 minutes

Watch the video below for a quick walk-through of the lab.

Objectives

In this lab, you will:

• Create a new APEX application
• Configure a Cards region
• Customize the application theme using Theme Roller

Prerequisites

• An Oracle APEX workspace

Task 1: Load the Highschool Data

1. From your APEX workspace home page, click App Builder.

   

2. Click Create a New App.

   

3. Click Create App From a File.

   

   When creating an application from a file, APEX allows you to upload CSV, XLSX, XML, or JSON files and then build apps based on their data. Alternatively, you can also copy and paste CSV data or load sample data.

4. Within the Load Data wizard, click the Choose File option or drag and drop the nyc_high_schools.xlsx file on to the dialog window.

   

5. Review the parsed data. Set Table Name to HIGHSCHOOLS and click Load Data. Note: You can configure what columns to load from the spreadsheet by clicking the Configure button.

   

   After clicking Load Data, you will see a spinner until the wizard finishes loading the data. Continue to Task 2 at this point.

Task 2: Create an Application

The Data Load wizard has created a new table called HIGHSCHOOLS and populated the table with the records from the sample data. Now, you can create an app based on this new table.

1. In the Load Data dialog, verify that 427 rows have been loaded into the HIGHSCHOOLS table, then click Create Application.

   

2. On the Create Application page, click the application icon.

3. In the Choose Application Icon wizard, upload your own icon by selecting or dragging and dropping an image. Download a sample icon from here.

4. Once you select an image, the wizard allows you to crop or resize the image. Click Save Icon.

5. In the Create Application page, review the pages listed by default.

   Click the Edit button for Highschools Search and update the following:

   • Page Name: Search and Apply
   • For Page Type, choose Cards toggle button.

   

6. For the Cards properties, select the following:

   • Title Column: SCHOOL_NAME
   • Body Column: NEIGHBORHOOD
   • Expand Advanced section and check the Set as Home Page box

   Click Save Changes.

7. Next, we delete the pages that we no longer need. Click Edit next to the Home page.

8. Click Delete. In the dialog 'Would you like to perform this delete action?', select OK.

   

9. Repeat Steps 7 and 8 to delete the Highschools Report page.

10. Repeat Steps 7 and 8 to delete the Dashboard page.

11. In the Create Application wizard, under Features, check the following checkboxes:

    • Install Progressive Web App
    • Push Notifications

    Click Create Application.

    

    When the wizard finishes creating the application, you will be redirected to the application's home page in the App Builder.

Task 3: Configure the Cards Region

In this task, we configure the Cards region to display the information that we need.

1. Navigate to Search and Apply page.

2. In the Rendering Tree, under Body, select Search Results region.

   In the Property Editor, enter/select the following:

   • Under Source:

     • Type: SQL Query
     • SQL Query: Replace the SQL query with the following

       Copyselect ID,
       BOROUGH,
       NEIGHBORHOOD ||', '|| BOROUGH as LOCATION,
       SCHOOL_NAME,
       NEIGHBORHOOD,
       INTEREST,
       METHOD,
       ATTENDANCE_RATE,
       GRADUATION_RATE,
       SCHOOL_SPORTS,
       TOTAL_STUDENTS,
       to_char(TOTAL_STUDENTS,'999G999G999G999G999') as total_students_disp,
       SAFE
       from HIGHSCHOOLS

     

     

   • Advanced > Static ID: S_SEARCH_RESULTS

3. Switch to the Attributes tab and select the following:

   • Title > Column: SCHOOL_NAME

   • Subtitle > Column: LOCATION

   • Body:

     • Advanced Formatting: Toggle the Button to turn it ON.
     • HTML Expression:

       Copy<div class="a-CardView-mainContent">
           <strong>&INTEREST.</strong><br />
           <small>&TOTAL_STUDENTS_DISP. Students · &ATTENDANCE_RATE.% Attendance · &GRADUATION_RATE.% Grad</small>
       </div>

     

4. Click Save and Run page.

   

   

Task 4: Improve the UI

1. Click Edit Page 1 from the Developer Toolbar.

2. In the Rendering Tree, select Search.

   In the Property Editor, switch to the Attributes tab and enter the following:

   • Total Row Count Label: Schools:

   

3. Under Breadcrumb Bar, select Highschools. In the Property Editor, enter the following:

   • Name: New York City
   • Title: New York City

   

4. Under Body > Button Bar, right-click RESET and select Delete.

   

5. Locate P1_ORDER_BY page item and drag and drop it under Button Bar.

6. In the Property Editor, enter/select the following:

   • Layout > Slot: Next

   • Under Appearance:

     • Template: Hidden
     • Icon: fa-sort-amount-desc

   • Advanced > CSS Classes: no-item-ui

   

   • List of Values > Static Values: Enter the following and click OK.

     Table 1: List of Values

     Display Value	Return Value
     Total Students	TOTAL_STUDENTS
     Attendance Rate	ATTENDANCE_RATE

   

7. In the Rendering Tree, select Search Results region.

   In the Property Editor, under Order By, for Type, select Item and for Item, enter the following and then click OK.

   Table 2: Order By Clauses

   Clause	Key	Display
   TOTAL_STUDENTS desc	TOTAL_STUDENTS	Total Students
   SCHOOL_NAME	SCHOOL_NAME	School Name
   NEIGHBORHOOD	NEIGHBORHOOD	Neighborhood
   ATTENDANCE_RATE desc	ATTENDANCE_RATE	Attendance Rate

   

   

8. Click Save and Run page.

Task 5: Customize the Application Theme

1. From the Developer Toolbar, click Customize and select Theme Roller.

   

2. In the Theme Roller dialog, enter/select the following:

   • Select Theme: Redwood Light
   • Under Redwood Options:
     • Pillar: Rose
   • Under Appearance:
     • Header: Dark
     • Navigation: Dark
     • Body Header: Dark
   • Custom CSS:

     Copy.a-FS-bodyInner .apex-item-checkbox {
         max-height: 320px;
         overflow: auto;
     }
     
     .no-item-ui {
         --a-field-input-border-width: 0px;
         --a-field-input-background-color: transparent;
     }

   

3. Click Save As. In the dialog, for Style Name, enter Redwood Light Custom. Finally, click Save.

   

   You have successfully customized the application theme.

Summary

You now know how to create an Oracle APEX application from a spreadsheet. You also learnt to customize the pages and the theme of the application.

You may now proceed to the next lab.

Acknowledgments

• Authors - Toufiq Mohammed, Senior Product Manager; Apoorva Srinivas, Senior Product Manager
• Contributing Author - Pankaj Goyal, Member Technical Staff
• Last Updated By/Date - Apoorva Srinivas, Senior Product Manager, February 2025