Element: <oj-navigation-list>

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Attributes


Context Objects

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 4.2.0
Since:
  • 1.1.0

JET Custom Elements

JET components are implemented as custom HTML elements. A detailed description of working with these elements can be found in: JET Custom Element Usage.

Description: JET Navigation List enhances a HTML list element into a themable, WAI-ARIA compliant, mobile friendly component with advance interactive features.

The JET Navigation List gets its data in following ways.

  • Using table datasource. This is typically used in case of flat list. There are several types of TableDataSource that are available out of the box like oj.ArrayTableDataSource,oj.CollectionTableDataSource.

    NOTE: oj.PagingTableDataSource is not supported by navigation list. For large amount of data, It is recommended to use hierarhcial navigation list with tree data source.

  • Using TreeDataSource. This is typically used to display hierarchical navigation list. There are several types of TreeDataSource that are available out of the box like oj.JsonTreeDataSource, oj.CollectionTreeDataSource
  • Using static content . The structure of the content can be either flat or hierarhical.

Example of flat static content


<oj-navigation-list>
 <ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
 </ul>
</oj-navigation-list>

Example of hierarchical static content


<oj-navigation-list>
 <ul >
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
 </ul>
</oj-navigation-list>

JSON Tree Node Format


Each node object typically have an attr property. This attr value will be provided as itemContext.data to renderer function. See itemContext section. Any node can be defined as a parent by supplying a children property, which is an array of one or more node definitions. (Note: lazy-loading is not supported in navigation list so children property should be a non empty array)

Example: Basic JSON Tree definition


[
  {
    "attr": {
              "id": "home",
              "title": "Home"
            },
  },
  {
    "attr": {
              "id": "news",
              "title": "News"
            }
  },
  {
     "attr": {
               "id": "blogs",
               "title": "Blogs"
             },
     "children": [ {

                      "attr": {
                                  "id": "today",
                                  "title": "Today"
                              }
                   },
                   {
                      "attr": {
                                  "id": "yesterday",
                                  "title": "Yesterday"
                              }
                   }
                 ]
  }
]


Any list item can be disabled by adding the oj-disabled class to that element. As with any DOM change, doing so post-init requires a refresh() of the element.

Key

Key is an identifier which uniquely identifies an item in Navigation List.

  • When static html is used, it will be the id attribute of <li>. If no id is specified then component will generate an id and will use it as key.
  • When data source is used, it will be the id attribute of item's data object.

Icons

Sublist icons are inserted automatically. To add other icons to list items, include them in the markup and include the oj-navigationlist-item-icon class, as follows:

<oj-navigation-list>
  <ul>    
    <li id="foo"><a href="#"><span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"></span>Foo</a></li>
  </ul>
 </oj-navigation-list>

Styling

The following CSS classes can be applied by the page author as needed.

Class Description Example
oj-navigationlist-stack-icon-label Displays horizontal Navigation List with icon and label stacked. Applicable only when edge is top.
<oj-navigation-list class="oj-navigationlist-stack-icon-label" >
 <ul>    
   <li id="foo">
     <a href="#">
       <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
       </span>
       Foo
     </a>
   </li>
 </ul>
</oj-navigation-list>
oj-navigationlist-category-divider Use this class to add horizontal divider line between two categories of items.
<oj-navigation-list>
 <ul>
   <li ...> </li>
   <li class="oj-navigationlist-category-divider"> </li>    
   <li id="foo">
     <a href="#">
       <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
       </span>
       Foo
     </a>
   </li>
   <li ...> </li>
 </ul>
</oj-navigation-list>
oj-navigationlist-item-icon Use this class to add icon to list item.
<oj-navigation-list>
 <ul>    
   <li id="foo">
     <a href="#">
       <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
       </span>
       Foo
     </a>
   </li>
 </ul>
