Element: <oj-n-box>

Styling

CSS Variables

See JET CSS Variables for additional details.

Name	Type	Description
--oj-n-box-cell-bg-color	<color>	Nbox cell background color
--oj-n-box-cell-bg-color-maximized	<color>	Nbox maximized cell background color

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

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 content must be a single <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. (See oj.ojNBox.NodeTemplateContext or the table below for a list of properties available on $current)
• alias - if data-oj-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

The tooltipTemplate slot is used to specify custom tooltip content. The slot content must be a single <template> element. 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 or the table below for a list of properties available on $current)

Properties of $current:

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

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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	on-count-label-changed

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

The DataProvider for the NBox. It should provide rows where each row corresponds to a single NBox node. The 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, see Events and Listeners for additional information.)	on-data-changed

data-transfer-options :Object

Enables or disables data transfer features on the nbox.

Names

Item	Name
Property	dataTransferOptions
Property change event	dataTransferOptionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.)	on-data-transfer-options-changed

data-transfer-options.copy :"disable"|"enable"

Enables or disables keyboard copy on Nbox.

Supported Values:

Value
disable
enable

Default Value:

• 'disable'

Names

Item	Name
Property	dataTransferOptions.copy

data-transfer-options.cut :"disable"|"enable"

Enables or disables keyboard cut on Nbox.

Supported Values:

Value
disable
enable

Default Value:

• 'disable'

Names

Item	Name
Property	dataTransferOptions.cut

data-transfer-options.paste :"disable"|"enable"

Enables or disables keyboard paste on Nbox.

Supported Values:

Value
disable
enable

Default Value:

• 'disable'

Names

Item	Name
Property	dataTransferOptions.paste

dnd :Object

Provides support for HTML5 Drag and Drop events. Please refer to third party documentation on HTML5 Drag and Drop to learn how to use it.

Names

Item	Name
Property	dnd
Property change event	dndChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.)	on-dnd-changed

dnd.drag :oj.ojNBox.DndDragConfigs.<K>

An object that describes drag functionality.

Names

Item	Name
Property	dnd.drag

dnd.drop :oj.ojNBox.DndDropConfigs

An object that describes drop functionality.

Names

Item	Name
Property	dnd.drop

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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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 Type	Promise<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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	on-selection-changed

selection-mode :"none"|"single"|"multiple"

The type of selection behavior that is enabled on the NBox. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the NBox's selection styling will be applied to all items specified by the selection attribute. If none is specified, selection gestures will be disabled, and the NBox's selection styling will not be applied to any items specified by the selection attribute.

Changing the value of this attribute will not affect the value of the selection attribute.

Supported Values:

Value	Description
multiple	Multiple items can be selected at the same time.
none	Selection is disabled.
single	Only a single item can be selected at a time.

Default Value:

• "multiple"

Names

Item	Name
Property	selectionMode
Property change event	selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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 horizontal alignment 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 :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the cell labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. 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 :Partial<CSSStyleDeclaration>

The CSS style object defining the styles of the cell background and border when the cell is maximized. Only SVG CSS style properties are supported. 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 :Partial<CSSStyleDeclaration>

The CSS style object defining the styles of the cell background and border when the cell is minimized. Only SVG CSS style properties are supported. 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 :Partial<CSSStyleDeclaration>

The CSS style object defining the styles of the cell background and border. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.

Names

Item	Name
Property	styleDefaults.cellDefaults.svgStyle

style-defaults.column-label-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the column labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. The default value comes from the CSS and varies based on theme.

Names

Item	Name
Property	styleDefaults.columnLabelStyle

style-defaults.columns-title-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the columns title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. 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.background :"neutral"|"red"|"orange"|"forest"|"green"|"teal"|"blue"|"slate"|"pink"|"mauve"|"purple"|"lilac"|"gray"|string style-defaults.node-defaults.icon-defaults.background :"neutral"|"orange"|"green"|"teal"|"blue"|"slate"|"pink"|"purple"|"lilac"|"gray"|string

The URL of an image to display by default for the node icons.

Supported Values:

Value	Argument	Description
blue	<optional>
forest	<optional>	Deprecated: Since Description 10.0.0 This value will be removed in the future. Please use other colors.
gray	<optional>
green	<optional>
lilac	<optional>
mauve	<optional>	Deprecated: Since Description 10.0.0 This value will be removed in the future. Please use other colors.
neutral	<optional>
orange	<optional>
pink	<optional>
purple	<optional>
red	<optional>	Deprecated: Since Description 10.0.0 This value will be removed in the future. Please use other colors.
slate	<optional>
teal	<optional>

Default Value:

• "neutral"

Names

Item	Name
Property	styleDefaults.nodeDefaults.iconDefaults.background

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

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

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

The CSS style object defining the style of the node labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. 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 :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the node secondary labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. The default value comes from the CSS and varies based on theme.

Names

