Element: <oj-n-box>

Oracle® JavaScript Extension Toolkit (JET)
5.2.0
E97691-01

QuickNav

Slots

Attributes


Context Objects

Methods

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.


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

Version:
  • 5.2.0
Since:
  • 1.1.0
Module:
  • ojnbox

JET NBox

NBox elements are used in HCM (Human Capital Management) applications to measure employees across two dimensions (e.g. potential and performance). Each dimension can be split into multiple ranges, whose intersections result in distinct cells which employees can be placed into.


<oj-n-box
  columns='[{"id":"low"}, {"id":"high"}]',
  rows='[{"id":"low"}, {"id":"high"}]',
  nodes='[{"column":"low", "row":"high", "label":"Employee 1"},
          {"column":"low", "row":"low", "label":"Employee 2"},
          {"column":"high", "row":"high", "label":"Employee 3"},
          {"column":"low", "row":"high", "label":"Employee 4"}]'>
</oj-n-box>

Accessibility

The application is responsible for populating the shortDesc value in the component properties object with meaningful descriptors when the component does not provide a default descriptor. Since component terminology for keyboard and touch shortcuts can conflict with those of the application, it is the application's responsibility to provide these shortcuts, possibly via a help popup.

Touch End User Information

Target Gesture Action
Cell Double Tap Maximize/restore cell.
Node Tap Select when selectionMode is enabled.
Press & Hold Display tooltip.
Display context menu on release.
Overflow Indicator Tap Maximize cell.
Group Node Tap Select when selectionMode is enabled.
Double Tap Open group node dialog.
Press & Hold Display tooltip.
Display context menu on release.
Dialog Double Tap Close dialog.
Close Button Tap Close dialog.

Keyboard End User Information

Key Action
Tab Move focus to next element.
Shift + Tab Move focus to previous element.
Enter Maximize focused cell.
Enter Open dialog for focused group node.
Escape Restore maximized cell.
Escape Close dialog.
[ Move to first node in cell or dialog
] Move to containing cell or dialog
Left Arrow When cell focused, move to nearest cell to the left.
Right Arrow When cell focused, move to nearest cell to the right.
Up Arrow When cell focused, move to nearest cell above.
Down Arrow When cell focused, move to nearest cell below.
Left Arrow or Up Arrow When node focused, move to previous node.
Right Arrow or Down Arrow When node focused, move to previous node.
Ctrl + Left Arrow or Ctrl + Up Arrow When node focused, move to previous node but do not select.
Ctrl + Right Arrow or Ctrl + Down Arrow When node focused, move to previous node but do not select.
Ctrl + Space Select or Unselect focused node.
Shift + Left Arrow or Shift + Up Arrow Move focus and multi-select previous node.
Shift + Right Arrow or Down + Up Arrow Move focus and multi-select next node.

Performance

Animation

Animation should only be enabled for visualizations of small to medium data sets. Alternate visualizations should be considered if identifying data changes is important, since all nodes will generally move and resize on any data change.

Data Set Size

Applications should avoid setting very large data densities on this element. Applications can enable progressive reveal of data through drilling or aggregate small nodes to reduce the displayed data set size.

Styling

Use the highest level property available. For example, consider setting styling properties on styleDefaults.nodeDefaults, instead of styling properties on the individual nodes. The nbox can take advantage of these higher level properties to apply the style properties on containers, saving expensive DOM calls.

Tracking Resize

By default, the element will track resizes and render at the new size. This functionality adds a small overhead to the initial render for simple elements like gauges or spark charts, which become noticable when using large numbers of these simple elements. To disable resize tracking, set trackResize to off. The application can manually request a re-render at any time by calling the refresh function.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the component must be refresh()ed.

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

animation-on-data-change :string

Specifies the animation that is applied on data changes.
Supported Values:
Name Type
"auto" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property animationOnDataChange
Property change event animationOnDataChangeChanged
Property change listener attribute (must be of type function) on-animation-on-data-change-changed

animation-on-display :string

Specifies the animation that is shown on initial display.
Supported Values:
Name Type
"auto" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function) on-animation-on-display-changed