</oj-navigation-list>
oj-navigationlist-item-title When arbitrary content is placed inside item's content area, it's title text can be marked using this style class. This helps component in identifying the Item's label.
<li>
  <div>
    <span class="oj-navigationlist-item-title">Play</span>
    <button>Button</button>
  </div>
</li>
oj-navigationlist-item-text-wrap Use this class to wrap item label text. Note: On IE11, this is not supported when overflow attribute is set to popup.
<oj-navigation-list class="oj-navigationlist-item-text-wrap" >
 <ul>    
   <li id="foo">
     <a href="#">
       <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
       </span>
       Foo
     </a>
   </li>
 </ul>
</oj-navigation-list>
oj-navigationlist-item-dividers Use this class to show dividers between horizontal navigation list items.
<oj-navigation-list class="oj-navigationlist-item-dividers" >
 <ul>    
   <li id="foo">
      <a href="#">
        <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"></span>
        Foo
      </a>
   </li>
 </ul>
</oj-navigation-list>
oj-sm-condense Use this class to condense horizontal navigation list items on small screens and larger.
<oj-navigation-list class="oj-sm-condense" >
 <ul>    
   <li id="foo">
     <a href="#">
       <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"></span>
       Foo
     </a>
   </li>
 </ul>
</oj-navigation-list>
oj-md-condense Use this class to condense horizontal navigation list items on medium screens and larger.
oj-lg-condense Use this class to condense horizontal navigation list items on large screens and larger.
oj-xl-condense Use this class to condense horizontal navigation list items on extra large screens and larger.
oj-navigationlist-nofollow-link Use this class to prevent automatic navigation to the url specified on <a> tag's href attribute. In this case, navigation can be handled programmatically by using selectionChanged event. This is useful to execute some custom logic before browser triggers navigation.
<oj-navigation-list class="oj-navigationlist-nofollow-link" >
 <ul>    
   <li id="foo"><a href="folder/foo.html">
     <span 
       class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"></span>
     Foo</a>
   </li>
 </ul>
</oj-navigation-list>
oj-focus-highlight Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.

The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.

The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:

  • nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
  • all: oj-focus-highlight is applied regardless of the focus mechanism.
  • none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.

To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.

Touch End User Information

Target Gesture Action
List Item Tap Selects the item.
Press & Hold Display context menu
Group Item Tap Expand or collapse the group item if drillMode is set to collapsible. When drillMode is set to sliding, sublist will silde in. When drillMode is set to none, group item will be selecetd.
Press & Hold Display context menu
Hierarchical Menu button Tap Open menu. Refer menu button touch documentation. Note: This is applicable only for Sliding Navigation List.
Overflow Menu button Tap Open menu. Refer menu button touch documentation. Note: This is applicable only for Horizontal Navigation List when overflow is set to popup.
Previous Icon or List Header Tap Collapses the sublist and slides to parent list. Note: This is applicable only for Sliding Navigation List.

Keyboard End User Information

Target Key Action
List Item Enter or Space Selects list item.
UpArrow Moves focus to the previous visible list item.
DownArrow Moves focus to the next visible list item
RightArrow (LeftArrow in RTL) For horizontal navigation list,focus will be moved to next visible item.
LeftArrow (RightArrow in RTL) For horizontal navigation list,focus will be moved to previous visible item.
Home Moves focus to the first visible list item.
End Moves focus to the last visible list item.
F2 If focus is on a list item, pressing F2 will make its contents accessible using TAB.
Esc When F2 mode is enabled, press Esc to exit F2 mode.
Shift+Tab Move fous to hierarchical menu button.Only applicable for sliding navigation list and when hierarchial menu button is enabled.
Group Item RightArrow (LeftArrow in RTL) If focus is on collapsed node, expands the sub list.
LeftArrow (RightArrow in RTL) If focus is on expanded node, collapses the sub list.
List Item in sublist Esc Applicable only for sliding navigation list. If focus is in a sub list, closes the sublist and moves focus to the parent list item.
Hierarchical Menu button Enter Open menu. Refer menu button keyboard documentation. Note: This target is visible only for Sliding Navigation List.
Tab Moves focus to current list item. Note: This target is visible only for Sliding Navigation List.
Shift + Tab Moves focus to Previous Icon. Note: This target is visible only for Sliding Navigation List.
Overflow Menu button Enter or Space Open menu. Refer menu button touch documentation. Note: This is applicable only for Horizontal Navigation List when overflow is set to popup.
Previous Icon or List Header Enter Collapses the sublist and slides to parent list.Note: This target is visible only for Sliding Navigation List.
Tab Moves focus to Hierarchical Menu button. Note: This target is visible only for Sliding Navigation List.