Item	Name
Property	styleDefaults.nodeDefaults.secondaryLabelStyle

style-defaults.row-label-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the row labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. The default value comes from the CSS and varies based on theme.

Names

Item	Name
Property	styleDefaults.rowLabelStyle

style-defaults.rows-title-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the rows title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.

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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	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, see Events and Listeners for additional information.)	on-translations-changed

(nullable) translations.accessible-contains-controls :string

Used to describe a container that contains controls.

See the translations attribute for usage examples.

Since:

• 13.0.0

Names

Item	Name
Property	translations.accessibleContainsControls

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

Following are the valid subIds:

oj-nbox-cell

Context for NBox cell with specified row and column values.

Properties:

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

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
column	string	The id of the column of the associated cell, if one exists.
groupCategory	string	The category represented by the returned group node.
row	string	The id of the row of the associated cell, if one exists.

oj-nbox-node

Context for NBox node with specified id.

Properties:

Name	Type	Description
id	K	The id of the node.

Events

ojCopyRequest

Triggered when a user invokes a copy keyboard gesture. The application should listen to this event and track the node(s) that have been copied from the Nbox to perform a subsequent paste.

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
source	Array.<oj.ojNBox.CopyNode.<K>>	The list of nodes being copied.

ojCutRequest

Triggered when a user invokes a cut keyboard gesture. The application should listen to this event and track the node(s) that have been cut from the Nbox to perform a subsequent paste. The appropriate visual feedback will be automatically applied to the cut node(s).

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
source	Array.<oj.ojNBox.CutNode.<K>>	The list of nodes being cut.

ojPasteRequest

Triggered when a user invokes a paste keyboard gesture.

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
target	oj.ojNBox.PasteCell	The cell where the paste request happens.

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.
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.
label	string	The label of 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
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, 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. selected boolean tooltip string The tooltip of the node.
getNodeCount	Function	A function that returns the number of nodes in the cell.
label	string	The label of the dialog.

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
column	string			The id of the column containing this cell.
label	string	<optional>		The text for the cell label.
labelHalign	string	<optional>		The horizontal alignment value for the cell label.
labelStyle	Partial<CSSStyleDeclaration>	<optional>		The CSS style object defining the style of the cell label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration. The default value comes from the CSS and varies based on theme.
maximizedSvgClassName	string	<optional>		The CSS style class for this cell. Used for customizing the minimized cell background and border.
maximizedSvgStyle	Partial<CSSStyleDeclaration>	<optional>		The CSS style object for this cell. Used for customizing the maximized cell background and border. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.
minimizedSvgClassName	string	<optional>		The CSS style class for this cell. Used for customizing the minimized cell background and border.
minimizedSvgStyle	Partial<CSSStyleDeclaration>	<optional>		The CSS style object for this cell. Used for customizing the minimized cell background and border. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.
row	string			The id of the row containing this cell.
shortDesc	string	<optional>		The description of this cell. This is used for accessibility.
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.
svgClassName	string	<optional>		The CSS style class for this cell. Used for customizing the cell background and border.
svgStyle	Partial<CSSStyleDeclaration>	<optional>		The CSS style object for this cell. Used for customizing the cell background and border. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.

CellContext

Context for NBox cell with specified row and column values.

Properties:

Name	Type	Description
column	string	The id of the column.
row	string	The id of the row.
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	Partial<CSSStyleDeclaration>	<optional>	The CSS style object defining the style of the column label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.

CopyNode<K>

Properties:

Name	Type	Description
color	string	The color of the copy node.
column	string	The id of the column containing the copy node.
id	K	The id of the copy node.
indicatorColor	string	The indicator color of the copy node.
label	string	The label of the copy node.
row	string	The id of the row containing the copy node.
secondaryLabel	string	The secondaryLabel of the copy node.

CountLabelContext

Properties:

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

CutNode<K>

Properties:

Name	Type	Description
color	string	The color of the cut node.
column	string	The id of the column containing the cut node.
id	K	The id of the cut node.
indicatorColor	string	The indicator color of the cut node.
label	string	The label of the cut node.
row	string	The id of the row containing the cut node.
secondaryLabel	string	The secondaryLabel of the cut node.

DialogContext

Context for NBox group node dialog.

Properties:

Name	Type	Description
subId	"oj-nbox-dialog"	Identifies the type of the associated DOM node.

DndDragConfig<T>

Object type that allows dragging elements.

Properties:

