Learn How to Dynamically Change the Color of a Select List in Oracle APEX

1. Oracle APEX tutorial
2. authorized users

Are you an Oracle APEX user looking to add a touch of customization to your application? In this article, we will guide you through a step-by-step tutorial on how to allow authorized users to define a list of colors that can be used to dynamically change the color of a select list. So, let’s dive in and explore this exciting feature!

Why Dynamic Color Change?

Before we jump into the technical details, let’s take a moment to understand the benefits of dynamic color change in your application. By allowing users to choose from a predefined list of colors, you can enhance the visual appeal and user experience of your Oracle APEX application. This customization option enables your users to personalize their experience and make the application more visually appealing. Now that we’ve established the importance of dynamic color change, let’s move on to the implementation.

Step-by-Step Tutorial

1. Setting Up the Color List

First, we need to define the list of colors that users can choose from. In your Oracle APEX application, navigate to the “Shared Components” section and select “Lists.” Here, create a new list named “Color List” and add the desired colors as list entries. Save your changes.

2. Creating the Dynamic Action

Next, we need to create a dynamic action that triggers the color change when a user selects a color from the list. In the page designer, locate the select list item that you want to modify dynamically. Right-click on the item and select “Create Dynamic Action.”

3. Defining the Dynamic Action

In the dynamic action wizard, provide a suitable name for the action, such as “Change Color.” Select the event that triggers the action, which should be “Change.” Then, choose the action to perform, which is “Execute JavaScript Code.”

4. Writing the JavaScript Code

In the JavaScript code section, write the code that will change the color of the select list based on the user’s selection. Use the following code as a starting point:

var colorList = apex.item("P1_COLOR_LIST").getValue();
$("#P1_SELECT_LIST").css("background-color", colorList);

Make sure to replace “P1_COLOR_LIST” with the appropriate item name for your color list and “P1_SELECT_LIST” with the select list item name.

5. Testing the Dynamic Color Change

Save your changes and run the application. Select a color from the color list and observe the dynamic color change in action! The select list’s background color should update instantly based on the user’s selection.


Adding a dynamic color change feature to your Oracle APEX application can greatly enhance the user experience and allow for a more personalized touch. By following the step-by-step tutorial outlined in this article, you can empower your authorized users to define a list of colors and dynamically change the color of select lists. So why wait? Start implementing this exciting feature in your Oracle APEX application today!

Remember, by providing users with customization options, you can make your application stand out and deliver a more engaging experience. Happy coding!


Source :

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!