Disabled items will not receive keyboard focus and do not allow any interaction.

Item Context

For all item options, developers can specify a function as the return value. The function takes a single argument, which is an object that contains contextual information about the particular item. This gives developers the flexibility to return different value depending on the context.

The context paramter contains the following keys:

Key Description
componentElement oj-navigation-list element.
datasource A reference to the data source object. (Not available for static content)
index The index of the item, where 0 is the index of the first item. In the hierarchical case the index is relative to its parent.
key The Key of the item.
data The data object for the item.
parentElement The list item element. The renderer can use this to directly append content.

If the data is hierarchical, the following additional contextual information are available:

Key Description
depth The depth of the item. The depth of the first level children under the invisible root is 1.
parentKey The Key of the parent item. The parent key is null for root node.
leaf Whether the item is a leaf or a group item.

Performance

Data Set Size

As a rule of thumb, it's recommended that applications limit the amount of data to display. Displaying large number of items in Navigation List makes it hard for user to find what they are looking for, but affects the load time. If displaying large number of items is neccessary, it is recommended to group the items in to hierarchial navigation list.

Item Content

Navigation List allows developers to specify arbitrary content inside its item. In order to minimize any negative effect on performance, you should avoid putting a large number of heavy-weight components inside because as you add more complexity to the structure, the effect will be multiplied because there can be many items in the Navigation List.

Expand All

While Navigation List provides a convenient way to initially expand all group items, it might have an impact on the initial rendering performance since expanding each group item might cause a fetch from the server depending on the TreeDataSource. Other factors that could impact performance includes the depth of the tree, and the number of children in each level.

Accessibility

See also the oj-focus-highlight discussion.

Disabled content: JET supports an accessible luminosity contrast ratio, as specified in WCAG 2.0 - Section 1.4.3 "Contrast", in the themes that are accessible. (See the "Theming" chapter of the JET Developer Guide for more information on which themes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user interface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio required of enabled content, it cannot be used to convey meaningful information.

Reading direction

The only supported way to set the reading direction (LTR or RTL) is to set the "dir" attribute on the <html> element of the page. As with any JET custom element, in the unusual case that the reading direction is changed post-init, the navigation list must be refresh()ed, or the page must be reloaded.

Animation

Applications can customize animations triggered by actions in Navigation List by either listening for animateStart/animateEnd events or overriding action specific style classes on the animated item. See the documentation of oj.AnimationUtils class for details.

The following are actions and their corresponding sass variables in which applications can use to customize animation effects.

Action Sass Variable Description
add $navigationListHorizontalAddAnimation When a new item is added to the oj.TableDataSource associated with Horizontal Navigation List.
$navigationListAddAnimation When a new item is added to the oj.TableDataSource associated with Vertical Navigation List.
remove $navigationListHorizontalRemoveAnimation When an existing item is removed from the oj.TableDataSource associated with Horizontal Navigation List.
$navigationListRemoveAnimation When an existing item is removed from the oj.TableDataSource associated with Vertical Navigation List.
update $navigationListUpdateAnimation When an existing item is updated in the oj.TableDataSource associated with Navigation List.
expand $navigationListExpandAnimation When user expands a group item.
$navigationListSliderExpandAnimation When user expands a group item in sliding navigation list.
collapse $navigationListCollapseAnimation When user collapses a group item.
$navigationListSliderCollapseAnimation When user collapses a group item in sliding navigation list.
pointerUp $navigationListPointerUpAnimation When user finish pressing an item (on touch).

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

Slots

JET elements can have up to two types of child content:

  • Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
  • Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc and demos of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

Attributes

current-item :*

Key of the current item. Current item is the list item which is having active focus. Note that if currentItem is set to an item that is currently not available (not fetched or inside a collapsed parent node), then the value is ignored.
Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property currentItem
Property change event currentItemChanged
Property change listener attribute (must be of type function) on-current-item-changed
Examples

Initialize the Navigation List with the current-item attribute specified:

 <oj-navigation-list current-item='settings'> ... </oj-navigation-list>

Get the current item:

var currentItem = myNavList.currentItem;

Set the current item on the NavigationList during initialization:

myNavList.currentItem = "newItem";

data :oj.TableDataSource|oj.TreeDataSource

The data source for the NavigationList accepts either a oj.TableDataSource or oj.TreeDataSource. See the data source section in the introduction for out of the box data source types. If the data attribute is not specified, the child elements are used as content. If there's no content specified, then an empty list is rendered.
Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function) on-data-changed
Examples

