SearchNavigationMenu (SNM)

Demo

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

Preview

Change log

V 2.1.

• Fixed FocusOnLoad problem #3.
• Fixed sub menus problem (Hide/Show child) #7.
• Fixed bug on IE ".startsWidth" #4.
• On IE now users can use clear text input property.

For upgrading to new version of SNM 2.1, please add next two following lines to your "Options"

 "OnSearchShowChildren":true,
 "UseFocus":true,

V 2.0.

• Added "Shortcuts": URL based search
• Added help for "Shortcuts" (F1 whilst Search Box is active).
• Added functions to manipulate shortcuts.
• Options moved to JSON structure.
• Added Style section in Options (optional).
• Added further documentation

V 1.4.

• Re-created Plugin for APEX 5.0
• Changed CSS to Font Awesome
  If you use Font APEX define icon CSS "fa-search" for Font Awesome "fa-search font_awesome"

V 1.3.

• Added new function JS regarding '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") (Recommend to also set the condition of this region to not display on your Login Page
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 some feedback. Thanks!

Replace existing plug-in

Because you are replacing the plug-in, the default options are inherited from the previous installation of the plug-in.
Please set new Options and Styles for the 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 for color, background and weight(user choice) on first match in String.
• Added functionality to SNM without target.
• "CTRL+S" is the default keybind to focus on SNM.
• "Enter" in SNM redirects to selected navigation item.
• Keys UP and DOWN can be used during searching to select different nav items.
New in V2.0:
• Added shortcuts
• When focused on the Search Box, pressing F1 will open the help page.

Recommended Functions:

    setSNMShortcuts(p_shortcuts_array);   // Add multiple new shortcuts to the array.
    appendSNMShortcut(p_shortcut_object); // Add one shortcut to the array.
    openModalSNMHelp();                   // Open help menu, same as F1.

Tested On (so far):

Browsers

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

Oracle APEX Versions

• Application Express 5.0
• Application Express 5.1

Documentation

Option Settings

Default Settings

{
 "menuOpen": false,   
 "MmenuClickOpenClose": true,
 "saveSS": true,
 "shortcutSaveSS": false,
 "shortcutCaseSensitive": true,
 "OnSearchShowChildren":true,
 "UseFocus":true,
 "shortcuts": []
}

MenuOpen:

MMenu fully expanded on-load (Not Recommended)

MenuClickOpenClose:

Default APEX behavior on navigation menu click is to open target page. This is a problem when the item doesn't have a target.
In that case, if you want to open a sub-menu you need to click on the "arrow down".
With this option set to true, when a user clicks on a "no target" nav item (title, icon or arrow) it instead opens the sub-menu.

SaveSS :

SaveSS stands for "Save Session State of item".

ShortcutSaveSS :

ShortcutSaveSS stands for "Save Session State of item when using a Shortcut".

ShortcutCaseSensitive :

Shortcut can be made case-sensitive. Caution: This will only affect the shortcut, not the search string.

Shortcuts:

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

Default 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 SNM to find the object.
This is useful if you want users to be able to search in specific items. See the example below:

person:Andrej

This means: Find shortcut "person", if object is IR or ITEM add search parameter value "Andrej". URL of Page Objects don't take parameters, only shortcuts.

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_id :

Page ID is the value for the page you want the shortcut to focus on. If this option is null, SNM will search the active page.

newWindow :

This will open the search results in a New Window if set to true. The default is set to "false".

clearCache and clearCacheList :

This setting will include "ClearCache" into the search URL if set to true.
If clearCache option in set to "true" the link is added to the clearCacheList. If the clearCacheList doesn't exist then page_id is placed in the clearCache zone.

Example :

Here we can create an example for the Help Menu.
User can see this example by pressing F1 whilst Search Box is active.

PAGE:

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

Setting for Page Objects are like default settings. We can define which page to redirect to.
Options are: Clear cache, open in new window and example (Help Menu).

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: Static ID for IR, required if there are multiple IRs on the page.
IR_type: Row or Column (default is Row).
IR_column: Define the column name (or null)
IR_value: If this parameter isn't defined then this is the default value, or it can be used for the shortcut.
IR_operator: Operators: C, EQ, etc. See link below for more operators.
IR_clearCache: CIR or RIR.
For more information on IR Linking: 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 Modeller.

/* ** Style Settings for SNM (including icons) */

/* FIX: If you use Font Awesome, enable to this fix Search Icon */
/*
.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;
   height: 32px;
   line-height: 32px;
   text-align: center;
   transition: width .2s ease;
}

/* Search Result Style */
.a-TreeView-label strong {
    font-weight: bold;
    color: black;
    background-color: #ffef9a;
}
/* Search Box Field Style */
.srch_nav input {
    color: black;
    background-color: #f1f6fa;
    border-color: #ededed;
}
/* Search Box Margin when clicked */
.srch_nav input:focus {
    border-color: #ff7052;
}

About me

Andrej Grlica
Company The Righr Thing Solutions
I have been an Oracle APEX Developer since 2008
When I'm not focusing on a code problem, you can find me on:
Work Email : andrej.grlica@right-thing.solutions
Private Email : andrej.grlica@gmail.com
LinkedIn: Link
Slack (#orclapex) PM:@grlicaa