Nbox

dvtm:nBox, dvtm:nBoxCell, dvtm:nBoxColumn, dvtm:nBoxNode, dvtm:nBoxRow

The Nbox component is used in HCM applications and measures each employee across two dimensions: potential and performance. Each of these dimensions is split into multiple ranges, whose intersections result in distinct cells into which each employee can be placed. An Nbox component consist of the following elements:

• Nbox Cell: Specifies each box in the Nbox.
• Nbox Column: Specifies Nbox column.
• Nbox Node: Specifies in which box employees will appear.
• Nbox Row: Specifies Nbox row.

This component is used on tablets and phones.

Appearance

Appearance characteristics for this component.

Nbox Layout

• 3x3 = 9 box (potential vs performance)

Markers

• Individual: Each marker represents itself in the Nbox.
• Group: Individual markers are grouped together based on specified attributes.

Box Layout

• Individual Markers: Each marker is displayed individually.
• Groups: Markers are displayed in groups.

Zoom View

• One box is given the majority of component real estate.
• Other boxes are also visible in order to allow for the drag and drop functionality.

Groups

• Grouping of markers according to any attribute.
• Size of each group depends on number of markers.
• Grouping is allowed within a box or across boxes.
• Users can drill down by tapping a group.

Highlighting

• Selected: When searching for markers according to some attributes, relevant markers are highlighted.
• Other markers are dimmed.

Legend

• Description: Explanation of markers and attributes.
• Filter: Ability to filter markers according to certain attributes.
• Support Actions: Select, Hide, Hide Others. Not supported in MAF 2.0.

Behavior

Common behaviors for this component.

• Overflow: If markers cannot fit in a box, an overflow indicator (ellipses) appears to indicate that there is more contents than visible.
• Zoom View: When a box is maximized, it is given majority of component real estate; other boxes are minimized. When all markers cannot fit in the maximized box, an overflow indicator appears.
• Scrolling: When users tap/drag the list with markers, a vertical scroll bar appears.
• Drag and Drop: Users are allowed to drag markers from one box to another. Not supported in MAF 2.0.
• Grouping: Markers groups automatically when set to Per Box or Global.
• Marker Visibility: Allows for selecting or hiding the marker, or hiding other markers. Not supported in MAF 2.0.

Usage

Usage guidelines for this component.

• Use it in HCM applications to view the distribution of an organization across two dimensions (e.g. Potential vs. Performance).
• Development teams can filter markers according to some attributes.

Sample

DVTM sample code for this component.

The following code shows sample code of a static Nbox with no cell customization:

<dvt:nBox value="#{employees}" var="emp" rowsTitle="Potential" columnsTitle="Performance">
<f:facet name="rows">
<af:group>
<dvt:nBoxRow value="lowPotential" label="Low"/>
<dvt:nBoxRow value="mediumPotential" label="Medium"/>
<dvt:nBoxRow value="highPotential" label="High"/>
</af:group>
</f:facet>
<f:facet name="columns">
<af:group>
<dvt:nBoxColumn value="lowPerformance" label="Low"/>
<dvt:nBoxColumn value="mediumPerformance" label="Medium"/>
<dvt:nBoxColumn value="highPerformance" label="High"/>
</af:group>
</f:facet>
<dvt:nBoxNode row="#{emp.potential}" column="#{emp.performance}" label="#{emp.name}">
<f:facet name="icon">
<dvt:marker source="#{emp.photo}"/>
</f:facet>
</dvt:nBoxNode>
</dvt:nBox>


The following code shows sample code of a dynamic Nbox with customized cells:

<dvt:nBox value="#{employees}" var="emp" rowsTitle="#{my.row.dimension}" columnsTitle="#{my.column.dimension}">
<f:facet name="rows">
<af:iterator value="#{rows}" var="row">
<dvt:nBoxRow value="#{row.value}" label="#{row.label}"/>
</af:iterator>
</f:facet>
<f:facet name="columns">
<af:iterator value="#{columns}" var="col">
<dvt:nBoxColumn value="#{col.value}" label="#{col.label}"/>
</af:iterator>
</f:facet>
<f:facet name="cells">
<af:iterator value="#{cells}" var="cell">
<dvt:nBoxCell row="#{cell.row}" column="#{cell.column}" label="#{cell.label}" fill="#{cell.color}" showCount="on"/>
</af:iterator>
</f:facet>
<dvt:nBoxNode row="#{emp.row}" column="#{emp.column}" label="#{emp.name}">
<f:facet name="icon">
<dvt:marker source="#{emp.photo}"/>
</f:facet>
</dvt:nBoxNode>
</dvt:nBox>


Related

• Used On: Phone, Tablet
• Also Called: Nine Box, 9-Box
• Related Components: None
• Resources: None