How do I Hide & display controls via variables

 In Oracle APEX, controlling the visibility of page elements dynamically is essential for creating interactive and user-friendly applications. One effective way to manage this is by hiding and displaying controls based on the values of variables. By leveraging page items or application items as variables, developers can conditionally show or hide buttons, regions, form fields, and other components, enhancing the user experience and simplifying navigation. This technique helps tailor the interface according to user roles, data states, or specific actions, making the application more responsive and intuitive.

In Oracle APEX, hiding and displaying controls based on variables allows you to create dynamic and responsive user interfaces. This technique typically uses page items or application items as variables to control the visibility of buttons, regions, or form elements, depending on user input, role, or other conditions. By doing so, you can simplify the user experience, reduce clutter, and enforce business rules directly in the user interface.

To hide or display controls via variables, follow these detailed steps:

1. Identify the Variable
   Determine which variable (usually a page item like P1_STATUS or an application item) will control the visibility of the target control. This variable’s value will determine whether the control is shown or hidden.

2. Set the Variable’s Value
   You can set the variable’s value in various ways: through user input, computations, processes, or URL parameters. For example, a status field might have values like 'Open' or 'Closed', which affect the visibility of certain buttons.

3. Use Server-Side Condition on Controls
   In the Oracle APEX Page Designer, navigate to the control you want to conditionally show or hide (e.g., a button or region).

   • Find the "Server-side Condition" property.

   • Choose the appropriate condition type, such as "Item = Value," "PL/SQL Expression," or "Exists (SQL Query)."

   • For example, to display a button only when P1_STATUS = 'Open', set the condition type to "Item = Value," select P1_STATUS as the item, and enter 'Open' as the value.

4. Use Dynamic Actions for Client-Side Control
   To make visibility changes happen without a page reload (dynamically in the browser), create a Dynamic Action:

   • In the Page Designer, under Dynamic Actions, create a new Dynamic Action triggered by the event (e.g., "Change" on the controlling page item).

   • Add a true action "Show" or "Hide" targeting the control (button, region, etc.).

   • Optionally, add false actions to reverse the visibility when the condition is not met.

   • Use a JavaScript expression or simple "Equals" condition on the controlling item’s value.

5. JavaScript for More Complex Scenarios
   For more complex logic or multiple variables, you can use JavaScript to check variable values and hide or show controls using jQuery selectors.
   Example JavaScript code for a Dynamic Action:

   var status = $v('P1_STATUS');  
   if (status === 'Open') {  
     $('#BUTTON_STATIC_ID').show();  
   } else {  
     $('#BUTTON_STATIC_ID').hide();  
   }
   

   Replace BUTTON_STATIC_ID with the static ID of the button or region.

6. Assign Static IDs to Controls
   To target controls in JavaScript or Dynamic Actions, assign a Static ID to the button, region, or item in the Appearance section of the property editor.

7. Test Visibility
   Run the page and change the variable’s value to confirm the control hides or shows correctly. Use the browser’s developer tools to debug if needed.

Using variables to hide and display controls makes your Oracle APEX applications more interactive and user-friendly. It enables context-sensitive interfaces, reducing user errors and streamlining workflows. Mastery of both server-side conditions and client-side dynamic actions is key to implementing this technique effectively.

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

Mastering how to hide and display controls using variables allows you to build flexible Oracle APEX applications that adapt in real time to user input or business logic. By implementing conditional rendering rules and dynamic actions linked to variables, you can maintain a clean and efficient interface, prevent user errors, and guide users through complex workflows. This approach not only improves usability but also supports better application performance and maintainability.