cell-content :string

The content the cells will display. "auto" switches between nodes and cell counts based on available space. "counts" forces the NBox to always render cell counts.
Supported Values:
Name Type
"auto" string
"counts" string
Default Value:
  • "auto"
Names
Item Name
Property cellContent
Property change event cellContentChanged
Property change listener attribute (must be of type function) on-cell-content-changed

cell-maximize :string

Whether or not the cell maximize/de-maximize gestures are enabled.
Supported Values:
Name Type
"off" string
"on" string
Default Value:
  • "on"
Names
Item Name
Property cellMaximize
Property change event cellMaximizeChanged
Property change listener attribute (must be of type function) on-cell-maximize-changed

cells :Array.<Object>|Promise|null

The list of cells. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Default Value:
  • null
Names
Item Name
Property cells
Property change event cellsChanged
Property change listener attribute (must be of type function) on-cells-changed

cells[].column :string

The id of the column containing this cell.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].label :string

The text for the cell label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].labelHalign :string

The halign value for the cell label.
Supported Values:
Name Type
"center" string
"end" string
"start" string
Default Value:
  • "start"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].labelStyle :Object

The CSS style object defining the style of the cell label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].maximizedSvgClassName :string

The CSS style class for this cell. Used for customizing the maximized cell background and border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].maximizedSvgStyle :Object

The CSS style object for this cell. Used for customizing the maximized cell background and border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].minimizedSvgClassName :string

The CSS style class for this cell. Used for customizing the minimized cell background and border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].minimizedSvgStyle :Object

The CSS style object for this cell. Used for customizing the minimized cell background and border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].row :string

The id of the row containing this cell.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].shortDesc :string

The description of this cell. This is used for accessibility.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].showCount :string

Determines when to display the cell count label (extra info displayed after primary cell label). "off" never show the count label. "on" always show the count label. Show countLabel value if specified, otherwise use a simple node count. "auto" show the count label if countLabel attribute is defined.
Supported Values:
Name Type
"auto" string
"off" string
"on" string
Default Value:
  • "auto"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].svgClassName :string

The CSS style class for this cell. Used for customizing the cell background and border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

cells[].svgStyle :Object

The CSS style object for this cell. Used for customizing the cell background and border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns :Array.<Object>|Promise|null

The list of columns. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Default Value:
  • null
Names
Item Name
Property columns
Property change event columnsChanged
Property change listener attribute (must be of type function) on-columns-changed

columns[].id :string

The id of the column. Used to identify this column.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].label :string

The text for the column label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].labelStyle :Object

The CSS style object defining the style of the column label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns-title :string

The text for the title on the column edge.
Default Value:
  • ""
Names
Item Name
Property columnsTitle
Property change event columnsTitleChanged
Property change listener attribute (must be of type function) on-columns-title-changed

count-label :(function(Object)|null)

A function that returns custom text for the cell count labels (extra info displayed after primary labels). The function takes a dataContext argument, provided by the NBox, with the following properties:
  • row: The row value of the cell.
  • column: The column value of the cell.
  • nodeCount: The number of non-hidden nodes in the cell.
  • totalNodeCount: The number of non-hidden nodes in the NBox.
  • highlightedNodeCount: The number of highlighted nodes in the cell.
The custom count label is shown by a cell when its showCount attribute is set "on" or "auto".
Default Value:
  • null
Names
Item Name
Property countLabel
Property change event countLabelChanged
Property change listener attribute (must be of type function) on-count-label-changed

group-attributes :Array.<string>

An array of attributes to style the group nodes with. Any attributes not listed will be ignored.
Supported Values:
Name Type
"color" string
"indicatorColor" string
"indicatorIconColor" string
"indicatorIconPattern" string
"indicatorIconShape" string
Default Value:
  • ["color", "indicatorColor", "indicatorIconShape", "indicatorIconColor", "indicatorIconPattern"]
Names
Item Name
Property groupAttributes
Property change event groupAttributesChanged
Property change listener attribute (must be of type function) on-group-attributes-changed