Initialize the Navigation List with the data attribute specified:

 <oj-navigation-list data='[[tableDataSource]]'> ... </oj-navigation-list>

Get the data:

var dataSource = myNavList.data;

Set the data attribute using one-dimensional array:

myNavList.data = new oj.ArrayTableDataSource([1,2,3]);

Set the data attribute using oj.Collection:

myNavList.data = new oj.CollectionTableDataSource(collection);

display :string

Whether to display both the label and icons ("all") or just the icons ("icons"). In the latter case, the label is displayed in a tooltip instead, unless a tooltip was already supplied at create time. Note: display="icons" is valid only when drillMode=none and navigation list is a flat list. It is also mandatory to provide icons for each item as stated in icons section.
Supported Values:
Name Type Description
"all" string Display both the label and icons.
"icons" string Display only the icons.
Default Value:
  • all
Names
Item Name
Property display
Property change event displayChanged
Property change listener attribute (must be of type function) on-display-changed
Examples

Initialize the Navigation List with the display attribute specified:

 <oj-navigation-list display='icons'> ... </oj-navigation-list>

Get or set the display property:

// getter
var display = myNavList.display;

// setter
myNavList.display = "icons";

drill-mode :string

Defines style of navigation used to drill down hierarchical list items.
  • none
  • collapsible
  • sliding
Supported Values:
Name Type Description
"collapsible" string Allows user to expand and collapse group items. If there are more than two levels in hierarchy, sliding is preferered drill mode.
"none" string All group items are expanded by default and user not allowed to collapse them.
"sliding" string This is typically used for hierarchical lists. This allows user to view one level at a time.
Default Value:
  • none
Names
Item Name
Property drillMode
Property change event drillModeChanged
Property change listener attribute (must be of type function) on-drill-mode-changed
Examples

Initialize the Navigation List with the drill-mode attribute specified:

 <oj-navigation-list drill-mode='collapsible'> ... </oj-navigation-list>
 

Set drillMode property:

myNavList.drillMode = "collapsible";

Get the drillMode property:

// getter
var drillMode = myNavList.drillMode;

edge :string

The position of the Navigation List. Valid Values: top and start.

NOTE: when value is top,"none" is the only supported drillMode and it also does't support hierarchical items.

Supported Values:
Name Type Description
"start" string This renders list items vertically.
"top" string This renders list items horizontally.
Default Value:
  • start
Names
Item Name
Property edge
Property change event edgeChanged
Property change listener attribute (must be of type function) on-edge-changed
Examples

