Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Data Token Structure

Design spec for Data Token structure: Two example — one without a leading icon and one with a "Tt" type icon — both including a hierarchy icon, warning icon, badge, and a remove "x" icon, with a pink highlights indicating padding.

Value Description Details
A Custom List Item General:
SAPUI5: Custom List Item
UI5 Web Components: CustomListItem / UI5 Web Components: TreeItemCustom

bottom-margin: sapUiTinyMarginBottom (0.5rem)
alignment: center-left
padding-left: 1rem
padding-left when icons are used: 0.5rem
padding-right: 0.5rem
margin-left: 0.5rem

Overrides:
border-radius: --sapField_BorderCornerRadius (0.25rem)
height: 2rem when there is no subtitle; 3rem when there is a subtitle

Design spec for Data Token structure: Five data tokens showing different leading container variations. From top to bottom: (1) optional blue highlight only, (2) grip icon for drag and drop only, (3) grey "Tt" icon only, (4) expand/collapse arrow only, and (5) grip, expand/collapse, and "Tt" icon altogether.

Value Description Details
B Leading Container Highlight (Optional):
Custom list item property
Highlight: Error, Warning, Success, Information, None
highlightText: empty string, dependent on the object

Grip Icon for Drag and Drop Interactions (Optional):
SAPUI5: Icon
UI5 Web Components: Icon
icon: sap-icon://vertical-grip
icon-size: 1rem
icon-color: --sapContent_NonInteractiveIconColor
tooltip:(not needed)

SAC Only: Expand / Collapse Button (Optional):
UI5 Web Components: TreeItemCustom

Object Type Icon (Optional):
SAPUI5: Icon
UI5 Web Components: Icon
icon: dependent on the object
icon-size: 1rem
tooltip: dependent on the object

Design spec for Data Token structure: Two examples – one data token with Title text only, and one data token with both a Title and a Description label/subtitle underneath.

Value Description Details
C Title Title (Mandatory):
SAPUI5: Text
UI5 Web Components: Text
text: dependent on the use case
maxLines: 1, adjustable

Subtitle (Optional):
SAPUI5: Label
UI5 Web Components: Label
text: dependent on the use case
margin-top: 0.125rem
font-size: --sapFontSmallSize

Design spec for Data Token Structure: a single data token row with "Tt" type icon, title, and right-side trailing container action (hierarchy icon, warning icon, badge, close), with pink highlighted lines between the action icons highlighted by callout D.

Value Description Details
D Trailing Container General:
margin-left: 0.125rem

N Icons (Optional):
Container padding: 0.5rem
SAPUI5: Icon
UI5 Web Components: Icon
icon: dependent on the use case
icon-size: 1rem
icon-color: --sapContent_NonInteractiveIconColor
tooltip: dependent on the use case

SAC Only: 1 Semantic Icon (Optional):
Container padding: 0.5rem
SAPUI5: Icon
UI5 Web Components: Icon
icon: status-error, status-critical, status-positive, information
icon-size: 1rem
icon-color: --sapErrorColor, --sapWarningColor, --sapSuccessColor, --sapInformationColor
tooltip: dependent on the use case

BDC and DSP Only: Badge:
Container padding: 0.5rem
SAPUI5 Badge Enabler, Badge Custom Data
value: N
visible: “true” when the Object contains one or more errors or warnings

N Buttons (Optional):
Container padding: 0.5rem
SAPUI5: Button
UI5 Web Components: Button
accessibleRole: Default, Link
enabled: true, false
icon: sap-icon://edit, sap-icon://inspect, sap-icon://message-information, sap-icon://navigation-right-arrow, sap-icon://overflow, sap-icon://decline,
more dependent on the use case
text: dependent on the use case
type: Transparent
visible: true, false
tooltip: dependent on the use case

N Empty Containers (Optional):
Can be added to ensure that elements remain in a fixed position from the right side
width: 2rem,dependent on the use case

Design spec for Data Token Structure: an expanded data token with drag handle, collapse chevron, "Tt" type icon, title, and right-side actions, with an expanded content area below labeled "[Placeholder for Sample Content]," callout E pointing to the content area.

Value Description Details
E SAC Only: Expand / Collapse Content padding/margin: 0rem 0.5rem 0.5rem 0.5rem
background-color: --sapGroupContentBackground
border-radius: --sapField_BorderCornerRadius (0.25rem)

Interaction States

Design spec showing eight data token interaction states (A–H): regular, hover, down, focused (dark border), selected (light blue fill + border), selected on hover, drop target, and disabled.

Value Description Details
A Regular Overrides:
background-color: --sapList_AlternatingBackground
B Hover
C Down
D Focus
E Selected Overrides:
border-width: 0.0625rem 0.0625rem 0.125rem 0.0625rem (1px 1px 2px 1px)
F Selected on Hover Overrides:
border-width: same as for selected
G Drop Target Overrides:
border-width: 0.125rem
H Disabled

