ORACLE MASTERMINDS

Friday, 14 October 2016

APEX 5- Using Images as an Top Navigation Menu

Overview:

1. Purpose.

2. Benefits.

3. Steps.

4. Screen shots.

5. Conclusion.

1. Purpose:

This document describes how to Use an Favicons in Apex 5 Top Navigation Menu.

In Apex 5, Navigation Menu Position is either Side or Top Navigation.

In Side Navigation menu, if we apply the favicons then it will display the menu correctly. But while applying Top Navigation Menu favicons will not be displayed. Also there’s a requirement to show only favicons in place of menu labels in Top Navigation Menu.

2. Benefits:

We can display only ICONS / Images in Apex Top Navigation Menu.

3. Steps:

Step1: Copy an Navigation Bar Template to a new name Template.

Step2: Go to New Template, apply the following changes:

1. List Template Current

<a style="background-color:#e2e1de; line-height:2.0rem" class="t-Button t-Button--icon t-Button--header t-Button--navBar" href="#LINK#" role="button" title="#TEXT_ESC_SC#"

id ="list_id">

</a>

</li>

2. List Template Current with Sublist Items

</button>

3. List Template Noncurrent

<a style="background-color:#e2e1de; line-height:2.0rem" class="t-Button t-Button--icon t-Button--header t-Button--navBar" href="#LINK#" role="button" title="#TEXT_ESC_SC#"

id ="list_id">

</a>

</li>

4. List Template Noncurrent with Sublist Items

</button>

Step3: Go to Application Navigation Attributes > User Interface > Navigation Menu > Position- Top > List Template - Select New Template which we created.

4. Screen shots:

5. Conclusion:

Thus we can apply the Top Navigation Menu with Favicons/Images in Oracle Apex 5.

APEX - Reports with Row Details

Overview:

1. Purpose.

2. Benefits.

3. Steps.

4. Screenshots.

5. Conclusion.

1. Purpose:

This document describes how to show a Apex Reports with Row Details In Apex, Report is an important tool which is in classical, interactive & other formats. Suppose if we have many columns in an report, then we want to display only important columns on a report but with an button option in report brings other columns in an collapsible format from the same report itself.

Here we are going to achieve this functionality using Jquery and On Demand Application Processes.

2. Benefits:

Ø We can restrict the user to display certain columns in report but will show other columns in a collapsible way.

Ø Look and feel of an report will be increased.

3. Steps:

Step1: Create a new page

Step 2: Create a region èreportèClassic reportèName for the reportèSQL query.

SELECT p.product_id, p.product_name, p.CATEGORY, p.product_avail,

(SELECT apex_lang.lang ('Details')

FROM DUAL) AS details

FROM demo_product_info p

Step 3: Edit DETAILS column attributes and make column as link

Link Text : #DETAILS#

Link Attributes : class="product-details" data-product="#PRODUCT_ID#"

Target : URL

URL : #

Step 4: Add to page JavaScript File URLs

#IMAGE_PREFIX#libraries/jquery-ui/1.10.4/ui/minified/jquery.ui.button.min.js

Step5: Add to Function and Global Variable Declaration

var gDetailCache = new Object();

