Qaium's IT Demonstration: June 2020

Tuesday, June 30, 2020

My YouTube Channel

Friday, June 26, 2020

Interactive Grid First Row Not Selected Default

Interactive Grid First Row Not Selected Default For Apex Version 19.1 and Above 1. Goto Region Attributes >> Advance > JavaScript Initialization Code Copy-Pest the below code :

For Apex Version 19.1 and Above

1. Goto Region Attributes >> Advance > JavaScript Initialization Code
Copy-Pest the below code :

function(options) {
options.initialSelection = false;
return options;
}

OR

For Apex Version 18.2 and Below Version

Step 1 . Create a Interactive Grid form. Then assign static id as 'emp' of the Interactive Grid region.

Step 2. Goto Page properties >>Execute When Page Load >>
copy pest the below code.

var ig$ = apex.region("emp").widget();
ig$.interactiveGrid("getViews", ig$.interactiveGrid("getCurrentViewId")).setSelection($());

Thank You

Thursday, June 25, 2020

How to Side Navigation Menu Expand and Collapse

1. Paste Below Code you page level execute when page loads section

(function($) {

$(window).on('theme42ready', function() {
/* Make sure that the navigation menu is collapsed on page load */
if ($('.t-PageBody').hasClass('js-navExpanded')) {
$('#t_Button_navControl').click();
}

/* Expand on mouse over, collapse on mouse out */
$('.apex-side-nav .t-Body-nav').hover(
function(){
//only expand if the side menu is collapsed
$('.t-PageBody:not(.js-navExpanded) #t_Button_navControl').click();
},
function() {
$('#t_Button_navControl').click();
}
);
});

})(apex.jQuery);

above for auto expand and collapse

2. Below CSS code are used to show title on hover on icon

/* menu collapse show hover*/

.js-navCollapsed .t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content.is-hover .a-TreeView-label {
visibility: visible;
left: 48px;
padding: 0 16px;
width: auto;
background-color: #0459a1; /* This would be your primary color */
}

.apex-side-nav.js-navCollapsed .t-Body-nav
, .apex-side-nav.js-navCollapsed .t-Body-nav .t-TreeNav {
z-index: 1100; /* Make it appear on top of the page content */
}

Wednesday, June 17, 2020

Create Excel File From Classic Report in Oracle Apex Using Java Script

1. Upload File

Download File

2. Copy Pest the Code

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SheetJS JS-XLSX In-Browser HTML Table Export Demo</title>

<style>
.xport, .btn {
display: inline;
text-align:center;
}
a { text-decoration: none }
#data-table, #data-table th, #data-table td { border: 1px solid black }
</style>
<style type="text/css"></style></head>
<body>

<script type="text/javascript" src="#APP_IMAGES#download/xlsx.full.min.js.download"></script>
<![endif]-->



<script>
function doit(type, fn, dl) {
var elt = document.getElementById('testid');
var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
return dl ?
XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
XLSX.writeFile(wb, fn || ('Downloaded File.' + (type || 'xlsx')));
}
</script>

<br>
<pre><b>Export it!</b></pre>
<table id="xport">
<tbody><tr><td><pre>XLSX Excel 2007+ XML</pre></td><td>
<p id="xportxlsx" class="xport"><input type="submit" value="Export to XLSX!" onclick="doit('xlsx');"></p>
<p id="xlsxbtn" class="btn"></p>
</td></tr>
<tr><td><pre>XLSB Excel 2007+ Binary</pre></td><td>
<p id="xportxlsb" class="xport"><input type="submit" value="Export to XLSB!" onclick="doit('xlsb');"></p>
<p id="xlsbbtn" class="btn"></p>
</td></tr>
<tr><td><pre>Comma Separated Values</pre></td><td>
<p id="xportcsv" class="xport"><input type="submit" value="Export to CSV!" onclick="doit('csv');"></p>
<p id="csvbtn" class="btn"></p>

</td></tr>
</tbody></table>
</body></html>

3. Create Report Region And Set Static ID - testid

Tuesday, June 2, 2020

Oracle Apex Success Message Remove After 5 Second

setTimeout(function() {
$("#t_Alert_Success").remove();
}, 5000);

Qaium's IT Demonstration

Search This Blog