Oracle Application Express item Plug-in for search on Navigation Menu.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
plug-in
.gitattributes
LICENSE
README.md
apexplugin.json

README.md

SearchNavigationMenu

Demo

A demo application is available on apex.oracle.com
https://apex.oracle.com/pls/apex/f?p=111583

Preview

Change log

V 2.0.

  • Added "Shortcuts" URL based search
  • Added help for "Shortcuts" (press F1 while focused on item).
  • Added functions "" to manipulate with shortcuts.
  • Added Style section in options so you can move style inside theme (optional).
  • Options moved to JSON structure.
  • Added Style section in options so you can move style inside theme (optional).
  • Added documentation and help inside every option.
V 1.4.
  • Re-crated Plugin for APEX 5.0
  • Changed CSS for Font Awesome
    If you use font apex define icon CCS "fa-search" for font awesome "fa-search font_awesome"
V 1.3.
  • Added new function JS regarding to 'isExpanded("nav")' error for apex 5.1.1
V 1.2.
  • CSS added body action and not JS changing "display"
  • On resize if tree is collapsed then close all opened sub lists
V 1.1.
  • Resolved Bug 25592396 Item Type plug-in uses render function name for Ajax call Apex 5.1.0
  • Resolved problem on smartphones when window resize navigation menu is closed.
  • Added new attribute "Navigation menu open".

Install

New install

  1. Import plug-in "item_type_plugin_si_abakus_searchnavigationmenu.sql" into your application.
  2. Add region on global page. (Region must be on page but you can hide it with style="display:none;" in "Custom Attributes")
  3. Add SearchNavigationMenu [Plug-in] item to the region.

  4. Decide options and style of the item (or leave default values).

  5. Save changes. Search Navigation Menu is now ready to use.
  6. Please leave same feedback. Thanks

Replace existing plug-in

Because replacing, default options are inherited from privies version of plug-in.
Please, set new Options and Styles for item. You can use examples in help section.

Functionality

Implemented

  • Search is not case sensitive
  • Search works on sub lists also
  • Search adds style option color,background and weight(user choice) on first match in String
  • Added functionality to navigation menu without target
  • "Control+s" focus on search navigation
  • "Enter" in search navigation redirect on selected link
  • Keys up and down in search navigation move searched text link
  • New 2.0 version:
  • Added shortcuts
  • While focused on search box (F1 key) opens search navigation help

Recomemded functions

    setSNMShortcuts(p_shortcuts_array);   //Add new set of shortcuts
    appendSNMShortcut(p_shortcut_object); // Add one shortcut on shortcuts array
    openModalSNMHelp();                   //open help same as pressing F1 key

Tested on (so far):

Browsers

  • FireFox 54.0.1, 56.0.2
  • Crome 59.0.3071.115, 60.0.3112.90
  • Microsoft Edge 38.14393.1066.0, 40.15063.0.0

Apex Versions

  • Application Express 5.0
  • Application Express 5.1

Documentation

Option settings

Main settings

{"MenuOpen":false,   
 "MenuClickOpenClose":true,
 "SaveSS":true,
 "ShortcutSaveSS":false,
 "ShrtCaseSensitive":true,
 "Shortcuts" : []
}
MenuOpen :

Menu fully opened on load (not recommended)

MenuClickOpenClose :

Default APEX behavior on navigation menu click is to open target page. Problem becomes when link don't have target.
In that case if you want to open sub-menu you need to click on "arrow down".
With this option enabled (set to "Yes") when user click on "no target" in navigation menu (title, icon or arrow) it opens sub-menu.

SaveSS :

SaveSS stands for Save Session State of item.

ShortcutSaveSS :

ShortcutSaveSS stands for Save Session State of item when shortcut has occurred.
User usually need only to open quick setting with shortcut and than empty search field.

ShrtCaseSensitive :

Shortcut can be case sensitive. Be aware this is setting only for shortcut name and not searching value.

