Popup Modal Window

8/1/2019 Popup Modal Window

1/5

How to show POP UP (Modal window) in Apexusing jquery.Original Source : Denes Kubicek : [email protected] ( Thank you Denes)

Prepared by : M. Kamal Hossain : [email protected] http://apexexplorer.com

Note : Here EMP table has been used as demo. You can take any table that you desire.

First we take a look how it will look like finally :

Steps :

a) Create a new Page Named Employee List b) Report Region ( To display the Employee List )

c) HTML Region ( To show as popup - modal window for insert of new employee)d) Application Process to complete Insertion Process

Process for Step : a

Log in to your workspace and create a new Page and assign it's name and Title Employee List

Go to HTML header following the below steps :

Page Property > HTML Header and Body Attributes > HTML Header

copy the below text code and paste into the HTML Header :
mailto:[email protected]:[email protected]:[email protected]://apexexplorer.com/http://apexexplorer.com/mailto:[email protected]:[email protected]


2/5

$( function() {

$('#ModalForm').dialog( {

modal : true ,autoOpen : false ,buttons : {

Cancel : function() { closeForm();

} ,Add : function() {

addPerson();}}

}); });

function openForm(){

$('#ModalForm').dialog('open'); }

function closeForm(){

$('#ModalForm input[type="text"]').val('');$('#ModalForm').dialog('close');

}

function addPerson(){

var ajaxRequest = new htmldb_Get( null , &APP_ID. ,'APPLICATION_PROCESS=addEmployee', 0);

ajaxRequest.add( 'P1_ENAME', $v('P1_ENAME'));ajaxRequest.add( 'P1_JOB', $v('P1_JOB'));ajaxRequest.add( 'P1_SAL', $v('P1_SAL'));ajaxRequest.add( 'P1_DEPTNO', $v('P1_DEPTNO'));ajaxRequest.add( 'P1_EMPNO', $v('P1_EMPNO'));

var gReturn = ajaxRequest.get();

if(gReturn){ alert(gReturn) }else{ ajaxRequest = null;

closeForm();doSubmit('SEARCH'); }

}


3/5

Process for Step : b

Now simply create a report region named Employee List and put the SQL query source :

SELECT * FROM EMP

Now add a new button ( under this region or you can take separate region named like buttoncontrol ) named Add Employee and during creating of this button you must select the buttonposition as show below :

Now go to the button property and filled up the Action and URL Target as shown below :

Process for Step : c

Now create a HTML region named Popup Modal.Now create 4 text field under this regionP1_EMPNO,P1_ENAME,P1_SAL,P1_JOB,P1_DEPTNO ( you can make it drop down if you desire ).

Note : Here P1 indicates page No ( p1 = page no 1). Assign your page no if your page no other

than 1.Another important thing: If EMPNO is auto filled by trigger (database Level) then you removethe text input field P1_EMPNO. For Hiredate SYSDATE has been used. If you want other thanSYSDATE then you can take another field like P1_HIREDATE here.


4/5

Now go to the Region Header of this region following the below steps :

Region Popup Modal > Header and Footer > Region Header

now copy the below text and paste into Region Header:

(*) Marks are mandatory

Now same way go to the Region Footer and paste the below code into it :

Process for Step : d

Now create a Application Process following below steps :

Shared Components > Application Processes > Create :

Put the Process Point, Name and type as shown below

Now copy the below text code and paste into the Process text field and Press apply changes.


5/5

BEGIN INSERT INTO emp

(ename, job, hiredate, sal,deptno, empno

)VALUES (:P1_ename, :P1_job, SYSDATE, :P1_sal,

:P1_deptno, :P1_empno

);:P1_ename := NULL;:P1_job := NULL;:P1_sal := NULL;:P1_deptno := NULL;:P1_empno := NULL;

EXCEPTION WHEN OTHERSTHEN

HTP.prn ('Error adding record to the EMP Table. / ' || SQLERRM);END;

Note : if EMPNO is auto filled by trigger (database Level) then you remove EMPNO and itsinput field from this process.

After Successfully completing all the above steps you can get your desired popup modalwindow and insert new employee.

Thank you.

Documents

Popup Modal Window