Element: <oj-n-box>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojNBox<K, D extends ojNBox.Node<K>|any>

QuickNav

Attributes


Context Objects

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:
  • 7.1.0
Since:
  • 1.1.0
Module:
  • ojnbox

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojNBox} from "ojs/ojnbox";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojnbox";
Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


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 components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

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 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.

nodeTemplate

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

The nodeTemplate slot is used to specify the template for creating each node of the NBox when a DataProvider has been specified with the data attribute. The slot must be a <template> element.

When the template is executed for each node, it will have access to the NBox's binding context and the following properties:

  • $current - an object that contains information for the current node
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

The content of the template should only be one <oj-n-box-node> element. See the oj-n-box-node doc for more details.

Properties of $current:
Name Type Description
componentElement Element The <oj-n-box> custom element.
data Object The data object for the current node.
index number The zero-based index of the current node.
key any The key of the current node.

tooltipTemplate

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

The tooltipTemplate slot is used to specify custom tooltip content. This slot takes precedence over the tooltip.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current node. (See oj.ojNBox.TooltipContext for a list of properties available on $current)

Attributes

animation-on-data-change :"auto"|"none"

Specifies the animation that is applied on data changes.
Supported Values:
Value
"auto"
"none"
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 :"auto"|"none"

Specifies the animation that is shown on initial display.
Supported Values:
Value
"auto"
"none"
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

as :string

An alias for the $current context variable when referenced inside nodeTemplate when using a DataProvider.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.
Default Value:
  • ''
Names
Item Name
Property as
Property change event asChanged
Property change listener attribute (must be of type function) on-as-changed

cell-content :"counts"|"auto"

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:
Value
"auto"
"counts"
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 :"off"|"on"

Whether or not the cell maximize/de-maximize gestures are enabled.
Supported Values:
Value
"off"
"on"
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.<oj.ojNBox.Cell>|Promise.<Array.<oj.ojNBox.Cell>>|null)

The list of cells. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Type details
Setter Type(Array.<oj.ojNBox.Cell>|Promise.<Array.<oj.ojNBox.Cell>>|null)
Getter Type(Promise.<Array.<oj.ojNBox.Cell>>|null)
Default Value:
  • null
Names
Item Name
Property cells
Property change event cellsChanged
Property change listener attribute (must be of type function) on-cells-changed
Example

set or get cells property:

let elem = document.getElementById('nbox') as ojNBox;
//set cells to Promise. Assuming that getCells is a method which returns type Promise>
elem.cells = getCells();
//or
elem.set('cells', getCells());

//set cells to an array of ojNBox.Cell
//elem.cells = [{row: '0', column: '0', label: '(0, 0)'},
//              {row: '0', column: '1', label: '(0, 1)'}]; Please note this wont compile. Use the format below
elem.set('cells', [{row: '0', column: '0', label: '(0, 0)'},
                   {row: '0', column: '1', label: '(0, 1)'}]);

//get cells property value
let cells = elem.cells; //This is guaranteed to be of the type Promise>|null

//reset the value of cells to its default,
elem.unset('cells');

columns :(Array.<oj.ojNBox.Column>|Promise.<Array.<oj.ojNBox.Column>>|null)

The list of columns. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Type details
Setter Type(Array.<oj.ojNBox.Column>|Promise.<Array.<oj.ojNBox.Column>>|null)
Getter Type(Promise.<Array.<oj.ojNBox.Column>>|null)
Default Value:
  • null
Names
Item Name
Property columns
Property change event columnsChanged
Property change listener attribute (must be of type function) on-columns-changed
Example

set or get columns property:

let elem = document.getElementById('nbox') as ojNBox;
//set columns to Promise. Assuming that getColumns is a method which returns type Promise>
elem.columns = getColumns();
//or
elem.set('columns', getColumns());

//set columns to an array of ojNBox.Column
//elem.columns = [{id: '0'},{id: '1'}]; Please note this wont compile. Use the format below
elem.set('columns', [{id: '0'},{id: '1'}]);