group-behavior :string

Specifies how nodes should be grouped.
Supported Values:
Name Type
"acrossCells" string
"none" string
"withinCell" string
Default Value:
  • "withinCell"
Names
Item Name
Property groupBehavior
Property change event groupBehaviorChanged
Property change listener attribute (must be of type function) on-group-behavior-changed

hidden-categories :Array.<string>

An array of category strings used for category filtering. Data items with a category in hiddenCategories will be filtered.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function) on-hidden-categories-changed

highlight-match :string

The matching condition for the highlightedCategories property. By default, highlightMatch is 'all' and only items whose categories match all of the values specified in the highlightedCategories array will be highlighted. If highlightMatch is 'any', then items that match at least one of the highlightedCategories values will be highlighted.
Supported Values:
Name Type
"all" string
"any" string
Default Value:
  • "all"
Names
Item Name
Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function) on-highlight-match-changed

highlighted-categories :Array.<string>

An array of category strings used for category highlighting. Data items with a category in highlightedCategories will be highlighted.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function) on-highlighted-categories-changed

hover-behavior :string

Defines the behavior applied when hovering over data items.
Supported Values:
Name Type
"dim" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function) on-hover-behavior-changed

label-truncation :string

Determines node label truncation behavior. Labels are always truncated if limited by container (e.g. cell, dialog) width. Optionally, NBox can further truncate node labels to increase the number of nodes visible to the user. "on" allows label truncation to increase number of visible nodes. "ifRequired" only allows truncation when limited by container width.
Supported Values:
Name Type
"ifRequired" string
"on" string
Default Value:
  • "on"
Names
Item Name
Property labelTruncation
Property change event labelTruncationChanged
Property change listener attribute (must be of type function) on-label-truncation-changed

maximized-column :string

The id of the column to be maximized.
Default Value:
  • ""
Supports writeback:
  • true
Names
Item Name
Property maximizedColumn
Property change event maximizedColumnChanged
Property change listener attribute (must be of type function) on-maximized-column-changed

maximized-row :string

The id of the row to be maximized.
Default Value:
  • ""
Supports writeback:
  • true
Names
Item Name
Property maximizedRow
Property change event maximizedRowChanged
Property change listener attribute (must be of type function) on-maximized-row-changed

nodes :Array.<Object>|Promise|null

The list of nodes. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Default Value:
  • null
Names
Item Name
Property nodes
Property change event nodesChanged
Property change listener attribute (must be of type function) on-nodes-changed

nodes[].borderColor :string

The color of the node border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].borderWidth :number

The width of the node border.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].categories :Array.<string>

An optional array of additional category strings corresponding to this data item. This enables highlighting and filtering of individual data items through interactions with other visualization elements. Defaults to node's id if unspecified.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].color :string

The background color of this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].column :string

The column id for this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].groupCategory :string

The group category this node belongs to. Nodes with the same groupCategory will be grouped together.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon :Object

Defines the primary icon for this node.
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.borderColor :string

The border color of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.borderRadius :string

The border radius of this icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.borderWidth :number

The border width of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.color :string

The fill color of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.height :number

The height of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.opacity :number

The opacity of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.pattern :string

The fill pattern of this icon.
Supported Values:
Name Type
"largeChecker" string
"largeCrosshatch" string
"largeDiagonalLeft" string
"largeDiagonalRight" string
"largeDiamond" string
"largeTriangle" string
"none" string
"smallChecker" string
"smallCrosshatch" string
"smallDiagonalLeft" string
"smallDiagonalRight" string
"smallDiamond" string
"smallTriangle" string
Default Value:
  • "none"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.shape :string

The shape of this icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
Supported Values:
Name Type
"circle" string
"diamond" string
"ellipse" string
"human" string
"plus" string
"rectangle" string
"square" string
"star" string
"triangleDown" string
"triangleUp" string
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.source :string

The URL of an image to display for this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.svgClassName :string

The CSS style class defining the style of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.svgStyle :Object

The CSS style object defining the style of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].icon.width :number

The width of this icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].id :string

The id of this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorColor :string

The background color for the indicator section of this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon :Object

Defines the indicator icon for this node.
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.borderColor :string

The border color of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.borderRadius :string

The border radius of this indicator icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.borderWidth :number

The border width of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.color :string

The fill color of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.height :number

The height of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.opacity :number

The opacity of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.pattern :string

The fill pattern of this indicator icon.
Supported Values:
Name Type
"largeChecker" string
"largeCrosshatch" string
"largeDiagonalLeft" string
"largeDiagonalRight" string
"largeDiamond" string
"largeTriangle" string
"none" string
"smallChecker" string
"smallCrosshatch" string
"smallDiagonalLeft" string
"smallDiagonalRight" string
"smallDiamond" string
"smallTriangle" string
Default Value:
  • "none"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.shape :string

The shape of this indicator icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
Supported Values:
Name Type
"circle" string
"diamond" string
"ellipse" string
"human" string
"plus" string
"rectangle" string
"square" string
"star" string
"triangleDown" string
"triangleUp" string
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.source :string

The URL of an image to display for this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.svgClassName :string

The CSS style class defining the style of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.svgStyle :Object

The CSS style object defining the style of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].indicatorIcon.width :number

The width of this indicator icon.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].label :string

The text for the node label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].row :string

The row id for this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].secondaryLabel :string

The text for the secondary node label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].shortDesc :string

The description of this node. This is used for accessibility and also for customizing the tooltip text.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].svgClassName :string

The CSS style class defining the style of this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].svgStyle :Object

The CSS style object defining the style of this node.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].xPercentage :number

An optional horizontal position (as a percentage) to be used in the average position calculation when grouping across cells.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

nodes[].yPercentage :number

An optional vertical position (as a percentage) to be used in the average position calculation when grouping across cells.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

other-color :string

The color for the "other" group nodes which aggregate any group nodes that fall below the otherThreshold, if specified. The default value varies based on theme.
Names
Item Name
Property otherColor
Property change event otherColorChanged
Property change listener attribute (must be of type function) on-other-color-changed

other-threshold :number

A percentage (0-1) of the nodes collection size that determines the value beneath which any groups will be aggregated into an "other" node.
Default Value:
  • 0
Names
Item Name
Property otherThreshold
Property change event otherThresholdChanged
Property change listener attribute (must be of type function) on-other-threshold-changed

rows :Array.<Object>|Promise|null

The list of rows. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Default Value:
  • null
Names
Item Name
Property rows
Property change event rowsChanged
Property change listener attribute (must be of type function) on-rows-changed

rows[].id :string

The id of the row. Used to identify this row.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

rows[].label :string

The text for the row label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

rows[].labelStyle :Object

The CSS style object defining the style of the row label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

rows-title :string

The text for the title on the row edge.
Default Value:
  • ""
Names
Item Name
Property rowsTitle
Property change event rowsTitleChanged
Property change listener attribute (must be of type function) on-rows-title-changed

selection :Array.<string>

An array containing the ids of the selected nodes.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function) on-selection-changed

selection-mode :string

Specifies the selection mode.
Supported Values:
Name Type
"multiple" string
"none" string
"single" string
Default Value:
  • "multiple"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function) on-selection-mode-changed

style-defaults :Object

An object defining the style defaults for this NBox.
Names
Item Name
Property styleDefaults
Property change event styleDefaultsChanged
Property change listener attribute (must be of type function) on-style-defaults-changed

style-defaults.animation-duration :number

The duration of the animations in milliseconds. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.animationDuration

style-defaults.cell-defaults :Object

An object defining the style defaults for cells.
Names
Item Name
Property styleDefaults.cellDefaults

style-defaults.cell-defaults.label-halign :string

The halign value for the cell label.
Supported Values:
Name Type
"center" string
"end" string
"start" string
Default Value:
  • "start"
Names
Item Name
Property styleDefaults.cellDefaults.labelHalign

style-defaults.cell-defaults.label-style :Object

The CSS style object defining the style of the cell labels. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.cellDefaults.labelStyle

style-defaults.cell-defaults.maximized-svg-style :Object

