HTML Invoice in Oracle Apex

Step-1 : Create new Bank Page

Create New Region

Type : PL/SQL Dynamic Content (copy paste bellow code)

declare

V_COMPANY_NAME VARCHAR2(100):='Goldean Dairy Farm';

cursor c_sell is select INVOICE_NO,INVOICE_DATE, CUSTOMER_ID, DISCOUNT_PCT,DISCOUNT_AMOUNT,TOTAL_AMOUNT,VAT_PCT,VAT_AMOUNT,NET_AMOUNT,PAID,DUE

FROM ANIMALS_SELL_MASTER WHERE INVOICE_NO=:P49_INVOICE;

r_sell c_sell%rowtype;

V_CUSTOMER_NAME VARCHAR2(100);

V_CUS_ADDRESS VARCHAR2(100);

V_PHONE_NUMBER1 VARCHAR2(50);

begin

--------------------------------

htp.p('<a id="b_exit" type="button1" class="button button3" class="exit" '||'href="'||APEX_UTIL.PREPARE_URL('f?p=&APP_ID.:21:&SESSION.::&DEBUG.::::')||'">Close</a>

<div id="div_print1" style="margin-top:5px;"> ');

---------------------

OPEN C_SELL;

FETCH C_SELL INTO R_SELL;

CLOSE C_SELL;

select NAME,PHONE1 INTO V_CUSTOMER_NAME,V_PHONE_NUMBER1 FROM CUSTOMER

WHERE CUSTOMER_ID=r_sell.CUSTOMER_ID;

-------------------------------

htp.p('

<html>

<title>Invoice</title>

<style>

img {float: left;}

h2.page-header {

margin: 0;

padding: 0;

}

h3.page-header {

align:center;

margin: 0;

padding: 0;

}

h1 {

text-align: center;

text-transform: uppercase;

}

p {text-align: center;}

.napkin2,th,td {

border: 1px solid black ;

border-collapse: collapse;

padding: 5px;

}

.napkin,th {

border: 1px solid #607d8b ;

border-collapse: collapse;

padding: 5px;

}

.p1 {

border: 0px;

text-align: left;

}

.p2 {

border: 0px;

text-align: right;

}

.td1 {

border: 0px;

text-align: left;

}

.td1 {

border: 0px;

text-align: left;

}

.full {

width:100%;

}

.p00 {text-align: right; border: 0px;}

.m2 {text-align:center;}

.m3{text-align: center;

.m4{text-align: center;

border: 1px solid #607d8b;}

.m4{text-align: center;

border: 1px solid #607d8b;

}

.m5{text-align: center;}

.m1,.m2,.m3.m4,.m5 {border: 0px solid #607d8b;}

.m1{padding-left: 5px;}

.m2{padding-right: 5px;}

.m3{padding-right: 5px;}

.m4{padding-right: 5px;}

.lower { padding-top: 50px;}

.low,.low1 {text-align: center;}

</style>

</header>

<body>

');

FOR I IN

(SELECT COMPANY_ID,

'<img width="80px" src="'||apex_util.get_blob_file_src('P83_IMAGE',COMPANY_ID)||'" />' IMAGE

from COMPANY where COMPANY_id=1) LOOP

htp.p('

<td float="left" width=100%>'|| i.image ||'</td>

</table>');

END LOOP;

htp.p('

<h2 class="page-header" align="center">'||V_COMPANY_NAME||'</h2>

<h3 class="page-header" align="center">734/735,West Nakhalpara,Tejgaon,Dhaka 1215 </h3>

<h3 class="page-header" align="center">Sell of Animals</h3>

');

htp.p('

<tr>

<tr>

<th class="p1">Invoice No </th>

<td class="p1">:   '||r_sell.invoice_no||'</td>

</tr>

<tr>

<th class="p1">Customer Name </th>

<td class="p1">:   '||V_CUSTOMER_NAME||'</td>

</tr>

<tr>

<th class="p1">Customer address </th>

<td class="p1">:   '||V_CUS_ADDRESS||'</td>

</tr>

</table>

</td>

<tr>

<th class="p1">Invoice Date</th>

<td class="p1">:   '||r_sell.INVOICE_DATE||'</td>

</tr>

<tr>

<th class="p1">Customer Phone </th>

<td class="p1">:   '||V_PHONE_NUMBER1||'</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

');

-------------------------------------

htp.p('

<thead>

<tr>

<th width="100px">ANIMAL ID</th>

<th width="100px">ANIMAL Type</th>

<th width="100px">Sell Price</th>

<th width="50px">Quantity</th>

<th width="100px">Amount</th>

</tr>

</thead>

');

for r in (

SELECT ROWNUM ID,ANIMAL_ID,ANIMAL_TYPE,SALE_PRICE, QTY,

NVL(SALE_PRICE,0)*NVL(QTY,0) AMOUNT from animals_sell_details where INVOICE_NO=:P49_INVOICE

) loop

htp.p('

<tbody>

<tr>

<td width="50px" align=center>'||' '||htf.escape_sc(r.ID)||'</td>

<td width="100px" align=center>'||' '||htf.escape_sc(r.ANIMAL_ID)||'</td>

<td width="400px" align=center>'||' '||htf.escape_sc(r.ANIMAL_TYPE)||'</td>

<td width="100px" align=right>'||' '||htf.escape_sc(to_char(r.SALE_PRICE,'99,99,999.99'))||'</td>

<td width="50px" align=center>'||' '||htf.escape_sc(r.QTY)||'</td>

<td width="100px" align=right>'||' '||htf.escape_sc(to_char(r.AMOUNT,'99,99,999.99'))||'</td>

</tr>

</tbody>

');

end loop;

htp.p('

</table>

</body>

');

htp.p('

<tr>

<th class="p2">Total Amount :</th>

<td class="p2">   '||to_char(r_SELL.TOTAL_AMOUNT,'99,99,99,999.99')||'</td>

</tr>

<tr>

<th class="p2"> Discount Pct :</th>

<td class="p2">   '||r_SELL.DISCOUNT_PCT||'%'||'</td>

</tr>

<tr>

<th class="p2"> Discount Amount :</th>

<td class="p2">   '||to_char(r_SELL.DISCOUNT_AMOUNT,'99,99,99,999.99')||'</td>

</tr>

<tr>

</tr>

<tr>

<th class="p2"> Vat Amount :</th>

<td class="p2">   '||to_char(r_SELL.VAT_AMOUNT,'99,99,99,999.99')||'</td>

</tr>

<tr>

<th class="p2">Net Amount :</th>

<td class="p2">   '||to_char(r_SELL.NET_AMOUNT,'99,99,99,999.99')||'</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

');

htp.p('</div>');

end;

Function and Global Variable Declaration

function printdiv(printpage)

{

var headstr = "<html><head><title></title></head><body>";

var footstr = "</body>";

var newstr = document.all.item(printpage).innerHTML;

var oldstr = document.body.innerHTML;

document.body.innerHTML = headstr+newstr+footstr;

window.print();

document.body.innerHTML = oldstr;

return false;

}

Inline

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 4px 8px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor: pointer;

}

.button1 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}

.button1:hover {

background-color: #008CBA;

color: white;

}

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

}

.button3:hover {

background-color: #f44336;

color: white;

}

Step-2 :

Create New Item (P49_INVOICE)

Type : Hidden

Step-3 : Go to your Sell page

Create new Button : Print_Invoice

Click Target and following the picture

Finally your invoice ready now.......

HTML Invoice in Oracle Apex

Post a Comment

Contact Form