Two ways to fetch the current records (Interactive Grid #10)
Last but not least tip no. 10!
#10 Two ways to fetch the current records
This will be the last blog in the series for now, but no less interesting than the others :-)
In this entry, we want to show how you can fetch the records of an interactive grid in two different ways.
The first method is using a JavaScript function, as the second method we employ a PL/SQL function. Both are easy to implement. You can determine your approach depending on what you want to do with the data. Personally, I prefer PL/SQL and avoid JavaScript code whenever it´s possible but every developer thinks differently here :-)
Let's have a closer look at how we can do this.
1) Fetch records via JavaScript
We start with a new application or page where we will add an interactive grid. In our example we use the table "EMP" as source. Then we give the Interactive Grid a Static ID, for example "my_ig". In our case we only want to fetch the values of the "EMPNO" column and save them in a page item. This is a very basic example, but it suffices to show how it works. Next we need a page item that we call "P1_EMPNO_JS". When that is done, we add a Dynamic Action and set the following:
- Event: 'Page change (Interactive Grid)'
- Selection type: 'Region'
- Region: 'The Interactive Grid you add to the page'
The Dynamic Action is fired every time the selection of the Interactive Grid changes. We can also use a button or some other DA event. The final thing we need is a 'True' action that executes JavaScript Code. Here we enter the following JavaScript function:
var l_empno;
// fetch the model for the interactive grid
var model = apex.region("my_ig").widget().interactiveGrid("getViews", "grid").model;
// loop through the records
model.forEach(function(igrow) {
if(l_empno == null){
// first row without seperator ":"
l_empno = igrow[model.getFieldKey("EMPNO")];
}
else {
// add seperator ":" to each additional row
l_empno = l_empno + ':' + igrow[model.getFieldKey("EMPNO")];
}
}
);
// Set Page Item
apex.item( "P1_EMPNO_JS" ).setValue (l_empno);
What we are doing here is getting the model of the Interactive Grid, and looping through each row and writing the value of "EMPNO" to a variable. At the end we store the result of the variable in a page item.
That´s it ;-)
2) Fetch records via PL/SQL
In our second example we use the same Interactive Grid as before. We need a second Page Item, which we call "P1_EMPNO_SQL", and another Dynamic Action, which, as in the previous example, is also fired on a "Page change (Interactive Grid)" event. For the DA we need a 'True' action that executes PL/SQL code and enter the following:
declare
l_region_id number;
l_context apex_exec.t_context;
l_empno_ids number;
l_empno varchar2(1000 CHAR);
begin
-- Get the region id for the IG
select region_id
into l_region_id
from apex_application_page_regions
where application_id = :APP_ID
and page_id = :APP_PAGE_ID
and static_id = 'my_ig';
-- Get the query context for the IG
l_context := apex_region.open_query_context (
p_page_id => :APP_PAGE_ID,
p_region_id => l_region_id );
-- Get the column positions for column(s)
l_empno_ids := apex_exec.get_column_position( l_context, 'EMPNO' );
-- Loop through the query of the context
while apex_exec.next_row( l_context ) loop
if l_empno is null then
-- first row without seperator ":"
l_empno := apex_exec.get_number( l_context, l_empno_ids );
else
-- add seperator ":" to each additional row
l_empno := l_empno || ':' || apex_exec.get_number( l_context, l_empno_ids );
end if;
end loop;
-- Set Page Item
:P1_EMPNO_SQL := l_empno;
-- Close query context
apex_exec.close( l_context );
exception
when others then
apex_exec.close( l_context );
raise;
end;
What we're doing here is the same process as before in our JavaScript function. We get the query context of the Interactive Grid, loop through each row and write the value "EMPNO" to a variable. Some APEX APIs are used to achieve this, which will not be described in further detail here, but we are going to have a closer look at them in future blogs, so keep an eye out.
The examples here are very basic but show what can be achieved with a bit of customization. You can do a lot this way, for example fetching the records of the IG in order to insert or update data in this or another table. Using the JavaScript approach, it is possible to make your page more interactive, for example to show or hide regions/items/buttons based on the selected data.
Feel free to let us know if these tips and tricks helped you.
If you have questions or suggestions, please leave us a comment ;-)
References:
- https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/grid.html
- https://docs.oracle.com/en/database/oracle/application-express/20.2/aeapi/APEX_REGION-OPEN_QUERY_CONTEXT-Function.html#GUID-BDB9F4B7-D1A7-4C9A-B4C7-45A57AD76427
- https://docs.oracle.com/en/database/oracle/application-express/20.2/aeapi/APEX_EXEC.html#GUID-3CF1D2DD-AEA4-4982-9857-548567AB7169
Labels: interactive grid, javascript, pl/sql
