Oracle apex login page beautification Tutorial

 Manual Scrollable Master Detail Page in Oracle Apex part-1

Step -1

create a page classic Report Page (All Employees)

using this sql query :

select
aa.ID, aa.FAST_NAME||' '||aa.MNAME||' '||aa.LNAME "Full Name", aa.FATHER_NAME, aa.MOTHER_NAME,
aa.JOINING_DATE, aa.NID, AA.TIN, aa.EMAIL, aa.PASSPORT, aa.MOBILE,
(SELECT CASE
WHEN NVL (DBMS_LOB.getlength (EMPLOYEE_IMAGE), 0) = 0
THEN
NULL
ELSE
'<img width="80px" src="'
|| APEX_UTIL.
get_blob_file_src ('P16_EMPLOYEE_IMAGE', ID)
|| '" />'
END
FROM EMPLOYEE_BASIC
where id=aa.id)
AS PICTURE
from EMPLOYEE_BASIC aa

Step-3

add a button called CREATE as level (New Employee)

In Button Behaviour property redirect this page to form page (Page 23).

Step-4
In form Page:

*in after header process section
create a process called
Fetch Row from EMPLOYEE_INFORMATION
*in identification property type= automatic row fetch legacy
*in settings : Table Owner= parsing schema , Table name=EMPLOYEE_BASIC, primary key=id, primary key item=P16_ID

and in page process section add a process called Process Row of EMPLOYEE_basic
*in identification property type= automatic row pocessing dml legacy
*in settings : Table Owner= parsing schema , Table name=EMPLOYEE_BASIC, primary key=id, primary key item=P16_ID

add another process as Get_PK type= execute code to process the primary key column value using this pl-sql code

begin
if :P13_ID is null then
select "#OWNER#"."SEQ_EMPLOYEE_INFORMATION".nextval
into :P13_ID
from sys.dual;
end if;
end;

Create a region called Display Selector in Breadcrumb bar section of form page.
Create a region called Employee Basic Information as static region in body section of form page.
Create 4 Button in this Employee Basic Information region edit position (Cancel, Delete, Save, Create)

*cancel button behaviour (redirect to page that classic report page)

*Delete button behaviour (target type URL with this javascript code: javascript:apex.confirm(htmldb_delete_message,'DELETE');)
and database action = SQL DELETE ACTION
and server side condition type = item is not null and item =P16_ID (replace it with your page number)

*Save button behaviour action=submit page and database action = SQL Update action
and server side condition type = item is not null and item =P16_ID (replace it with your page number)

*Create button behaviour action=submit page and database action = SQL Insert action
and server side condition type = item is null and item =P16_ID (replace it with your page number)

Step-5

Now create a subregion called &nbsp; as static content under Employee Basic Information Region
and add below page item as per EMPLOYEE_BASIC TABLE Column:

P16_ID
P16_FAST_NAME
P16_MNAME
P16_LNAME
P16_JOINING_DATE
P16_NID
P16_FATHER_NAME
P16_MOTHER_NAME
P16_EMAIL
P16_PASSPORT
P16_MOBILE
P16_EMPLOYEE_IMAGE
P16_DOB
P16_TIN
P16_FREEDOM_FIGHTER
P16_GENDER
P16_DISABLE_STATUS
P16_MARITAL_STA
P16_RELIGION_STATUS
P16_TAX_LOCATION
P16_RETIREMENT_DATE

Step-6

Now create another subregion called &nbsp; as classic report under Employee Basic Information Region using below code

select id,
decode(nvl(dbms_lob.getlength(employee_image),0),0,null,
'<img alt="'||apex_escape.html_attribute(ID)||'" title="'||apex_escape.html_attribute(ID)
||'" style="border: 6px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;" '
||'src="'||apex_util.get_blob_file_src('P16_EMPLOYEE_IMAGE',id)||'" height="180" width="150" />') employee_image
from EMPLOYEE_BASIC
where id=:P13_ID;

Save and run this page see the result

now add this newly develop page into our administrative app menu for granted user access authorise page