Press "Enter" to skip to content

Oracle Apex – Add Interactive Grid into a Form

In this Oracle Apex tutorial, I will teach you how to add an Interactive Grid into a Form manually to make it behave like master-detail form.

I have an existing form on the Department table which is having two fields, DEPTNO and DNAME. The requirement is to add a detail section below the form to show all employees under the current department, and the user can add/edit employees under that department.

So, in this case, we should add an Interactive Grid into the form. Follow these steps:

Add an Interactive Grid into a Form Manually in Oracle Apex

  1. Open the form in Oracle Apex designer in which you want to add an Interactive grid. To demonstrate this, I am using the Department form, which is being called by the Department Report.
  2. Then right-click on the Content Body and click on the Create Region and set the following properties highlighted in the image below:

Interactive Grid Report setting step - 1

  1. I added the following query into the above SQL Query section:
Select ROWID, empno as employee_no, ename as employee_name, hiredate, deptno as dept, sal as salary from emp where deptno = :p5_deptno

You can see above that I added the P5_DEPTNO in the Page Items to Submit because I am using this item in the query. So you should add all the items you are using in the query to Page Items to Submit.

  1. It is better to use ROWID as Primary Key instead of actual Primary Keys for the Forms and Reports in Oracle Apex because it is faster to fetch and update records using the ROWID for faster performance, also helps to assign default values to the columns we are linking to the master table. In this example, we are linking DEPTNO from the EMP table to the DEPT table. So now click on the DEPT field in the Employees region and set the following properties:

DEPT column settings

The above properties I have set because when the user clicks on the Add Row button in the Interactive GRID, it will take the default DEPTNO from the Master table DEPT.

  1. Now click on the Attribute section of this Interactive Grid and set the properties shown below:

Interactive Grid setting step - 5

Now when you open the Department form from the Department Report for a specific department number, you will have the following output:

Oracle Apex Form with Interactive Grid Example.

See also:

Have you found the answer to your question? If not, you can discuss it with me in the comments section below or join my Q&A community OrclQA.com for developers and ask your question. It is FREE.

Vinish Kapoor

Follow

Hi, I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me; it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub, and get notifications for new posts.

guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
RTN
RTN
5 months ago

how to check before submit if IG has no record?

RTN
RTN
Reply to  Vinish Kapoor
5 months ago

i am trying, but it doesn’t work

  1. set static ID in my IG: IGITEMDATA
  2. add new page item in IG: Px_IG_ITEM (i am not sure there is any selection in it?)
  3. Javascript in attachment file.
  4. add DA before page submit

var model = apex.region(“IGITEMDATA”).widget().interactiveGrid(“getViews”, “grid”).model;
var n_count;
col_IG_ITEM = model.getFieldKey(“ITEM”);
model.forEach(function(igrow) {
 if (igrow[col_IG_ITEM].isEmpty()) {
   n_count = 0;
 } else {
  n_count = 1;
 } 
 break;
});
$s(‘Px_IG_ITEM’, n_count);

RTN
RTN
Reply to  Vinish Kapoor
5 months ago

can you explain about it? where to put PX_IG_ITEM = 0?

RTN
RTN
Reply to  Vinish Kapoor
4 months ago

may i request a demo on this case?

Varduhi
Varduhi
2 months ago

Hi Vinish,

Do you have an example on how to create a Form with Next/Preview button to move through the records.

Thank you,

Varduhi

Richa
Richa
15 hours ago

Hi,
Can we save the IG data on click of Apply Changes and remove save button in IG?

Richa
Richa
Reply to  Richa
14 hours ago

Also I just need separate Save for IG but also want the toolbar. How can I get this implemented.