Name	Type	Argument	Default	Description
dataTypes	string | Array.<string>	<optional>	null	The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. For example, if selected employee data items are being dragged, dataTypes could be "application/employees+json". Drop targets can examine the data types and decide whether to accept the data. For each type in the array, dataTransfer.setData will be called with the specified type and the data. The data is an array of the dataContexts of the selected data items. The dataContext is the JSON version of the dataContext that we use for "tooltip" option, excluding componentElement and parentElement. This property is required unless the application calls setData itself in a dragStart callback function.
drag	function(DragEvent)	<optional>	null	An optional callback function that receives the "drag" event as argument.
dragEnd	function(DragEvent)	<optional>	null	An optional callback function that receives the "dragend" event as argument.
dragStart	((event: DragEvent, context: T) => void)	<optional>	null	An optional callback function that receives the "dragstart" event and context information as arguments. This function can set its own data and drag image as needed. When this function is called, event.dataTransfer is already populated with the default data and drag image.

DndDragConfigs<K>

Object type that describes drag functionality.

Properties:

Name	Type	Argument	Description
nodes	oj.ojNBox.DndDragConfig.<ojNBox.DndDragNodes.<K>>	<optional>	Allows dragging of nbox nodes.

DndDragNode<K>

Properties:

Name	Type	Description
color	string	The color of the dragged node.
column	string	The id of the column containing the dragged node.
id	K	The id of the dragged node.
indicatorColor	string	The indicator color of the dragged node.
label	string	The label of the dragged node.
row	string	The id of the row containing the dragged node.
secondaryLabel	string	The secondaryLabel of the dragged node.

DndDragNodes<K>

Object type that describes drag nodes

Properties:

Name	Type	Argument	Description
nodes	Array.<oj.ojNBox.DndDragNode.<K>>	<optional>	Allows dragging of nbox nodes.

DndDropCell

Properties:

Name	Type	Description
column	string	The ID of the column of the event position.
row	string	The ID of the row of the event position.

DndDropConfig

Object type that allows dropping on an element.

Properties:

Name	Type	Argument	Default	Description
dataTypes	string | Array.<string>	<optional>	null	An array of MIME data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter	((event: DragEvent, context: ojNBox.DndDropCell) => void)	<optional>	null	An optional callback function that receives the "dragenter" event and context information as arguments. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
dragLeave	((event: DragEvent, context: ojNBox.DndDropCell) => void)	<optional>	null	An optional callback function that receives the "dragleave" event and context information as arguments.
dragOver	((event: DragEvent, context: ojNBox.DndDropCell) => void)	<optional>	null	An optional callback function that receives the "dragover" event and context information as arguments. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
drop	((event: DragEvent, context: ojNBox.DndDropCell) => void)	<optional>	null	An optional callback function that receives the "drop" event and context information as arguments. This function should call event.preventDefault() to indicate the dragged data can be accepted.

DndDropConfigs

Object type that describes drop functionality.

Properties:

Name	Type	Argument	Description
cells	oj.ojNBox.DndDropConfig	<optional>	Allows dropping on cells.

GroupNodeContext

Context for NBox node with specified id.

Properties:

Name	Type	Description
column	string	The id of the column of the associated cell, if one exists.
groupCategory	string	The category represented by the returned group node.
row	string	The id of the row of the associated cell, if one exists.
subId	"oj-nbox-group-node"	Identifies the type of the associated DOM node.

Node<K>

Properties:

Name	Type	Argument	Description
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 background "neutral" | "red" | "orange" | "forest" | "green" | "teal" | "mauve" | "purple" <optional> The background of initials 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. initials string <optional> The initials displayed for 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. Will not be applied if initials are specified. svgStyle Partial<CSSStyleDeclaration> <optional> The CSS style object defining the style of this icon. Only SVG CSS style properties are supported. Will not be applied if initials are specified. The default value comes from the CSS and varies based on theme. width number <optional> The width of this icon.
id	K	<optional>	The node id. The node id should be set by the application if the DataProvider is not being used.
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 Partial<CSSStyleDeclaration> <optional> The CSS style object defining the style of this indicator icon. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme. width number <optional> The width of this indicator icon.
label	string	<optional>	The text for the node label.
row	string		The row id for this node.
secondaryLabel	string	<optional>	The text for the secondary node label.
shortDesc	?(string | ((context: ojNBox.NodeShortDescContext<K>) => string))	<optional>	The description of this node. This is used for accessibility and also for customizing the tooltip text.
svgClassName	string	<optional>	The CSS style class defining the style of this node.
svgStyle	Partial<CSSStyleDeclaration>	<optional>	The CSS style object defining the style of this node. Only SVG CSS style properties are supported. The default value comes from the CSS and varies based on theme.
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.

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.

NodeShortDescContext<K>

Properties:

Name	Type	Description
column	string	The id of the column containing the hovered node.
id	K	The id of the hovered node.
label	string	The label of the hovered node.
row	string	The id of the row containing the hovered node.
secondaryLabel	string	The secondaryLabel of the hovered node.

NodeTemplateContext

Properties:

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.

PasteCell

Properties:

Name	Type	Description
column	string	The ID of the column of the event position.
row	string	The ID of the row of the event position.

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	Partial<CSSStyleDeclaration>	<optional>	The CSS style object defining the style of the row label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.

TooltipContext<K>

Properties:

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