Skip to main content

Unlocking Dynamic Navigation: Column Links in Oracle APEX Interactive Reports

In this blog, I demonstrate how to leverage the built-in navigation feature of Oracle APEX Interactive Reports (IR). Normally, IR allows you to redirect to other pages by passing column values to target page items with secure, automatically generated checksum values. However, my implementation goes a step further: based on specific column values, I dynamically choose the target page and navigate accordingly.

For this example, I use the default EMP table. The interactive report displays employees grouped by department number, and depending on the department number (column value), the navigation redirects to different pages. Additionally, the relevant values are set in target page items for further processing.

This approach showcases dynamic, multi-page navigation driven by column values in an IR, enhancing user experience by routing them contextually based on the data they interact with.

Create an Interactive Report using the EMP table. In the Attributes section, under the Link settings, use the option to configure redirect behavior

Link Column : Link Custom Target
Target_Type : URL
Target : javascript:redirectPage('#EMPNO#','#ENAME#','#DEPTNO#'); 
Link_Icon : <span class="fa fa-link"></span>

The redirectPage JavaScript function receives column values as parameters.

In page property under function and global variable declaration paste following code

function redirectPage(p_empno, p_ename, p_dept) {
    if (p_dept === null || p_dept === "" || p_dept === undefined) {
        alert("Department number is null");
        return;
    }
    else {

        apex.server.process(
            "GET_REDIRECT_URL",
            {
                x01: p_empno,
                x02: p_ename,
                x03: p_dept
            },
            {
                success: function (pData) {
                    if (pData.success === true) {
                        console.log("Redirect URL:", pData.url);
                        window.open(pData.url, "_blank");
                    } else {
                        console.log("Process returned FALSE");
                    }
                },
                error: function (req, status, error) {
                    console.log("Ajax Error: " + status + " - " + error);
                }
            }
        );
    }
}


The GET_REDIRECT_URL AJAX callback process is used to dynamically generate URLs because it makes the code easier to maintain and modify. Creating the URL in the AJAX callback allows you to build complex queries or logic to determine the target page and the values to be passed.

To implement this, create an AJAX callback process at the page level under the AJAX Callback Processes section.

Note: The AJAX callback name must exactly match the JavaScript function name that calls it.

This approach provides flexibility in constructing URLs and ensures safe, dynamic redirection based on your business logic.

   DECLARE
        l_page_no   NUMBER;
        l_url       VARCHAR2(4000);
    BEGIN
        IF apex_application.g_x03 = 10 THEN
            l_page_no := 10;
        ELSIF apex_application.g_x03 = 20 THEN
            l_page_no := 20;
        ELSE
            l_page_no := 30;
        END IF;

        l_url := 'f?p=' || :APP_ID || ':' || l_page_no || ':' || :APP_SESSION ||
                 '::NO:RP:' ||
                 'P'|| l_page_no || '_EMPNO,'||
                 'P'|| l_page_no || '_DEPARTMENT,'||
                 'P'|| l_page_no || '_EMPNAME:' ||
                 apex_application.g_x01|| ',' ||
                 apex_application.g_x02 || ',' ||
                 apex_application.g_x03;

        apex_json.open_object;
        apex_json.write('success', true);
        apex_json.write('url', apex_util.prepare_url(l_url));
        apex_json.close_object;
    EXCEPTION
        WHEN OTHERS THEN
            apex_json.open_object;
            apex_json.write('success', false);
            apex_json.write('error', sqlerrm);
            apex_json.close_object;
    END;

Instead of hardcoding, we now set the l_page_no value dynamically based on a query. After saving and running the application, it works perfectly.

Comments

Post a Comment

Popular posts from this blog

Reusable JS Functions for Field Validation in Oracle APEX Forms

 These reusable JavaScript functions provide client-side validation for Oracle APEX forms, improving data accuracy before submission. They allow developers to enforce mandatory fields and ensure certain fields contain only numeric values . By using these functions, APEX forms become more user-friendly and robust , reducing the chance of invalid data entry. Step 1: Create a Static Content region on the Global Page using the Blank with Attributes template. Step 2: Paste the following code into the HTML Source section of the region. <script>     function validateInputField(inputFieldId, pageItemName, errorMessage) {         $(inputFieldId).focusout(function() {             var itemValue = apex.item(pageItemName).getValue();             apex.message.clearErrors(pageItemName);             if (!itemValue) {               ...
Post a Comment
Read more

Reusable JavaScript Function to Highlight Holidays on APEX Date Picker Item

Date pickers are an essential part of web applications, especially when users need to select dates for bookings, reports, or scheduling tasks. However, in many business scenarios, certain dates like holidays, weekends, or special events need to be visually distinguished to prevent users from selecting them by mistake. In this blog, we will create a reusable JavaScript function that highlights holiday dates in an Oracle APEX date picker. This approach allows developers to call the function anywhere in their application, ensuring consistency and reducing redundant code. By the end, you’ll have a flexible solution to visually mark holidays on any date picker item in your APEX applications. Step 1: Create a Static Content region and set it to Blank with Content under the region attributes. Step 2: Inside that region, enclose a <script> tag and paste the following JavaScript function. function applyHolidayFormatterToDateItems(itemNames) {   const holidayList = [   ...
Post a Comment
Read more

Adding Custom Buttons to Oracle APEX Date Picker Footer (Set Start and End of Month)

In Oracle APEX, the built-in Date Picker is simple and functional — but sometimes, users need quick shortcuts for commonly used dates. For example, setting the first or last day of the current month with just one click can save time and reduce input errors. In this post, we’ll enhance the Oracle APEX Date Picker by adding two custom buttons — “Set Month Start” and “Set Month End” — directly inside the date picker footer. Using a small piece of jQuery code, you can seamlessly integrate these buttons without modifying the native APEX components. By the end of this guide, your Date Picker will not only look smarter but also provide a faster and more user-friendly experience.  ⚙️ This customization is created for learning purposes. Paste the below code on execute when page loads (js) apex.jQuery(document).on('focus', '#P20_START_DATE', function() {   var intervalId = setInterval(function() {     var $footer = apex.jQuery('.a-DatePicker-footer');     if ($f...
Post a Comment
Read more