Oracle APEX: Dynamic highlights for required fields

In this article, I’ll show you three approaches to dynamically changing the background color of the fields, as you see below:

Our goal is simple:

1. Highlight empty fields with the chosen background color
2. Remove the highlight when the field is filled

Important notices

• This solution works well with items: Select list, Text field and Popup LOV – it may work with others after minor tweaks, but I haven’t tested it
• Items must have this attribute set: Appearance → Template → Required-Floating (it’s important if you want page-wide or app-wide implementation)

• Ensure you add the following CSS class to your page:

.empty-field {
    background-color: #FDE6E6 !important; 
    /* Light red background for empty fields */
}

Solution 1: Individual Dynamic Actions for full control

In this approach, you define Dynamic Actions for specific items. Each action checks if the field is empty and applies or removes the .empty-field class accordingly.

1. Creating a Dynamic Action:

Create a Dynamic Action for Each Field – triggered On Change.

2. Server-Side Condition:

Use the function apex.item( “P1_ITEM” ).isEmpty() in the condition to determine if the field is empty.

apex.item('P3_PROJECT_LEAD').isEmpty()

3. Action Logic:

If empty, add the class .empty-field.

If filled, remove the class.

After you configure everything, you should get a result visible on the screenshot below.

Solution 2: Generalized JavaScript function for all required items on one page

If you prefer a more scalable approach, define a single Dynamic Action that calls a JavaScript function to handle all required fields on the page.

1. JavaScript Function: f_set_required_items_background

This function iterates through all required items and applies/removes the .empty-field CSS class as needed. Define it at the page level:

// Function to set background color for required items based on their value
function f_set_required_items_background() {
    // For each element on the page with classes 't-Form-fieldContainer' and 'is-required'
    document.querySelectorAll('.t-Form-fieldContainer.is-required').forEach(function(container) {
        // Look for the first visible input or select inside the div with the class 't-Form-itemWrapper'
        const inputWrapper = container.querySelector('.t-Form-itemWrapper input:not([type="hidden"]), .t-Form-itemWrapper select');
        // If an input or select is found
        if (inputWrapper) {
            const itemName = inputWrapper.id; // Get the item name from the input's or select's id (e.g., P3_PROJECT_LEAD)
            
            const isEmpty = apex.item(itemName).isEmpty();

            // If the item value is empty (true), add the red background class
            if (isEmpty) {
                inputWrapper.classList.add('empty-field');
            } else {
                // If the item value is not empty (false), remove the red background class (if it exists)
                inputWrapper.classList.remove('empty-field');
            }
        }
    });
}

2. Triggering the function

Define a Dynamic Action:

• Event: Change
• Selection Type: jQuery Selector

.t-Form-fieldContainer.is-required .t-Form-itemWrapper :input

• Action: Execute JavaScript Code

f_set_required_items_background();

Solution 3: Global implementation on page 0

Finally, you can also apply this solution globally for your application by implementing on page 0.

1. Create CSS and JS files in Static Application Files:

.empty-field {
    background-color: #FDE6E6 !important; /* Light red background for empty fields */
}

// Function to set background color for required items based on their value
function f_set_required_items_background() {
    // For each element on the page with classes 't-Form-fieldContainer' and 'is-required'
    document.querySelectorAll('.t-Form-fieldContainer.is-required').forEach(function(container) {
        // Look for the first visible input or select inside the div with the class 't-Form-itemWrapper'
        const inputWrapper = container.querySelector('.t-Form-itemWrapper input:not([type="hidden"]), .t-Form-itemWrapper select');
        // If an input or select is found
        if (inputWrapper) {
            const itemName = inputWrapper.id; // Get the item name from the input's or select's id (e.g., P3_PROJECT_LEAD)
            const isEmpty = apex.item(itemName).isEmpty();

            // If the item value is empty (true), add the red background class
            if (isEmpty) {
                inputWrapper.classList.add('empty-field');
            } else {
                // If the item value is not empty (false), remove the red background class (if it exists)
                inputWrapper.classList.remove('empty-field');
            }
        }
    });
}

2. Point to those files in the User Interface attributes of your application

3. Implement Dynamic Action on page 0

.t-Form-fieldContainer.is-required .t-Form-itemWrapper :input

f_set_required_items_background();

Now, it works for all pages in your application. 🙂

Conclusion

And that’s about it. All three approaches work effectively depending on your needs:

• Use Solution 1 for granular control over individual fields
• Use Solution 2 for quick, page-wide implementation
• Use Solution 3 for app-wide implementaion

Please note that I’m not some JavaScript expert. If you know a better (simpler) solution, please drop me a line at the email address below. Also, many thanks to Stefan Dobre for reminding me to use the official isEmpty function instead of creating a new one.

Happy coding! 🚀 And, if you’re interested in Oracle APEX content, check out some of the other articles on our blog:

1. APEX 24.1 Working Copies – An in-depth look at one of the platform’s coolest features 
2. Oracle Forms migration: 2024 is high time to migrate your software to APEX
3. APEX User Interface Defaults: A deep dive into Table Dictionary and Attribute Dictionary
4. Globalization in APEX: A deep dive into Multi-Language and Locales
5. Sorting in APEX: A deep dive into Classic Reports and Card Regions 

Also, if you’d like to receive practical tutorials on Oracle APEX in your mailbox, make sure to subscribe to Oracle APEX Monthly – a curated newsletter for people like you and me.