Search This Blog

Showing posts with label Change a dropdown LOV into a radio group. Show all posts
Showing posts with label Change a dropdown LOV into a radio group. Show all posts

Tuesday, June 24, 2025

How Do I Change a dropdown LOV into a radio group

 Changing a Dropdown List of Values (LOV) into a Radio Group in Oracle APEX

In Oracle APEX, a Select List (Dropdown LOV) allows users to choose from a predefined set of options. However, in some cases, a Radio Group is a better option when you want to display all choices upfront, making selection quicker without the need to open a dropdown.

This tutorial explains how to change an existing dropdown list into a Radio Group and the different customization options available.


Steps to Convert a Dropdown LOV into a Radio Group

1. Identify the Existing Dropdown List

If you already have a Select List item, locate it in your page's Rendering tree. If not, create a new Select List item:

  • Open the APEX Page Designer.

  • Click CreateItemSelect List.

  • Assign a meaningful name like P1_CATEGORY.

  • Set the List of Values (LOV) to either Static Values or a SQL Query.

Example of a Static LOV:

Electronics | 1

Furniture | 2

Clothing | 3

Example of a SQL Query LOV:

SELECT category_name, category_id FROM product_categories ORDER BY category_name;

This query retrieves category names and their corresponding IDs from the database.

2. Change the Item Type to a Radio Group

Once the Select List is created:

  • Click on P1_CATEGORY in the Rendering panel.

  • Under Settings, locate the Type property.

  • Change the type from Select List to Radio Group.

  • Ensure the List of Values remains the same (static or SQL-based).

3. Customize the Layout of the Radio Group

Oracle APEX allows you to configure the Radio Group display. Some useful properties include:

  • Number of Columns: Defines how many radio options appear per row.

  • Display Null Value: Enables an extra option like "None" or "Select One".

  • Null Display Value: Specifies what text appears for the null option.

For example, setting Number of Columns = 3 will display the options in a single row instead of a vertical list.

4. Apply Conditional Formatting with Dynamic Actions (Optional)

If you need additional behavior when selecting a radio option:

  • Create a Dynamic Action on P1_CATEGORY.

  • Set the Event to Change.

  • Add an Action such as Show / Hide or Set Value.

  • Define the target elements that should respond to the selection.

Example: If selecting Electronics, a hidden field P1_BRAND appears, while other options hide it.


Using JavaScript to Enhance Radio Groups

In some cases, you may want to dynamically modify radio buttons using JavaScript.

Dynamically Change the Selection with JavaScript

$s("P1_CATEGORY", "2"); // Automatically selects the second option

This script pre-selects Furniture if it's the second option in the LOV.

Change Styles Based on Selection

$("#P1_CATEGORY input").change(function() {

    if ($(this).val() == "1") {

        $("#P1_MESSAGE").text("You selected Electronics").css("color", "blue");

    } else {

        $("#P1_MESSAGE").text("");

    }

});

This script updates a message based on the selected option.


Best Use Cases for Radio Groups Instead of Dropdown Lists

  • Small Lists (3–5 Items): A dropdown is better for long lists, but a radio group is more efficient for fewer choices.

  • User Experience Improvement: If users frequently switch between options, a radio group reduces clicks.

  • Clearer Selection Visibility: Unlike a dropdown, all choices are visible without clicking.

  • Conditional Form Behavior: Useful when selecting an option triggers another field to appear.


Changing a Dropdown LOV into a Radio Group in Oracle APEX improves usability for short lists of options. This is easily done by changing the Item Type and adjusting its layout. Additional enhancements using Dynamic Actions and JavaScript allow for even more interactive behavior.


EXAMPLE:

You can take a short list (like our Yes/No list) and change it from a dropdown List to a radio group as follows

Change  the Type from Select List to Radio Group

A screenshot of a computer

Description automatically generated