The CSS style object defining the styles of the cell background and border when the cell is maximized. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.cellDefaults.maximizedSvgStyle

style-defaults.cell-defaults.minimized-svg-style :Object

The CSS style object defining the styles of the cell background and border when the cell is minimized. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.cellDefaults.minimizedSvgStyle

style-defaults.cell-defaults.show-count :string

Determines when to display the cell count label (extra info displayed after primary cell label). "off" never show the count label. "on" always show the count label. Show countLabel value if specified, otherwise use a simple node count. "auto" show the count label if countLabel attribute is defined.
Supported Values:
Name Type
"auto" string
"off" string
"on" string
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.cellDefaults.showCount

style-defaults.cell-defaults.svg-style :Object

The CSS style object defining the styles of the cell background and border. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.cellDefaults.svgStyle

style-defaults.column-label-style :Object

The CSS style object defining the style of the column labels. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.columnLabelStyle

style-defaults.columns-title-style :Object

The CSS style object defining the style of the columns title. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.columnsTitleStyle

style-defaults.hover-behavior-delay :number

Specifies initial hover delay in ms for highlighting data items.
Default Value:
  • 200
Names
Item Name
Property styleDefaults.hoverBehaviorDelay

style-defaults.node-defaults :Object

An object defining the style defaults for nodes.
Names
Item Name
Property styleDefaults.nodeDefaults

style-defaults.node-defaults.border-color :string

The default color of the node borders. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.borderColor

style-defaults.node-defaults.border-width :number

The default width of the node borders. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.borderWidth

style-defaults.node-defaults.color :string

The default background color of the nodes. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.color

style-defaults.node-defaults.icon-defaults :Object

An object defining the style defaults for the node icons.
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults

style-defaults.node-defaults.icon-defaults.border-color :string

The default border color of the node icons. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.borderColor

style-defaults.node-defaults.icon-defaults.border-radius :string

The default border radius of the node icons. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.borderRadius

style-defaults.node-defaults.icon-defaults.border-width :number

The default border width of the node icons. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.borderWidth

style-defaults.node-defaults.icon-defaults.color :string

The default fill color of the node icons.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.color

style-defaults.node-defaults.icon-defaults.height :number

The default height of the node icons. If the value is 0, the height will be automatically based on the remaining node contents.
Default Value:
  • 0
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.height

style-defaults.node-defaults.icon-defaults.opacity :number

The default opacity of the node icons.
Default Value:
  • 1
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.opacity

style-defaults.node-defaults.icon-defaults.pattern :string

The default fill pattern of the node icons.
Supported Values:
Name Type
"largeChecker" string
"largeCrosshatch" string
"largeDiagonalLeft" string
"largeDiagonalRight" string
"largeDiamond" string
"largeTriangle" string
"none" string
"smallChecker" string
"smallCrosshatch" string
"smallDiagonalLeft" string
"smallDiagonalRight" string
"smallDiamond" string
"smallTriangle" string
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.pattern

style-defaults.node-defaults.icon-defaults.shape :string

The default shape of the node icons. Can take the name of a built-in shape or the svg path commands for a custom shape.
Supported Values:
Name Type Argument
"circle" string <optional>
"diamond" string <optional>
"ellipse" string <optional>
"human" string <optional>
"plus" string <optional>
"rectangle" string <optional>
"square" string <optional>
"star" string <optional>
"triangleDown" string <optional>
"triangleUp" string <optional>
Default Value:
  • "square"
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.shape

style-defaults.node-defaults.icon-defaults.source :string

The URL of an image to display by default for the node icons.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.source

style-defaults.node-defaults.icon-defaults.width :number

The default width of the node icons. If the value is 0, the width will be automatically based on the remaining node contents.
Default Value:
  • 0
Names
Item Name
Property styleDefaults.nodeDefaults.iconDefaults.width

style-defaults.node-defaults.indicator-color :string

The default background color of the node indicator sections.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorColor

style-defaults.node-defaults.indicator-icon-defaults :Object

An object defining the style defaults for the node indicator icons.
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults

