Add Search Option On Nav Bar Oracle APEX

Share on:

preview

How to Add Search Option On Nav Bar Oracle APEX

In Some of the cases wee need to add search field of top of the navigation bar but directly we can’t add it so there is the solution if we edit tamplate so lets start and see how we can get.

  1. First go to the Share Components»Templates and copy the navigation bar tamplate and give the another name.

preview

  1. Now Open the New navigation bar which you have created and go to the List Template Noncurrent with Sublist Items (First) and paste the below code as per screenshot.

preview

1<li class="t-NavigationBar-item #A02#">
2<input type="search" id="nav_id" placeholder="Search You Records..." name="search"> 
3<button id='navbtnid'type="submit"><i class="fa fa-search"></i></button> 
4<a class="t-Button t-Button--icon t-Button--header t-Button--navBar" href="#LINK#">  
5<span class="t-Icon #ICON_CSS_CLASSES#"></span><span class="t-Button-label">#TEXT_ESC_SC#</span>
6<span class="t-Button-badge">#A01#</span> </a></li>

preview

  1. Now create a page with classic report/ Interactive Report using below query.
 1select 
 2    EMPNO,
 3    ENAME,
 4    MGR,
 5    JOB,
 6    SAL
 7FROM
 8    EMP where
 9UPPER(ename) like nvl(UPPER(:P11_SEARCH),'%')
10    ORDER BY EMPNO DESC

preview

  1. Copy and paste below jquery code Execute when Page Loads section.
1$('#nav_id').keyup(function() 
2{
3apex.item( "P11_SEARCH" ).setValue(apex.item( "nav_id" ).getValue())
4});
5//or please use one of this
6$('#nav_id').keyup(function() 
7{
8var searchVal = document.getElementById("nav_id").value ;
9$s("P11_SEARCH", searchVal);});

preview

  1. In case if you want to move search option in center then use below css.
 1<style>
 2#nav_id{ height: 30px;
 3
 4width: 550px;
 5
 6}
 7
 8#navbtnid{
 9
10    margin-right: 240px;
11
12    height: 30px;
13
14    padding-top: 2px;
15
16    padding-left: 9px;
17
18}</style>

Demo

You might also like: