1. Introduction:-
In Oracle APEX (Application Express), configuring dynamic search field behavior in an Interactive Grid (IG) based on inputs from a previous page enhances user experience by creating a more intuitive and responsive application. This process involves utilizing session state, JavaScript, and dynamic actions to ensure that the search fields in an IG are pre-populated or adjusted according to the selections or inputs made on a prior page.
The following technologies has been used to achieve the same.
- PL/SQL
- Oracle APEX
- JavaScript
2. Why we need to do:-
Setting a Search Field in Interactive Grid from a Previous Page
In a Customer Order Management System built with Oracle APEX, users first search for a customer on the Customer Search page. Once a customer is selected, the system redirects to the Order Search page, where the Interactive Grid dynamically filters and displays orders related to the selected customer. The search fields in the grid are pre-populated based on the customer information provided on the previous page, ensuring a seamless and efficient user experience. This setup streamlines the process of managing customer orders by automatically applying relevant search criteria and displaying pertinent data.
3. How do we solve:-
Create the Source Page with Link Columns:
- To set a value in a search field on a different page, start by creating a source page with link columns that will transmit a department ID to the target page.
- Set Up the Source Page: In Oracle APEX, create a new page with an Interactive Grid, using the “EMP” table as the data source.
- Define Link Columns: Designate the “ENAME” column as a link. Configure the link target to be the page that will receive the employee name.
- Configure the Link:
- For the link’s “Name,” select the page item on the target page that will receive the value (e.g., “P3_ENAME“).
For the “Value,” use a substitution variable that passes the department ID from the source page (e.g., &ENAME..).
Create the Target Page with an Interactive Grid:
Now create the target page that contains the Interactive Grid and will receive the department ID for the search field.
- Set Up a New Page: Create a new Interactive Grid page, which can be a modal dialog or a regular page.
- Specify the Data Source: Use the following SQL query to retrieve the required data, joining the “Employee” and “Department” tables:
SELECT EMP.EMPNO,
EMP.ENAME,
EMP.SAL,
DEPT.DEPTNO,
DEPT.DNAME,
EMP.JOB
FROM EMP
JOIN DEPT
ON EMP.DEPTNO = DEPT.DEPTNO
- Assign a Static ID: Give the Interactive Grid a static ID for JavaScript interaction. In this example, use “my_ig.”
- Create a Hidden Page Item: Add a hidden page item on the target page to hold the passed Employee Name (e.g., “P3_ENAME”).
Set the Search Field and Execute the Search:
To set the search field with the passed Employee name and execute the search, use this JavaScript code in the “Execute when Page Loads” section:
apex.region(“my_ig”).call(“getToolbar”).toolbar(“findElement”, “search_field”).val(‘&P3_ENAME.’);
apex.region(“my_ig”).call(“getActions”).invoke(“search”);
- Setting the Search Field: The code snippet sets the search field in the Interactive Grid to the value of “P3_ENAME,” a page item that holds the Employee Name.
- Executing the Search: After setting the value, the code invokes the “search” action, triggering the Interactive Grid to filter based on the passed Employee Name.
Test the Dynamic Action:
- After creating the dynamic action, test your Oracle APEX application to ensure it behaves as expected:
- Run the Application: Open the source page and click the link column to navigate to the target page.
- Verify the Search: Confirm that the Interactive Grid on the target page focuses on the specified search field and executes the search based on the Employee Name.
Additional Considerations
Resetting the Search Field: To reset the search field, create a dynamic action with JavaScript to clear the report:
apex.region(“my_ig”).call(“getActions”).invoke(‘reset-report’);
4. Conclusion :-
Enhancing data filtering and user experience in Oracle APEX can be achieved by creating a dynamic action that sets a search field based on a value from a previous page. This guide explains how to configure an Interactive Grid to filter data using a passed Employee Name, triggering an automatic search. By setting up this dynamic action, you can ensure that the search field in the grid is automatically populated with the Employee Name from the previous page, allowing for seamless and efficient data filtering. This not only improves the user experience but also enhances the overall functionality of your Oracle APEX application.