style-defaults.node-defaults.indicator-icon-defaults.border-color :string

The default border color of the node indicator icons. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.borderColor

style-defaults.node-defaults.indicator-icon-defaults.border-radius :string

The default border radius of the node indicator icons. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.borderRadius

style-defaults.node-defaults.indicator-icon-defaults.border-width :number

The default border width of the node indicator icons. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.borderWidth

style-defaults.node-defaults.indicator-icon-defaults.color :string

The default fill color of the node indicator icons.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.color

style-defaults.node-defaults.indicator-icon-defaults.height :number

The default height of the node indicator icons. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.height

style-defaults.node-defaults.indicator-icon-defaults.opacity :number

The default opacity of the node indicator icons.
Default Value:
  • 1
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.opacity

style-defaults.node-defaults.indicator-icon-defaults.pattern :string

The default fill pattern of the node indicator icons.
Supported Values:
Name Type
"largeChecker" string
"largeCrosshatch" string
"largeDiagonalLeft" string
"largeDiagonalRight" string
"largeDiamond" string
"largeTriangle" string
"none" string
"smallChecker" string
"smallCrosshatch" string
"smallDiagonalLeft" string
"smallDiagonalRight" string
"smallDiamond" string
"smallTriangle" string
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.pattern

style-defaults.node-defaults.indicator-icon-defaults.shape :string

The default shape of the node indicator icons. Can take the name of a built-in shape or the svg path commands for a custom shape.
Supported Values:
Name Type Argument
"circle" string <optional>
"diamond" string <optional>
"ellipse" string <optional>
"human" string <optional>
"plus" string <optional>
"rectangle" string <optional>
"square" string <optional>
"star" string <optional>
"triangleDown" string <optional>
"triangleUp" string <optional>
Default Value:
  • "square"
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.shape

style-defaults.node-defaults.indicator-icon-defaults.source :string

The URL of an image to display by default for the node indicator icons.
Default Value:
  • null
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.source

style-defaults.node-defaults.indicator-icon-defaults.width :number

The default width of the node indicator icons. The default value varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.indicatorIconDefaults.width

style-defaults.node-defaults.label-style :Object

The CSS style object defining the style of the node labels. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.labelStyle

style-defaults.node-defaults.secondary-label-style :Object

The CSS style object defining the style of the node secondary labels. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.nodeDefaults.secondaryLabelStyle

style-defaults.row-label-style :Object

The CSS style object defining the style of the row labels. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.rowLabelStyle

style-defaults.rows-title-style :Object

The CSS style object defining the style of the rows title. The default value comes from the CSS and varies based on theme.
Default Value:
  • null
Names
Item Name
Property styleDefaults.rowsTitleStyle

tooltip :Object

An object containing an optional callback function for tooltip customization.
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function) on-tooltip-changed

tooltip.renderer :(function(Object)|null)

A function that returns a custom tooltip for the NBox nodes. The function takes a dataContext argument, provided by the NBox, with the following properties:
  • parentElement: The tooltip element. The function can directly modify or append content to this element.
  • id: The id of the hovered node.
  • label: The label of the hovered node.
  • secondaryLabel: The secondary label of the hovered node.
  • color: The color of the hovered node.
  • indicatorColor: The indicator color of the hovered node.
  • row: The id of the row containing the hovered node.
  • column: The id of the column containing the hovered node.
  • componentElement: The NBox element.
The function should return an Object that contains only one of the two properties:
  • insert: HTMLElement | string - An HTML element, which will be appended to the tooltip, or a tooltip string.
  • preventDefault: true - Indicates that the tooltip should not be displayed. It is not necessary to return {preventDefault:false} to display tooltip, since this is a default behavior.
Default Value:
  • null
Names
Item Name
Property tooltip.renderer

touch-response :string