Required Placeholder

Design spec showing the required variant of the data token placeholder across five states (A–F): regular, hover, and down use orange dashed borders; focused and drop zone states use solid blue borders; disabled is the regular state at reduced opacity. All display "At least 1 Account required" with a + icon.

Value Description Details
A Regular General Overrides:
background-color: --sapButton_Attention_Background
background-color: --sapWarningBorderColor
border-style: dashed 0.125rem gap 0.125rem

Icon:
icon: sap-icon://add
icon-size: 1rem
icon-color: --sapButton_Attention_TextColor
tooltip: (not needed)

Title:
text-color: --sapButton_Attention_TextColor
text-shadow: --sapContent_TextShadow
text: dependent on the use case
maxLines: 1
B Hover General Overrides:
background-color: --sapButton_Attention_Hover_Background
background-color: same as for regular
border-style: same as for regular

Icon:
icon: same as for regular
icon-size: same as for regular
icon-color: same as for regular
tooltip: same as for regular

Title:
text-color: same as for regular
text-shadow: same as for regular
text: same as for regular
maxLines: same as for regular
C Down General Overrides:
background-color: --sapButton_Attention_Active_Background
background-color: same as for regular
border-style: same as for regular

Icon:
icon: same as for regular
icon-size: same as for regular
icon-color: same as for regular
tooltip: same as for regular

Title:
text-color: same as for regular
text-shadow: same as for regular
text: same as for regular
maxLines: same as for regular
D Focus background-color: --sapContent_FocusColor
background-color: same as for regular
border-style: solid
E Drop Zone General Overrides:
background-color: --sapList_SelectionBackground
background-color: --sapContent_DragAndDropActiveColor
border-style: solid
border-width: 0.125rem

Icon:
icon: same as for regular
icon-size: same as for regular
icon-color: --sapContent_DragAndDropActiveColor
tooltip: same as for regular

Title:
text-color: --sapContent_DragAndDropActiveColor
text-shadow: same as for regular
text: same as for regular
maxLines: same as for regular
F Disabled opacity: sapContent_DisabledOpacity

Placeholder

Design spec showing six data token placeholder states (A–F): regular (dashed blue border, light blue fill), hover (dashed blue border, darker blue fill), down (dashed blue border, no fill), focused (solid blue border), drop zone (solid border, light blue fill), and disabled (same as regular at reduced opacity).

Value Description Details
A Regular General Overrides:
background-color: --sapIndicationColor_5b_Background
background-color: --sapIndicationColor_5_BorderColor
border-style: dashed 0.125rem gap 0.125rem

Icon:
icon: sap-icon://add
icon-size: 1rem
icon-color: --sapIndicationColor_5b_TextColor
tooltip: (not needed)

Title:
text-color: --sapIndicationColor_5b_TextColor
text-shadow: --sapContent_TextShadow
text: dependent on the use case
maxLines: 1
B Hover General Overrides:
background-color: --sapIndicationColor_5b_Hover_Background
background-color: same as for regular
border-style: same as for regular

Icon:
icon: same as for regular
icon-size: same as for regular
icon-color: same as for regular
tooltip: same as for regular

Title:
text-color: same as for regular
text-shadow: same as for regular
text: same as for regular
maxLines: same as for regular
C Down General Overrides:
background-color: --sapIndicationColor_5_Active_Background
background-color: same as for regular
border-style: same as for regular

Icon:
icon: same as for regular
icon-size: same as for regular
icon-color: same as for regular
tooltip: same as for regular

Title:
text-color: same as for regular
text-shadow: same as for regular
text: same as for regular
maxLines: same as for regular
D Focus background-color: --sapContent_FocusColor
background-color: same as for regular
border-style: solid
E Drop Zone General Overrides:
background-color: --sapList_SelectionBackground
background-color: --sapContent_DragAndDropActiveColor
border-style: solid
border-width: 0.125rem

Icon:
icon: same as for regular
icon-size: same as for regular
icon-color: --sapContent_DragAndDropActiveColor
tooltip: same as for regular

Title:
text-color: --sapContent_DragAndDropActiveColor
text-shadow: same as for regular
text: same as for regular
maxLines: same as for regular
F Disabled opacity: sapContent_DisabledOpacity

Non-Interactive Placeholder (SAC)

Design spec for the non-interactive placeholder state: a single token row with placeholder text "Select dimension to link" in italic, no leading icon or actions, labeled callout A.

Value Description Details
A Regular Title:
text: dependent on the use case
maxLines: 1
style: italic, --sapField_PlaceholderTextColor