Oracle Application Express - Bangladesh: 2022

Thursday 26 May 2022

Windows List View Style Grid Reports Using JavaScript | Oracle APEX

CSS

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

.ig-windows-style .a-GV-table .a-GV-cell,

.ig-windows-style .a-GV-table .a-GV-controlBreakHeader {

border-color: transparent;

}

.ig-windows-style .a-GV-w-frozen .a-GV-table {

border-right: none;

}

.ig-windows-style .a-GV-table tr.is-hover .a-GV-cell,

.ig-windows-style .a-GV-table tr.is-hover.is-selected .a-GV-cell {

background-color: #f2f6ff;

}

.ig-windows-style .a-GV-table tr.is-selected .a-GV-cell,

.ig-windows-style .a-GV-table tr.is-hover.is-selected .a-GV-cell {

background-color: #dbe8ff;

}

.ig-windows-style .a-GV-hdr {

background-color: #fcfcfc;

}

.a-IG-contentContainer {

margin-top: 0;

}

.ig-windows-style .u-selector {

box-shadow: none;

border: 1px transparent;

}

.ig-windows-style .a-GV-hdr tr .u-selector,

.ig-windows-style tr.is-selected .u-selector,

.ig-windows-style tr.is-hover .u-selector {

box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;

border: 1px solid #404040;

}

JavaScript Initialization Code

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

function(config) {

config.defaultGridViewOptions = {

// this was mentioned in my blog: http://hardlikesoftware.com/weblog/2017/01/24/how-to-hack-apex-interactive-grid-part-2/#more-537

// relies on internal detail of menu id generation but no other way to get this

contextMenuId: "emp_ig_selection_actions_menu",

};

// Logically want to do this: config.views.grid.features.stretchColumns = false;

// But the server may not generate the views, grid, or features objects depending on what declrative options are selected.

// So must check for and add if needed each one. Seems like there should be an easier way :-(

var o = config;

"views.grid.features".split(".").forEach(function(p) {

if ( !o[p] ) {

o[p] = {};

}

o = o[p];

});

o.stretchColumns = false;

/* or you could do it this way

if (!config.views) {

config.views = {};

}

if (!config.views.grid) {

config.views.grid = {};

}

if (!config.views.grid.features) {

config.views.grid.features = {};

}

config.views.grid.features.stretchColumns = false;

return config;

}

Static ID

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

emp

Monday 21 February 2022

Make Print Reports | Oracle APEX

--------Table

CREATE TABLE "EMP"

( "EMPNO" NUMBER(4,0) NOT NULL,

"ENAME" VARCHAR2(50),

"JOB" VARCHAR2(50),

"MGR" NUMBER(4,0),

"HIREDATE" DATE,

"SAL" NUMBER(7,2),

"COMM" NUMBER(7,2),

"DEPTNO" NUMBER(2,0),

"DESCRIPTION" VARCHAR2(100),

CONSTRAINT "EMP_PK" PRIMARY KEY ("EMPNO")

)

--------PL Content

Htp.p('<input type="button1" class="button button1" class="t-Icon t-Icon--right fa fa-print" id="print" type="button" onclick="printdiv(''div_print1'');" value="Print"/><br/>

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

htp.p('

<style>

table, th, td{

border: 1px solid black;

border-collapse: collapse;

}

</style>

');

htp.p('<center>My Employee Reports</center>');

htp.p('<table style="width:100%"

<tr>

<th align="right">Salary</th>

</tr>

');

for x in (select EMPNO,ENAME,MGR,SAL FROM EMP)

loop

htp.p('

<tr>

<td>'||x.EMPNO||'</td>

<td>'||x.ENAME||'</td>

</tr>

');

end loop;

for x in (select sum(sal) sal from emp)

loop

htp.p('

<tr>

<td>Total</td>

</tr>

');

end loop;

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

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

--------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

<style>

.button {

border: none;

color: white;

padding: ;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: ;

margin: 4px 2px;

transition-duration: 0.4s;

cursor: pointer;

}

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

}

.button1:hover {

background-color: #4CAF50;

color: white;

}

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}

.button2:hover {

background-color: #008CBA;

color: white;

}

</style>