How to create and show html report by ajax callback and print report in Oracle Apex

 Codes related to the tutorials


==========================HTML Code=======================


declare

cursor c1 is

select rownum sl, item_name, item_no

from items

where cat_id = apex_application.g_x01

and item_type = apex_application.g_x02;

begin

htp.p('

<div id="print_area">

<div class="rpt-main">

<div class="rpt-header">

<h2>ABC COMPANY LIMITED</h2>

<p>Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</p>

</div>

<div class="rpt-content">

<span>'||get_category(apex_application.g_x01)||' Report</span>

<table class="rpt-tbl">

<thead>

<tr>

<th>SL#</th>

<th>Item Name</th>

<th>Item No</th>

</tr>

</thead>

<tbody>');

for i in c1

loop

htp.p('<tr>

<td>'||i.sl||'</td>

<td>'||i.item_name||'</td>

<td>'||i.item_no||'</td>

</tr>');

end loop;

htp.p('

</tbody>

</table>

</div>

</div>

</div>


');

end;

==================================CSS CODE======================

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.rv-box {

margin: 0 auto;

min-height: 550px;

color: #ddd;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.rv-box span:last-child {

    font-size: 25px;

    margin-top: 10px;

}

.rpt-main {

    width: 29cm;

    height: 22cm;

    margin: 0 auto;

    font-size: 13pt;

    font-family: 'Roboto', sans-serif;

}

.rpt-header {

    width: 100%;

    padding-left: 10pt;

    padding-right: 10pt;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin-top: 30pt;

}

.rpt-header h2 {

    margin: 0;

    padding: 0;

}

.rpt-header p {

    margin: 0;

    padding: 0;

    width: 200pt;

    text-align: center;    

}

.rpt-content {

    display: flex;

    flex-direction: column;

}

.rpt-content>span {

    font-size: 20pt;

    padding: 10pt;

    width: 100%;

    background-color: #ddd;

    text-align: center;

    margin-top: 15pt;

    margin-bottom: 10pt;

}

.rpt-tbl {

    width: 100%;

    border-collapse: collapse;

}


.rpt-tbl tr, .rpt-tbl tr th, .rpt-tbl tr td {

    border: 1pt solid #222;

}

.rpt-tbl tr td, .rpt-tbl tr th {

    padding: 10pt;

}

.rpt-tbl tr td:first-child {

    text-align: center;

}

================================Javascript===========================

function run_report(){

    apex.server.process("CAT_REPORT", 

    {x01:apex.item('P9_CAT_ID').getValue(), x02:apex.item('P9_ITEM_TYPE').getValue()},

    {dataType: 'text',

    success: function(pData){

        $("#cat_rpt").html(pData);

    }});

}


function printOrderReport(x){

    var headerstr = "<!DOCTYPE html><html><head><title></title></head><body>";

    var footerstr = "</body>";

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

    document.body.innerHTML = headerstr+newstr+footerstr;    

    window.print();

    location.reload();

    return false;

}

==================================video link=========================



Comments

Post a Comment

Popular posts from this blog

How to insert and show blob images in form and report of Oracle Apex

Image
 ---------------------Source Code------------------------- CREATE TABLE emp_test ( emp_id number generated always as identity(start with 1 order), emp_name varchar2(100), emp_photo blob, photo_file_name varchar2(100), photo_mime_type varchar2(100), photo_last_update timestamp, constraint emp_test_pk primary key (emp_id)  ); -------------------show image------------------- <div class="img-box">     <img src="" alt="Photo" id="preview_img_id" /> </div> -------------------css code--------------------- .img-box {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; } .img-box img {     width: 120px;     max-height: 130px;     min-height: 100px;     border: 1px solid #ddd;     padding: 5px; } --------------------Report---------------------- select         decode(nvl(dbms_lob.getlength(EMP_PHOTO...
Read more

CRUD Operation from HTML

Image
 -----------------------------CRUD OPERATION from html------------------------- ----------------------------html template-------------------------- <!DOCTYPE html> <html>     <head>         <title>Personal Information</title>         <!-- Latest compiled and minified CSS -->         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />         <style>             .main-container {                 margin: 0 auto;                 display: flex;                 flex-direction: column;             }             .section-top {                 width: 600px; ...
Read more