How do I Hide & display controls via variables

Introduction
Hiding and displaying controls dynamically based on variable values is a fundamental technique in Oracle APEX for creating interactive and user-friendly applications. By controlling the visibility of page items, regions, or buttons through variables, you can tailor the user interface to different scenarios, roles, or user inputs. This approach improves usability by showing only relevant information and reducing clutter, making applications more efficient and intuitive.

 In Oracle APEX, hiding and displaying controls (such as page items, buttons, or regions) based on variable values is commonly done using page item values or application-level variables combined with conditions and dynamic actions. This approach lets you create interactive pages where UI elements appear or disappear according to user input, application state, or other logic.

Here is a detailed explanation of how to hide and display controls via variables in Oracle APEX:

Step 1: Identify the Controls and Variables

Decide which controls (page items, buttons, or regions) you want to show or hide. Also, determine the variables that will control their visibility. Variables typically are page items (e.g., P1_SHOW_DETAILS) or application items.

Step 2: Use Server-side Conditions

For controls like regions or items, Oracle APEX provides built-in server-side conditions that you can apply in the property editor:

• In the control’s properties, find the Server-side Condition section.

• Choose a condition type such as Value of Item / Column = Expression.

• Specify the controlling page item (your variable) and the expected value.

For example, to show a region only when P1_SHOW_DETAILS = 'Y':

• Set Server-side Condition Type: Value of Item / Column = Expression

• Item: P1_SHOW_DETAILS

• Expression 1: Y

This way, the region will be rendered only if the variable has the matching value.

Step 3: Use Dynamic Actions for Client-side Show/Hide

For real-time interactivity without page reload, use Dynamic Actions:

1. Create a Dynamic Action on the controlling variable (usually a page item) with an event like Change or Click.

2. Add True Actions to Show or Hide specific controls.

3. Optionally, add False Actions to reverse the behavior.

Example:

• Event: Change on P1_TOGGLE_BUTTON

• True Action: Show region P1_DETAILS_REGION

• False Action: Hide region P1_DETAILS_REGION

Step 4: Using JavaScript and Variables

You can also use JavaScript to control visibility based on variables or page item values:

if ($v("P1_SHOW_DETAILS") === "Y") {
  $("#P1_DETAILS_REGION").show();
} else {
  $("#P1_DETAILS_REGION").hide();
}

This can be executed on page load or on item change using Dynamic Actions with Execute JavaScript Code.

Step 5: Combining Server and Client Logic

Use server-side conditions to prevent unnecessary rendering of controls when hidden, and client-side Dynamic Actions to toggle visibility dynamically after the page loads. This approach optimizes performance and user experience.Step 6: Testing and Debugging

• Test different values of controlling variables to ensure controls show/hide as expected.

• Use browser developer tools or APEX debug mode to inspect item values and event triggers.

• Adjust conditions and dynamic actions to cover all intended scenarios.

Hiding and displaying controls via variables in Oracle APEX is a versatile method to build dynamic, user-responsive applications. By combining server-side conditions, client-side Dynamic Actions, and optional JavaScript, developers can finely tune the interface to show only relevant content based on user input or application logic. Mastering these techniques improves application usability, reduces clutter, and delivers a polished user experience.

 

Hiding & Displaying Controls via Variables in Oracle APEX

Hiding and displaying form elements dynamically in APEX can improve user experience by showing only relevant controls based on user input or system conditions. This can be done using Dynamic Actions, JavaScript, and PL/SQL.

Method 1: Using a Dynamic Action (Recommended Approach)

Steps:

1. Create a Page Item Variable

• Example: Create a Select List item called P1_SHOW_HIDE_CONTROL with values like Yes / No.

2. Create a Dynamic Action

• Event: Change

• Selection Type: Item(s)

• Item: P1_SHOW_HIDE_CONTROL

3. Add a True Action (Show Control)

• Action: Show

• Selection Type: Item(s)

• Item: P1_CONTROL_TO_TOGGLE

• Client-side Condition: Item = Value

• Condition Value: Yes

4. Add a False Action (Hide Control)

• Action: Hide

• Selection Type: Item(s)

• Item: P1_CONTROL_TO_TOGGLE

• Client-side Condition: Item != Value

• Condition Value: Yes

Result:

• If P1_SHOW_HIDE_CONTROL is set to Yes, the control appears.

• If P1_SHOW_HIDE_CONTROL is set to No, the control is hidden.

Method 2: Using JavaScript

If you prefer using JavaScript instead of a Dynamic Action, you can use the following script.

1. Create a JavaScript Function in Page Attributes > Execute when Page Loads

function toggleControl() {

    var value = $v('P1_SHOW_HIDE_CONTROL');

    if (value === 'Yes') {

        $('#P1_CONTROL_TO_TOGGLE').show();

    } else {

        $('#P1_CONTROL_TO_TOGGLE').hide();

    }

}

2. Call the Function on Page Load

toggleControl();

3. Create a Dynamic Action on Item Change

• Event: Change

• Item: P1_SHOW_HIDE_CONTROL

• Action: Execute JavaScript Code

• Code:

toggleControl();

Result:

• The field automatically hides or shows based on the dropdown selection.

Method 3: Using PL/SQL to Control Display on Page Load

If you need to determine visibility based on a database condition:

1. Create a Computation for a Hidden Item

• Example: P1_CONTROL_VISIBILITY

• Type: PL/SQL Expression

• Code:

CASE 

    WHEN :APP_USER = 'ADMIN' THEN 'Y'

    ELSE 'N'

END;

2. Use a Dynamic Action to Show or Hide Based on P1_CONTROL_VISIBILITY

• True Action: Show P1_CONTROL_TO_TOGGLE when P1_CONTROL_VISIBILITY = Y.

• False Action: Hide P1_CONTROL_TO_TOGGLE when P1_CONTROL_VISIBILITY = N.

Best Practices

• Use Dynamic Actions for performance-friendly UI changes.

• Use JavaScript for immediate client-side interactions.

• Use PL/SQL for data-driven decisions at the server level.

Hiding and displaying controls dynamically in Oracle APEX can be achieved using Dynamic Actions, JavaScript, and PL/SQL logic. The best method depends on whether the logic is based on user input, database conditions, or real-time interactions.

EXAMPLE:

Step 1 – Place the following code in the HTML Header section of the Page

Use this code:

<script type="text/javascript">

function hideRegion(){

$x_Hide('region1');

}

function showRegion(){

$x_Show('region1');

}

</script>

Step 2 – Create a Region 

Step 3 – In Identification

      

       Step 4- In Advanced give the Static Id the name of region1 (lower case)

Step 5 – Create another region and add two buttons

Step 6 – Name one button Show Region

Step 7 – Change behavior  to “Redirect to URL” and add the following code:

javascript:showRegion();

Step 8 – create a new button called “Hide Region”

Step 9- Change behavior  to “Redirect to URL” and add the following code:

javascript:hideRegion();

Results: SHOW

Results: HIDE

Conclusion
Using variables to hide and display controls in Oracle APEX allows developers to build adaptive applications that respond to user actions and context. This dynamic visibility management enhances the user experience by ensuring that users see only what they need at any given time. Mastering this technique is essential for creating polished, responsive, and professional Oracle APEX applications.