(function($){

$.fn.htmldbDetailRow=function(options){

options=$.extend({},{

"trIdPrefix":"D",

"btnShowClass":"ui-icon-plusthick",

"btnHideClass":"ui-icon-minusthick",

"btnAjaxClass":"ui-icon-refresh"

},options);

this.each(function(){

var $Self = $(this).removeAttr("href").button({icons:{primary:options.btnShowClass},text:false}),

$Row = $Self.closest("tr"),

$Ico = $Self.children("span.ui-button-icon-primary"),

lC = $Row.children("td").length,

lId = $Self.data(options.btnData),

lTrId = options.trIdPrefix+lId,

lClass = options.btnShowClass + " " + options.btnHideClass

;

$Self.click(function(){

$Tr=$($x(lTrId));

if($Tr.length===0){

$Self.button("option",{icons:{primary:options.btnAjaxClass},"disabled":true});

apex.server.process(options.onDemanProcess,

{x01:lId},{dataType:"text",success:function(d){

var $Tr=$(

'<tr id="' + lTrId + '">' +

'<td class="' + options.tdClass + '" colspan="' + lC + '">'

+ d +

'</td>' +

'</tr>'

),lA=new Object();

lA[lTrId]={d:$Tr,s:true};

$.extend(gDetailCache,lA);

$Row.after($Tr);

$Ico=$Self.button("option",{icons:{primary:options.btnHideClass},"disabled":false})

.children("span.ui-button-icon-primary");

}

});

}else{

$Tr.toggle(0,function(){

$Ico.toggleClass(lClass);

gDetailCache[lTrId].s=!gDetailCache[lTrId].s

})

}

});

if(lTrId in gDetailCache){

gDetailCache[lTrId].d.children().attr({"colspan":lC});

$Row.after(gDetailCache[lTrId].d);

if(gDetailCache[lTrId].s){

$Ico.toggleClass(lClass)

}else{

gDetailCache[lTrId].d.hide()

}

})

return this

}

})(apex.jQuery);

Step6: Add to page CSS Inline

.prodinfo{

padding:6px!important;

font-size:12pt!important;

color:#660000!important;

font-weight:bold!important;

text-align:center!important;

}

Step7: Create on demand process GET_PRODUCT_INFO

DECLARE

l_info VARCHAR2(32000);

BEGIN

SELECT product_description

INTO l_info

FROM demo_product_info

WHERE product_id = apex_application.g_x01;

HTP.PRN(l_info);

EXCEPTION

WHEN NO_DATA_FOUND THEN

HTP.PRN('No additional information');

WHEN OTHERS THEN

HTP.PRN(sqlerrm);

END;

Step8: Create dynamic action

Name: IR detail row

Event: After Refresh

Selection Type: Region

Region: {select IR region}

Condition: -No Condition-

Action: Execute JavaScript code

Fire On Page Load: True

Code:

$(this.triggeringElement)

.find('a.product-details')

.htmldbDetailRow({

onDemanProcess:"GET_PRODUCT_INFO", // on demand process name

tdClass:"prodinfo", // details class

btnData:"product" // button data name

});

Selection Type: None

4. Screenshots:

5. Conclusion:

Thus a user can able to see the detail rows in a collapsible format from an report itself.

Deep Linking in Oracle APEX :

Deep linking refers to the ability to link to an Oracle Application Express page out of context . When you link to a page out of context and the application requires the user be authenticated, the user is taken to the login page. After credentials verification, the Application Express engine automatically displays the page that was referenced in the original link. Deep linking is supported for applications that use authentication schemes.

Steps:

1-> On the Authentication page- Set the Page security as follows:

Authentication : Page Requires Authentication

Deep-linking : Enabled

2-> In the dynamic action set the process as:

If success then - click Ok button

Else throw error

3-> Create a Branch:

BEGIN

IF :p2000_icon_prj_number IS NOT NULL

THEN

RETURN 'f?p=201:6:&SESSION.::&DEBUG.::P6_ICON_PRJ_NUMBER:\&P2000_ICON_PRJ_NUMBER.\';

ELSE

RETURN 'f?p=201:1:&SESSION.::&DEBUG.';

END IF;

END;

:P2000_icon_prj_number -> Parameter passed from source

Page 6 - If the URL is from source then redirect to the destination page with parameter passed

Page 1 - If the application is not from source then redirect to Home page

4-> In the source application pass the URL with parameter as follows:

https://apextest.iconplc.com/apex/f?p=201:2000:::::P2000_ICON_PRJ_NUMBER:#ICON_PRJ_NUM#

201 - Application Number

2000- Authentication page

P2000_ICON_PRJ_NUMBER - Page Item for the parameter passed.

&ICON_PRJ_NUM. - Parameter passed from source