Initialize the Navigation List with the edge attribute specified:

 <oj-navigation-list edge='top'> ... </oj-navigation-list>
 

Get the edge:

var edge = myNavList.edge;

Set the edge on the Navigation List:

myNavList.edge = "top";

hierarchy-menu-threshold :number

Specifies the level at which user can see hiearchical menu button.This is only valid when drillMode set to sliding. Default value is 0, shows hiearchical menu always. If value is -1, then it will never be shown.

The default value for hierarchyMenuThreshold varies by theme. Each theme can set its default by setting $navigationListHierarchyMenuDisplayThresholdLevelOptionDefault as seen in the example below.

Default Value:
  • 0
Names
Item Name
Property hierarchyMenuThreshold
Property change event hierarchyMenuThresholdChanged
Property change listener attribute (must be of type function) on-hierarchy-menu-threshold-changed
Examples

Initialize the Navigation List with the hierarchy-menu-threshold attribute specified:

 <oj-navigation-list hierarchy-menu-threshold='4'> ... </oj-navigation-list>
 

Get or set the hierarchyMenuThreshold property:

// getter
var hierarchyMenuThreshold = myNavList.hierarchyMenuThreshold;

// setter
myNavList.hierarchyMenuThreshold = "4";

Set the default in the theme (SCSS) :

$navigationListHierarchyMenuDisplayThresholdLevelOptionDefault: -1 !default;

item

The item property contains a subset of properties for items.
Names
Item Name
Property item
Property change event itemChanged
Property change listener attribute (must be of type function) on-item-changed

item.renderer :function(Object)|null

The renderer function that renders the content of the item. See itemContext in the introduction to see the object passed into the renderer function. The function should return one of the following:
  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the item.
  • undefined: If the developer chooses to manipulate the item element directly, the function should return undefined.
If no renderer is specified, Navigation List will treat the data as a String.
Default Value:
  • null
Names
Item Name
Property item.renderer
Examples

Initialize the Navigation List with the item.renderer attribute specified:

 <oj-navigation-list item.renderer="{{oj.KnockoutTemplateUtils.getRenderer('template', true)}}"> ... </oj-navigation-list>
 

Get or set the renderer property:

// set the renderer function
myNavList.item.renderer = rendererFn;

// get the renderer function
var rendererFn = myNavList.item.renderer;

item.selectable :function(Object)|boolean

Whether the item is selectable. See itemContext in the introduction to see the object passed into the selectable function.
Default Value:
  • true
Names
Item Name
Property item.selectable
Example

Initialize the NavigationList such that the first 3 items are not selectable:

 
 
 var skipFirstThreeElementsFn = function(itemContext) {
                                     return itemContext['index'] > 3; 
                                }

overflow :string

Specifies the overflow behaviour. NOTE: This is only applicable when edge attribute set to top
Supported Values:
Name Type Description
"hidden" string overflow is clipped, and the rest of the content will be invisible.
"popup" string popup menu will be shown with overflowed items.

NOTE: Setting overflow to popup can trigger browser reflow, so only set it when it is actually required.

Default Value:
  • hidden
Since:
  • 3.0.0
Names
Item Name
Property overflow
Property change event overflowChanged
Property change listener attribute (must be of type function) on-overflow-changed
Examples

Initialize the Navigation List with the overflow attribute specified:

 <oj-navigation-list overflow='popup'> ... </oj-navigation-list>

Get or set the overflow property:

// getter
var overflow = myNavList.overflow;

// setter
myNavList.overflow = "hidden";

root-label :string

Label for top level list items.

NOTE: This is needed only for sliding navigation list where this will be used as title for the top level list elements.

Default Value:
  • Navigation List
Names
Item Name
Property rootLabel
Property change event rootLabelChanged
Property change listener attribute (must be of type function) on-root-label-changed
Examples

Initialize the Navigation List with the root-label attribute specified:

 <oj-navigation-list root-label='Global Navigation'> ... </oj-navigation-list>
 