//get columns property value
let columns = elem.columns; //This is guaranteed to be of the type Promise>|null

//reset the value of columns to its default,
elem.unset('columns');

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 :((context: ojNBox.CountLabelContext) => (string|null))

A function that returns custom text for the cell count labels (extra info displayed after primary labels).
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

data :(oj.DataProvider.<K, D>|null)

The oj.DataProvider for the NBox. It should provide rows where each row corresponds to a single NBox node. The oj.DataProvider can either have an arbitrary data shape, in which case an element must be specified in the itemTemplate slot or it can have oj.ojNBox.Node as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function) on-data-changed

group-attributes :"color"|"indicatorColor"|"indicatorIconColor"|"indicatorIconPattern"|"indicatorIconShape"

An array of attributes to style the group nodes with. Any attributes not listed will be ignored.
Supported Values:
Value
"color"
"indicatorColor"
"indicatorIconColor"
"indicatorIconPattern"
"indicatorIconShape"
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 :"acrossCells"|"none"|"withinCell"

Specifies how nodes should be grouped.
Supported Values:
Value
"acrossCells"
"none"
"withinCell"
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 :"any"|"all"

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:
Value
"all"
"any"
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 matching categories 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 :"dim"|"none"

Defines the behavior applied when hovering over data items.
Supported Values:
Value
"dim"
"none"
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 :"ifRequired"|"on"

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:
Value
"ifRequired"
"on"
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.<oj.ojNBox.Node.<K>>|Promise.<Array.<oj.ojNBox.Node.<K>>>|null)

The list of nodes. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Type details
Setter Type(Array.<oj.ojNBox.Node.<K>>|Promise.<Array.<oj.ojNBox.Node.<K>>>|null)
Getter TypePromise<Array<ojNBox.Node<K>>|null
Default Value:
  • null
Names
Item Name
Property nodes
Property change event nodesChanged
Property change listener attribute (must be of type function) on-nodes-changed

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.<oj.ojNBox.Row>|Promise.<Array.<oj.ojNBox.Row>>|null)

The list of rows. Also accepts a Promise for deferred data rendering. No data will be rendered if the Promise is rejected.
Type details
Setter Type(Array.<oj.ojNBox.Row>|Promise.<Array.<oj.ojNBox.Row>>|null)
Getter Type(Promise.<Array.<oj.ojNBox.Row>>|null)
Default Value:
  • null
Names
Item Name
Property rows
Property change event rowsChanged
Property change listener attribute (must be of type function) on-rows-changed
Example

set or get rows property:

let elem = document.getElementById('nbox') as ojNBox;
//set rows to Promise. Assuming that getRows is a method which returns type Promise>
elem.rows = getRows();
//or
elem.set('rows', getRows());

//set rows to an array of ojNBox.Row
//elem.rows = [{id: '0'},{id: '1'}]; Please note this wont compile. Use the format below
elem.set('rows', [{id: '0'},{id: '1'}]);

//get rows property value
let rows = elem.rows; //This is guaranteed to be of the type Promise>|null

//reset the value of rows to its default,
elem.unset('rows');

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<K>

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 :"none"|"single"|"multiple"

Specifies the selection mode.
Supported Values:
Value
"multiple"
"none"
"single"
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 :"center"|"end"|"start"

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

style-defaults.cell-defaults.label-style :CSSStyleDeclaration

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

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

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 :"on"|"off"|"auto"

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:
Value
"auto"
"off"
"on"
Default Value:
  • "auto"
Names
Item Name
Property styleDefaults.cellDefaults.showCount

style-defaults.cell-defaults.svg-style :CSSStyleDeclaration

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

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

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 milliseconds 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 :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"none"

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

style-defaults.node-defaults.icon-defaults.shape :"circle"|"ellipse"|"square"|"plus"|"diamond"|"triangleUp"|"triangleDown"|"human"|"rectangle"|"star"

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:
Value Argument
"circle" <optional>
"diamond" <optional>
"ellipse" <optional>
"human" <optional>
"plus" <optional>
"rectangle" <optional>
"square" <optional>
"star" <optional>
"triangleDown" <optional>
"triangleUp" <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 :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"none"

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

