Qaium's IT Demonstration

Muhammad Abdul Qaium is a Database Engineer/Oracle Apex Developer/BI Developer (in Connecticut, USA) who is an Oracle Certified Cloud Architect Professional, OCI Autonomous DB specialist as well as Oracle Business Intelligence Foundation Suite 11g Certified Implementation Specialist with extensive expertise in Database design , PL/SQL, Oracle Apex, Microsoft SSIS, ETL, Power BI, Qlik Sense, BI Publisher, Jasper Report, OBIEE. Contact: qaiuminfo@gmail.com

Sunday, September 20, 2020

Search Option In Navigation Bar by Oracle Apex

HTML:

CSS:

<style>

#searchid{ height: 30px;

width: 500px;

}

#searchbtid{

margin-right: 200px;

height: 30px;

padding-top: 2px;

padding-left: 9px;

}

</style>

Java Script:

$('#searchid').keyup(function() {var searchVal = document.getElementById("searchid").value ;

$s("P0_SEARCH", searchVal);});

Monday, August 17, 2020

Interactive Report Top Side Scroll Bar

1. Make a ID in region Static ID

2. Page CSS Inline

#ID .t-fht-thead{

overflow: auto !important;

}

Saturday, July 25, 2020

Split A String By Coma (,)

Step 1.
create or replace type split_tbl as table of varchar2(32767);

Step 2.
create or replace function split
(
p_list varchar2,
p_del varchar2 := ','
) return split_tbl pipelined
is
l_idx pls_integer;
l_list varchar2(32767) := p_list;
l_value varchar2(32767);
begin
loop
l_idx := instr(l_list,p_del);
if l_idx > 0 then
pipe row(substr(l_list,1,l_idx-1));
l_list := substr(l_list,l_idx+length(p_del));

else
pipe row(l_list);
exit;
end if;
end loop;
return;
end split;

Step 3.

SELECT COLUMN_VALUE my_string FROM TABLE (split('Muhammad,Abdul,Qaium'));

Tuesday, July 7, 2020

User Wise Application Color In Oracle Apex

1. Create Global Item AI_HDR_COLOR AI_SELECTOR_COLOR AI_SIDE_COLOR 2.Page Template Standerd For Header <div class="t-Header-branding" style="background: &AI_HDR_COLOR. !important;" role="banner"> 3. Side Navigation Menu Template For Navigation Menu <style> .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current, .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top.is-selected, .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-selected { background-color: &AI_SELECTOR_COLOR. !important; } .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-hover{ background-color: &AI_SELECTOR_COLOR. !important; } </style> <div class="t-TreeNav #COMPONENT_CSS_CLASSES#" id="t_TreeNav" style="background: &AI_SIDE_COLOR. !important;" data-id="#PARENT_STATIC_ID#_tree" aria-label="&APP_TITLE!ATTR."> <ul style="display:none">

1. Create Global Item

AI_HDR_COLOR
AI_SELECTOR_COLOR
AI_SIDE_COLOR

2.Page Template Standerd For Header

<div class="t-Header-branding" style="background: &AI_HDR_COLOR. !important;" role="banner">

3. Side Navigation Menu Template For Navigation Menu

<style>
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current, .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top.is-selected, .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-selected {
background-color: &AI_SELECTOR_COLOR. !important;
}
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-hover{
background-color: &AI_SELECTOR_COLOR. !important;
}
</style>

<div class="t-TreeNav #COMPONENT_CSS_CLASSES#" id="t_TreeNav"
style="background: &AI_SIDE_COLOR. !important;"
data-id="#PARENT_STATIC_ID#_tree" aria-label="&APP_TITLE!ATTR.">
<ul style="display:none">

Monday, July 6, 2020

Color Header and Navigation Manu

Oracle Apex Version 19.2

CSS:

<style>
.t-Header-branding{
background: rgb(200,86,98)!important;
background: radial-gradient(circle, rgba(200,86,98,1) 0%, rgba(130,20,32,1) 45%, rgba(102,9,19,1) 61%, rgba(84,7,16,1) 77%, rgba(51,2,7,1) 90%) !important;
}

.t-TreeNav {
background: rgb(200,86,98)!important;
background: radial-gradient(circle, rgba(200,86,98,1) 0%, rgba(130,20,32,1) 45%, rgba(102,9,19,1) 61%, rgba(84,7,16,1) 77%, rgba(51,2,7,1) 90%) !important;
}

.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current, .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top.is-selected, .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-selected {
background-color: #2e0308 !important;
}

.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-hover{
background-color: #2e0308 !important;
}

</style>

Friday, July 3, 2020

Add Music Into Oracle Apex

Add Music Into Oracle Apex 1. upload audio file into static application file 2. create region with static content and copy pest the below code into the region. 3. To automatically play the audio you have to use "autoplay" like <audio controls autoplay>

1. upload audio file into static application file

2. create region with static content and copy pest the below code into the region.

3. To automatically play the audio you have to use "autoplay" like <audio controls autoplay>

<!DOCTYPE html>
<html>
<body>

<h1>The audio autoplay attribute</h1>

<p>Click on the play button to play a sound: autoplay </p>

<audio controls >
<source src="#APP_IMAGES#5.mp3" type="audio/ogg">
<source src="#APP_IMAGES#5.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Tuesday, June 30, 2020

My YouTube Channel

YouTube

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