Get or set the rootLabel property:

// getter
var rootLabel = myNavList.rootLabel;

// setter
myNavList.rootLabel = "4";

selection :*

Item Key of currently selected list item. If the value is modified by an application, navigation list UI is modified to match the new value.
Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function) on-selection-changed
Examples

Initialize the Navigation List with the selection attribute specified:

 <oj-navigation-list selection='settings'> ... </oj-navigation-list>
 

Get the selection:

var selection = myNavList.selection;

Set the selection on the Navigation List:

myNavList.selection = "settings";

translations :Object

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If this component has translations, their documentation immediately follows this doc entry.

Default Value:
  • an object containing all resources relevant to the component, or null if none
Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function) on-translations-changed
Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

translations.default-root-label :string

Provides properties to customize the title text used by Sliding Navigation List for root node.

See the translations attribute for usage examples.

Default Value:
  • Navigation List
Since:
  • 1.1.0
Names
Item Name
Property translations.defaultRootLabel

translations.hier-menu-btn-label :string

Provides properties to customize the hover message text used by Sliding Navigation List as label for Hierarchical Menu button.

See the translations attribute for usage examples.

Default Value:
  • Hierarchical Menu button
Since:
  • 1.1.0
Names
Item Name
Property translations.hierMenuBtnLabel

translations.previous-icon :string

Provides properties to customize the hover message text used by Sliding Navigation List for previous button.

See the translations attribute for usage examples.

Default Value:
  • Previous
Since:
  • 1.1.0
Names
Item Name
Property translations.previousIcon

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

oj-navigationlist-item

Context for the oj-navigation-list component's items.

Properties:
Name Type Description
index number the zero based item index relative to its parent
key Object | string the Key of the item
parent Element the parent group item. Only available if item has a parent.
group boolean whether the item is a group.

Events

ojAnimateEnd

Triggered when the default animation of a particular action has ended. Note this event will not be triggered if application cancelled the default animation on animateStart.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
action Object the action that started the animation. See animation section for a list of actions.
element Object the target of animation.
Examples

Specify an ojAnimateEnd listener via the DOM attribute:

<oj-navigation-list on-oj-animate-end='[[listener]]'></oj-navigation-list>

Specify an ojAnimateEnd listener via the JavaScript property:

myNavigationList.onOjAnimateEnd = listener;

Add an ojAnimateEnd listener via the addEventListener API:

myNavigationList.addEventListener('ojAnimateEnd', listener);

ojAnimateStart

Triggered when the default animation of a particular action is about to start. The default animation can be cancelled by calling event.preventDefault.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
action Object the action that starts the animation. See animation section for a list of actions.
element Object the target of animation.
endCallback function if the event listener calls event.preventDefault to cancel the default animation, it must call the endCallback function when it finishes its own animation handling and when any custom animation ends.
Examples

Specify an ojAnimateStart listener via the DOM attribute:

<oj-navigation-list on-oj-animate-start='[[listener]]'></oj-navigation-list>

Specify an ojAnimateStart listener via the JavaScript property:

myNavigationList.onOjAnimateStart = listener;

Add an ojAnimateStart listener via the addEventListener API:

myNavigationList.addEventListener('ojAnimateStart', listener);

ojBeforeCollapse

Triggered before an item is collapse via the expanded property, the collapse method, or via the UI. To prevent the item being collapsed, return false from event handler or invoke event.preventDefault().
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
key * the Key of the item to be collapse
item Element the item to be collapse
Examples

Specify an ojBeforeCollapse listener via the DOM attribute:

<oj-navigation-list on-oj-before-collapse='[[listener]]'></oj-navigation-list>

Specify an ojBeforeCollapse listener via the JavaScript property:

myNavigationList.onOjBeforeCollapse = listener;

Add an ojBeforeCollapse listener via the addEventListener API:

myNavigationList.addEventListener('ojBeforeCollapse', listener);