style-defaults.node-defaults.indicator-icon-defaults.shape :"circle"|"ellipse"|"square"|"plus"|"diamond"|"triangleUp"|"triangleDown"|"human"|"rectangle"|"star"

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:
Value Argument
"circle" <optional>
"diamond" <optional>
"ellipse" <optional>
"human" <optional>
"plus" <optional>
"rectangle" <optional>
"square" <optional>
"star" <optional>
"triangleDown" <optional>
"triangleUp" <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 :CSSStyleDeclaration

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

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

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

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 :((context: ojNBox.TooltipContext<K>) => ({insert: Element|string}|{preventDefault: boolean}))|null

A function that returns a custom tooltip for the NBox nodes. The function takes a dataContext argument, provided by the NBox. 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 :"touchStart"|"auto"

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:
Value
"auto"
"touchStart"
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 :"on"|"off"

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:
Value
"off"
"on"
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

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

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "{0} Box"
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 K 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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
NBox column count.
Type
Number

getColumnsTitle() → {String}

Get the NBox columns title.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
NBox columns title.
Type
String

getContextByNode(node) → {(oj.ojNBox.NodeContext.<K>|oj.ojNBox.CellContext|oj.ojNBox.DialogContext|oj.ojNBox.GroupNodeContext|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
(oj.ojNBox.NodeContext.<K>|oj.ojNBox.CellContext|oj.ojNBox.DialogContext|oj.ojNBox.GroupNodeContext|null)

getDialog() → {Object|null}

Returns an object with the following properties for automation testing verification of the currently active NBox dialog.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
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 the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
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:

let 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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
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.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
NBox row count.
Type
Number

getRowsTitle() → {String}

Get the NBox rows title.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
NBox rows title.
Type
String

refresh() → {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) → {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
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 subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
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");

Type Definitions

Cell

Properties:
Name Type Argument Default Description
label string <optional>
The text for the cell label.
column string The id of the column containing this cell.
labelHalign string <optional>
The halign value for the cell label.
labelStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of the cell label.
svgClassName string <optional>
The CSS style class for this cell. Used for customizing the cell background and border.
svgStyle CSSStyleDeclaration <optional>
The CSS style object for this cell. Used for customizing the cell background and border.
maximizedSvgStyle CSSStyleDeclaration <optional>
The CSS style object for this cell. Used for customizing the maximized cell background and border.
maximizedSvgClassName string <optional>
The CSS style class for this cell. Used for customizing the minimized cell background and border.
minimizedSvgStyle CSSStyleDeclaration <optional>
The CSS style object for this cell. Used for customizing the minimized cell background and border.
minimizedSvgClassName string <optional>
The CSS style class for this cell. Used for customizing the minimized cell background and border.
row string The id of the row containing this cell.
showCount "on" | "off" | "auto" <optional>
"auto" 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.
shortDesc string <optional>
The description of this cell. This is used for accessibility.

CellContext

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.
subId "oj-nbox-cell" Identifies the type of the associated DOM node.

Column

Properties:
Name Type Argument Description
id string The id of the column. Used to identify this column.
label string <optional>
The text for the column label.
labelStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of the column label.

CountLabelContext

Properties:
Name Type Description
row string The row value of the cell.
column string The column value of the cell.
nodeCount number The number of non-hidden nodes in the cell.
totalNodeCount number The number of non-hidden nodes in the NBox.
highlightedNodeCount number The number of highlighted nodes in the cell.

DialogContext

Context for NBox group node dialog.
Properties:
Name Type Description
subId "oj-nbox-dialog" Identifies the type of the associated DOM node.

GroupNodeContext

Context for NBox node with specified id.
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.
subId "oj-nbox-group-node" Identifies the type of the associated DOM node.

Node<K>

Properties:
Name Type Argument Description
id K <optional>
The node id. The node id should be set by the application if the DataProvider is not being used.
borderColor string <optional>
The border color of the node. Does not apply if custom image is specified.
borderWidth number <optional>
The border width of the node in pixels. Does not apply if custom image is specified.
categories Array.<string> <optional>
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.
color string <optional>
The color of the node. Does not apply if custom image is specified.
column string The column id for this node.
groupCategory string <optional>
The group category this node belongs to. Nodes with the same groupCategory will be grouped together.
icon Object <optional>
Defines the primary icon for this node.
Properties
Name Type Argument Description
borderColor string <optional>
The border color of this icon.
borderRadius string <optional>
The border radius of this icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
borderWidth number <optional>
The border width of this icon.
color string <optional>
The fill color of this icon.
height number <optional>
The height of this icon.
opacity number <optional>
The opacity of this icon.
pattern "largeChecker" | "largeCrosshatch" | "largeDiagonalLeft" | "largeDiagonalRight" | "largeDiamond" | "largeTriangle" | "none" | "smallChecker" | "smallCrosshatch" | "smallDiagonalLeft" | "smallDiagonalRight" | "smallDiamond" | "smallTriangle" <optional>
The pattern of this icon.
shape "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string <optional>
The shape of this icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
source string <optional>
The URL of an image to display for this icon.
svgClassName string <optional>
The CSS style class defining the style of this icon.
svgStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of this icon.
width number <optional>
The width of this icon.
indicatorColor string <optional>
The background color for the indicator section of this node.
indicatorIcon Object <optional>
Defines the indicator icon for this node.
Properties
Name Type Argument Description
borderColor string <optional>
The border color of this indicator icon.
borderRadius string <optional>
The border radius of this indicator icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
borderWidth number <optional>
The border width of this indicator icon.
color string <optional>
The fill color of this indicator icon.
height number <optional>
The height of this indicator icon.
opacity number <optional>
The opacity of this indicator icon.
pattern "largeChecker" | "largeCrosshatch" | "largeDiagonalLeft" | "largeDiagonalRight" | "largeDiamond" | "largeTriangle" | "none" | "smallChecker" | "smallCrosshatch" | "smallDiagonalLeft" | "smallDiagonalRight" | "smallDiamond" | "smallTriangle" <optional>
The pattern of this indicator icon.
shape "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string <optional>
The shape of this indicator icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
source string <optional>
The URL of an image to display for this indicator icon.
svgClassName string <optional>
The CSS style class defining the style of this indicator icon.
svgStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of this indicator icon.
width number <optional>
The width of this indicator icon.
row string The row id for this node.
label string <optional>
The text for the node label.
secondaryLabel string <optional>
The text for the secondary node label.
svgClassName string <optional>
The CSS style class defining the style of this node.
svgStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of this node.
xPercentage number <optional>
An optional horizontal position (as a percentage) to be used in the average position calculation when grouping across cells.
yPercentage number <optional>
An optional vertical position (as a percentage) to be used in the average position calculation when grouping across cells.
shortDesc string <optional>
The description of this node. This is used for accessibility and also for customizing the tooltip text.

NodeContext<K>

Context for NBox node with specified id.
Properties:
Name Type Description
id K The id of the node.
subId "oj-nbox-node" Identifies the type of the associated DOM node.

Row

Properties:
Name Type Argument Description
id string The id of the row. Used to identify this row.
label string <optional>
The text for the row label.
labelStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of the row label.

TooltipContext<K>

Properties:
Name Type Description
parentElement Element The tooltip element. The function can directly modify or append content to this element.
id K The id of the hovered node.
label string The label of the hovered node.
secondaryLabel string The secondaryLabel of the hovered node.
row string The id of the row containing the hovered node.
column string The id of the column containing the hovered node.
color string The color of the hovered node.
indicatorColor string The indicator color of the hovered node.
componentElement Element The nbox HTML element.