Data visualizations require a press and hold delay before triggering tooltips and rollover effects on mobile devices to avoid interfering with page panning, but these hold delays can make applications seem slower and less responsive. For a better user experience, the application can remove the touch and hold delay when data visualizations are used within a non scrolling container or if there is sufficient space outside of the visualization for panning. If touchResponse is touchStart the element will instantly trigger the touch gesture and consume the page pan events if the element does not require an internal feature that requires a touch start gesture like scrolling. If touchResponse is auto, the element will behave like touchStart if it determines that it is not rendered within scrolling content and if panning is not available for those elements that support the feature.
Supported Values:
Name Type
"auto" string
"touchStart" string
Default Value:
  • "auto"
Names
Item Name
Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function) on-touch-response-changed

track-resize :string

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.
Supported Values:
Name Type
"off" string
"on" string
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function) on-track-resize-changed
Examples

Initialize the data visualization element with the track-resize attribute specified:

<oj-some-dvt track-resize='off'></oj-some-dvt>

Get or set the trackResize property after initialization:

// getter
var value = myComponent.trackResize;

// setter
myComponent.trackResize="off";

translations :Object|null

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 the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

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

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'
};

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "NBox"
Names
Item Name
Property translations.componentName

(nullable) translations.highlighted-count :string

Used to indicate number of highlighted nodes in a cell.

See the translations attribute for usage examples.

Default Value:
  • "{0}/{1}"
Names
Item Name
Property translations.highlightedCount

(nullable) translations.label-additional-data :string

Used for node overflow button

See the translations attribute for usage examples.

Default Value:
  • "Additional Data"
Names
Item Name
Property translations.labelAdditionalData

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:
  • "{0}: {1}"
Names
Item Name
Property translations.labelAndValue

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:
  • "Clear Selection"
Names
Item Name
Property translations.labelClearSelection

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:
  • "{0} of {1}"
Names
Item Name
Property translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Data Visualization"
Names
Item Name
Property translations.labelDataVisualization

(nullable) translations.label-group :string

Used to indicate group info for nbox drawer and group nodes for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Group"
Names
Item Name
Property translations.labelGroup

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:
  • "Invalid data"
Names
Item Name
Property translations.labelInvalidData

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:
  • "No data to display"
Names
Item Name
Property translations.labelNoData

(nullable) translations.label-other :string

Used for the other label which aggregates small data values.

See the translations attribute for usage examples.

Default Value:
  • "Other"
Names
Item Name
Property translations.labelOther

(nullable) translations.label-size :string

Used to indicate size of node drawer and group nodes for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Size"
Names
Item Name
Property translations.labelSize

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Collapsed"
Names
Item Name
Property translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Drillable"
Names
Item Name
Property translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Expanded"
Names
Item Name
Property translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Hidden"
Names
Item Name
Property translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Isolated"
Names
Item Name
Property translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Maximized"
Names
Item Name
Property translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Minimized"
Names
Item Name
Property translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Selected"
Names
Item Name
Property translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Unselected"
Names
Item Name
Property translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Visible"
Names
Item Name
Property translations.stateVisible

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-nbox-cell

Context for NBox cell with specified row and column values.

Properties:
Name Type Description
row string The id of the row.
column string The id of the column.

oj-nbox-dialog

Context for NBox group node dialog.

oj-nbox-group-node

Context for NBox group node with specified groupCategory value. When grouping is enabled within cells rather than across cells, the row and column ids of the cell should be provided.

Properties:
Name Type Description
row string The id of the row of the associated cell, if one exists.
column string The id of the column of the associated cell, if one exists.
groupCategory string The category represented by the returned group node.

oj-nbox-node

Context for NBox node with specified id.

Properties:
Name Type Description
id string The id of the node.

Methods

getCell(rowValue, columnValue) → {Object|null}