ojBeforeCurrentItem

Triggered before the current item is changed via the currentItem property or via the UI. To prevent the item being focused, return false from event handler or invoke event.preventDefault().
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
previousKey * the Key of the previous item
previousItem Element the previous item
key * the Key of the new current item
item Element the new current item
Examples

Specify an ojBeforeCurrentItem listener via the DOM attribute:

<oj-navigation-list on-oj-before-current-item='[[listener]]'></oj-navigation-list>

Specify an ojBeforeCurrentItem listener via the JavaScript property:

myNavigationList.onOjBeforeCurrentItem = listener;

Add an ojBeforeCurrentItem listener via the addEventListener API:

myNavigationList.addEventListener('ojBeforeCurrentItem', listener);

ojBeforeExpand

Triggered before an item is expand via the expanded property, the expand method, or via the UI. To prevent the item being expanded, return false from event handler or invoke event.preventDefault().
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
key * the Key of the item to be expand
item Element the item to be expand
Examples

Specify an ojBeforeExpand listener via the DOM attribute:

<oj-navigation-list on-oj-before-expand='[[listener]]'></oj-navigation-list>

Specify an ojBeforeExpand listener via the JavaScript property:

myNavigationList.onOjBeforeExpand = listener;

Add an ojBeforeExpand listener via the addEventListener API:

myNavigationList.addEventListener('ojBeforeExpand', listener);

ojBeforeSelect

Triggered before this list item is selected. To prevent the item selection, return false from event handler or invoke event.preventDefault().

The ui.key contains item key which uniquely identifies the item. ui.item payload field contains item element being selected.

Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
key * Selected list item Key.
item Element Selected list item.
Examples

Specify an ojBeforeSelect listener via the DOM attribute:

<oj-navigation-list on-oj-before-select='[[listener]]'></oj-navigation-list>

Specify an ojBeforeSelect listener via the JavaScript property:

myNavigationList.onOjBeforeSelect = listener;

Add an ojBeforeSelect listener via the addEventListener API:

myNavigationList.addEventListener('ojBeforeSelect', listener);

ojCollapse

Triggered after an item has been collapsed via the expanded property, the collapse method, or via the UI.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
key * The Key of the item that was just collapsed.
item Element The list item that was just collapsed.
Examples

Specify an ojCollapse listener via the DOM attribute:

<oj-navigation-list on-oj-collapse='[[listener]]'></oj-navigation-list>

Specify an ojCollapse listener via the JavaScript property:

myNavigationList.onOjCollapse = listener;

Add an ojCollapse listener via the addEventListener API:

myNavigationList.addEventListener('ojCollapse', listener);

ojExpand

Triggered after an item has been expanded via the expanded property, the expand method, or via the UI.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
key * The Key of the item that was just expanded.
item Element The list item that was just expanded.
Examples

Specify an ojExpand listener via the DOM attribute:

<oj-navigation-list on-oj-expand='[[listener]]'></oj-navigation-list>

Specify an ojExpand listener via the JavaScript property:

myNavigationList.onOjExpand = listener;

Add an ojExpand listener via the addEventListener API:

myNavigationList.addEventListener('ojExpand', listener);

Methods

getContextByNode(node) → {Object|null}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Description
node Element The child DOM node
Returns:
The context for the DOM node, or null when none is found.
Type
Object | null
Example
 // Returns {'subId': 'oj-some-sub-id', 'componentSpecificProperty': someValue, ...}
var context = myComponent.getContextByNode(nodeInsideElement);

getProperty(property) → {*}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
*
Example

Get a single subproperty of a complex property:

var subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh()

Refreshes the visual state of the Navigation List. JET components require a refresh() after the DOM is programmatically changed underneath the component.

This method does not accept any arguments.

Example

Invoke the refresh method:

 myNavList.refresh();

setProperties(properties)

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value)

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value * The new value to set the property to.
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");