Shortcuts :

For more information on shortcut settings you can use SNM Shortcut modeler.

Common settings
{  "name": "emp",
  "action": "page",
  "page_id": 300,
  "newWindow": false,
  "clearCache": true,
  "clearCacheList": "300,301,RIR",
  "example": "emp"
}
name :

Name of shortcut. This is used for search engine to find action.
If user need to add parameter for IR or ITEM type shortcut search it can be done like below example.

person:Andrej

This means find shortcut "person" if action is IR or ITEM add search parameter value "Andrej". URL od PAGE action type don't take parameters only shortcuts.

page_id :

Page id is setting on what page we need search or redirect. If this option is null, engine takes current page.

newWindow :

This option means if we need to open search result in new window than we set this option to "true".
By default this option in "false".

clearCache and clearCacheList :

Depending of clearCache setting we add clear cache in search URL.
If clearCache option in set to "true" we put in link clearCacheList. If clearCacheList don't exists than we put page_id into clearCache zone.

example :

Here we can put example for user to demonstrate purpose of shortcut.
User can see this example by pressing F1 key on search box.

action :

Depending on this setting engine decide what to do with shortcut. We have four basic actions types PAGE, IR, URL and ITEM.
Every type have his own properties and all of them have "Common settings".

PAGE :
{ "name": "emp",
  "action": "page",
  "page_id": 300,
  "newWindow": true,
  "clearCache": true,
  "clearCacheList": "RIR,300",
  "example":"emp"
}

Setting for PAGE actions are like common settings. We can define which page to redirect.
Options are clear cache, open in new window and example for user.

IR :
{ "name": "person",
  "action": "IR",
  "IR_static_id": "EMP",
  "IR_type": "column",
  "IR_column": "ENAME",
  "IR_value": "KING",
  "IR_operator": "C",
  "IR_clearCache": "RIR",
  "page_id": 300,
  "example": "person:andrej"
}

IR_static_id if you have more than one IR on page.
IR_type row or column (if empty default is row).
IR_column if column define column.
IR_value if we don't add parameter than this is default value or it can be used for shortcut.
IR_operator C, EQ..
IR_clearCache CIR or RIR.
More about IR Linking on : https://docs.oracle.com/database/apex-5.1/HTMDB/linking-to-interactive-reports.htm#HTMDB30108

URL :
{ "name": "google",
  "action": "url",
  "url": "http://google.com",
  "newWindow": true
}
ITEM :
{
  "name": "EMPNO",
  "action": "item",
  "item_name": "P300_ACTIVE",
  "item_value": "Y",
  "page_id": 300,
  "clearCache": true
}

Style settings

For more information on style settings you can use SNM Style modeler.

/*
** STYLE Settings for search navigation menu and menu icons
*/
/* FIX If you use FONT awesome enable this .srch_nav span */
/*
.srch_nav span {
   top:2px;
}
*/
/* FIX If you use FONT awesome disable  this .t-TreeNav */
.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-content .fa {
   vertical-align: top;
   width: 32px; /* This can be decrease to have smaller spacing */
   height: 32px;
   line-height: 32px;
   text-align: center;
   transition: width .2s ease;
}
/* Search resault setting */
.a-TreeView-label strong {
    font-weight:bold;
    color:black;
    background-color:#ffef9a;
}
/* Input field style setting */
.srch_nav input {
    color:black;
    background-color:#f1f6fa;
    border-color:#ededed;
}
/* Input field on hover setting */
.srch_nav input:focus {
    border-color:#ff7052;
}

About me

Andrej Grlica
Company Abakus Plus d.o.o.
I’m a oracle apex developer since 2008.
When I’m not into code problem, you can find me on:
Work email : andrej.grlica@abakus.si
Private email : andrej.grlica@gmail.com
Twitter : @AndrejGrlica
Linked-in : Link
Slack (#orclapex) PM:@grlicaa