Returns an object with the following properties for automation testing verification of the NBox cell at the specified row and column values.
Parameters:
Name Type Description
rowValue string The id of the containing row.
columnValue string The id of the containing column.
Properties:
Name Type Description
background string The background of the cell.
label string The label of the cell.
getGroupNode Function(string) A function taking a group category string and returning the corresponding group node.
Properties
Name Type Description
color string The color of the group node.
indicatorColor string The color of the group node indicator section.
indicatorIcon Object The indicator marker for the group node.
Properties
Name Type Description
color string The color of the indicator marker.
shape string The shape of the indicator marker.
selected boolean Whether or not the group node is selected.
size number The number of nodes the group node represents.
tooltip string The tooltip of the group node.
getNode Function(number) A function taking the node index that returns an object with properties for the specified node, or null if none exists.
Properties
Name Type Description
color string The color of the node.
icon Object The icon marker for the node.
Properties
Name Type Description
color string The color of the icon marker.
shape string The shape of the icon marker.
indicatorColor string The color of the node indicator section.
indicatorIcon Object The indicator marker for the node.
Properties
Name Type Description
color string The color of the indicator marker.
shape string The shape of the indicator marker.
label string The label of the node.
secondaryLabel string The secondary label of the node.
selected boolean Whether or not the node is selected.
tooltip string The tooltip of the node.
getNodeCount Function A function that returns the number of nodes in the cell.
Returns:
An object containing properties for the cell, or null if none exists.
Type
Object | null

getColumn(columnValue) → {Object|null}

Returns an object with the following properties for automation testing verification of the NBox column at the specified value.
Parameters:
Name Type Description
columnValue string The id of the column.
Properties:
Name Type Description
label string The label of the column.
Returns:
An object containing properties for the column, or null if none exists.
Type
Object | null

getColumnCount() → {Number}

Get the NBox column count.
Returns:
NBox column count.
Type
Number

getColumnsTitle() → {String}

Get the NBox columns title.
Returns:
NBox columns title.
Type
String

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 Argument Description
node Element <not nullable>
 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);

getDialog() → {Object|null}

Returns an object with the following properties for automation testing verification of the currently active NBox dialog.
Properties:
Name Type Description
label string The label of the dialog.
getNode Function(number) A function taking the node index that returns an object with properties for the specified node, or null if none exists.
Properties
Name Type Description
selected boolean
color string The color of the node.
icon Object The icon marker for the node, or null if none exists.
Properties
Name Type Description
color string The color of the icon marker.
shape string The shape of the icon marker.
indicatorColor string The indicator color of the node.
indicatorIcon Object The indicator icon for the node, or null if none exists.
Properties
Name Type Description
color string The color of the indicator icon.
shape string The shape of the indicator icon.
label string The label of the node.
secondaryLabel string The secondary label of the node.
tooltip string The tooltip of the node.
getNodeCount Function A function that returns the number of nodes in the cell.
Returns:
An object containing properties for the dialog, or null if none exists.
Type
Object | null

getGroupBehavior() → {String}

Get the NBox group behavior.
Returns:
group behavior The group behavior of the NBox ('withinCell', 'acrossCells', 'none').
Type
String

getGroupNode(groupCategory) → {Object|null}

Returns an object with the following properties for automation testing verification of the NBox group node with the specified group category string.
Parameters:
Name Type Description
groupCategory String A string corresponding to the groupCategory value of the nodes represented by this group node.
Properties:
Name Type Description
color string The color of the group node.
indicatorColor string The indicator color of the group node.
indicatorIcon Object The indicator marker for the group node, or null if none exists.
Properties
Name Type Description
color string The color of the indicator marker.
shape string The shape of the indicator marker.
selected boolean Whether or not the group node is selected.
size number The number of nodes the group node represents.
tooltip string The tooltip of the group node.
Returns:
An object containing properties for the group node, or null if none exists.
Type
Object | null

getProperty(property) → {any}

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.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

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

getRow(rowValue) → {Object|null}

Returns an object with the following properties for automation testing verification of the NBox row at the specified value.
Parameters:
Name Type Description
rowValue string The id of the row.
Properties:
Name Type Description
label string The label of the row.
Returns:
An object containing properties for the row, or null if none exists.
Type
Object | null

getRowCount() → {Number}

Get the NBox row count.
Returns:
NBox row count.
Type
Number

getRowsTitle() → {String}

Get the NBox rows title.
Returns:
NBox rows title.
Type
String

refresh() → {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) → {void}

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

Set a batch of properties:

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

setProperty(property, value) → {void}

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 any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

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