Intro

Data Tokens appear across SAC and DSP in builder panels, control panels, data wranglers, and modelers.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=25598-26345&t=nRfJ1lW8BJAj1T0u-4

When to Use

Do

Use the data token:

  • To organize multiple data points.
  • To show data in hierarchies.
  • To allow drag and drop interactions.
  • To add interactivity to strings and other elements.

Don't

Don't use the data token:

  • Outside of a List, for example to replace a button.

Top Tips

SAC Anatomy

  1. Data Token Tree / Expand and Collapse Icon (optional)
  2. Highlight (optional)
  3. Drag and Drop Icon (optional)
  4. Content Expand and Collapse Icon (optional)
  5. Object Type Icon (optional)
  6. Title
  7. Description (optional)
  8. Icon (optional): Represents data properties; for example: hierarchy, roles, currency, location
  9. Semantic Icon (optional): Opens a semantic message popover on hover
  10. Icon Button (optional): For example: edit, overflow, include, exclude
  11. Remove Icon Button

SAC Data Token Anatomy

Data Token (SAC) - Anatomy

BDC and DSP Anatomy

  1. Highlight (optional)
  2. Drag and Drop Icon (optional)
  3. Object Type Icon (optional)
  4. Title
  5. Description (optional)
  6. Icon (optional): Represents data properties; for example: hierarchy, roles, currency location
  7. Button (optional): For example: aggregations
  8. Badge (optional)
  9. Icon Button (optional): For example: edit, overflow, include, exclude

BDC and DSP Data token anatomy image

Data Token (BDC and DSP) - Anatomy

Common Object Type Icons

List of icons or UI elements associated with each token type

A selection of object type icons

Data Token Types

Single Line

The default and most common token type. Leading and trailing elements are context-dependant.

A single-line data token showing the default layout: a drag handle and generic object type icon on the left, followed by the token title, then trailing action icons — hierarchy, warning, overflow, and remove — on the right.

Data Token with leading and trailing elements

A single-line data token without a leading object type icon. The title sits flush at the left edge, with the same trailing action icons on the right.

Data Token with no leading elements

Byline

The description (byline) will be truncated at the end of the line.

A data token using the byline variant, showing a filter icon and a two-line layout: "Filter Name" as the primary title and a secondary "Description" line below it, truncated at the end if too long. A remove button appears on the right.

Data Token with byline

Wrapping Title

Alternatively, the title can have two lines and be truncated at the end of the second line. The full title will be displayed in a tooltip when hovering over the text.

A data token with a wrapping title: a long text string spanning two lines, truncated with an ellipsis at the end of the second line. Trailing action icons remain at the right.

Data Token with wrapped title

Required Placeholder

A required placeholder indicates that the user must add a data token. This data token support drag and drop and is selectable.
In SAC, required placeholders are used in the Builder Panel when accounts, measures, or dimensions are required but have not been added.

A required placeholder token with a semantic attention yellow/amber background and dashed amber border. A plus icon and the text "At least 1 Account required" signal that the user must drag a token here before proceeding.

Required Placeholder

Placeholder

A placeholder indicates that a user can add a data token. This data token support drag and drop and is selectable.
In SAC, placeholders can be found in the Presentation Settings dialog and the Replace Model dialog.

An optional placeholder token with a light blue background and dashed blue border. A plus icon and the label "Account" invite the user to drag a data token into this empty slot.

Placeholder

SAC Non-Interactive Placeholder

A non-interactive placeholder indicates that a user can add a data token.
In SAC, placeholder tokens can be found in the Link Variables and Link Dimensions dialog.

A non-interactive placeholder token with a plain white background and a subtle border. Italic grey text reads "Select dimension to link", indicating an unfilled slot that cannot be directly interacted with.

SAC non-interactive placeholder

SAC Single Line Expanded

Some use cases require that content is placed inside a data token. Then, the expand and collapse button is displayed.
Expanded content is used to edit additional properties associated with Geo Map and Chart widgets.

A single-line SAC data token in its expanded state. The header row shows a drag handle, a collapse chevron, an object type icon, and the token title with a remove button. Below the header, an expanded content area (highlighted in light amber, labelled "[swap slot]") reveals additional editable properties such as those for Geo Map or Chart widgets.

Expanded content

SAC Data Token Tree

Based on UI5 Web Component: Tree Item Custom. Should not contain more than 16 levels.
Data token trees can be found in the Assets side panel and the Available Objects side panel.

Three data tokens arranged in a two-level hierarchy. The top-level token has a collapse chevron and is visually indented at level 0. The second token is indented one level with its own collapse chevron. The third token is indented two levels, representing a leaf node. Each token includes a drag handle and object type icon.

Data token tree

Behavior and Interaction

Trailing Elements

Trailing elements can be displayed permanently or displayed on hover. Moreover, their placement can be relative to the right side of the data token or they can have a fixed position. When the data token only contains buttons use the relative placement.

Two tokens shown in rest and hover states, demonstrating relative trailing placement. At rest, only a remove button is visible. On hover, additional action buttons (overflow and filter) appear and push from the right edge of the token, shifting position relative to the content.

Trailing elements with relative placement

Two tokens shown in rest and hover states, demonstrating fixed trailing placement. A single icon is always visible at a consistent right-side position. On hover, no additional buttons appear — the icon remains anchored in the same fixed position regardless of the token's content width.

Trailing elements with fixed placement

Interaction States

Six data tokens stacked vertically, each labelled with its interaction state: Regular (white background), Hover (light grey background), Down (darker grey background), Selected (white background with blue border), Hover on Selected (light blue fill with blue border), and Drop Target (white background with bold blue border).

Data Token interaction states

Placement

Data Tokens are list items and always used in a list.

A "Dimensions" panel containing three data tokens (Product, Region, Customer), each with a drag handle, a dimension object type icon, and a remove button. An "Add Dimension" link below the list allows the user to add more tokens.

Data Token list within a panel

A list does have additional properties, for example to display an toolbar above the list. If a toolbar is used, the class="sapUiSmallMarginBeginEnd" has to be added to each data token, which adds a 1 rem margin on the left and the right side and ensures a proper spacing.

A required placeholder token with a semantic attention yellow/amber background and dashed amber border. A plus icon and the text "At least 1 Account required" signal that the user must drag a token here before proceeding.

Data Token list with an additional toolbar

Drag and Drop to a Drop Target

If drag and drop is enabled, it must be indicated by the respective icon in front of the data token. Moreover, the mouse cursor should change from pointer to move.

Three-step sequence showing a token being dragged from a source list on the left into a target list on the right. Step 1: both lists show four tokens in a resting state, with a hand cursor over a token in the left list. Step 2: the token is being dragged; in the right list, the drop target position is highlighted with a blue border and the ghost token appears beneath the cursor. Step 3: the drag is complete and the token now appears in its new position in the right list.

Data Token drag and drop behavior of mappings

Drag and Drop to a Drop Zone

If drag and drop is enabled, it must be indicated by the respective icon in front of the data token. Moreover, the mouse cursor should change from pointer to move.
The drop zones indicates that a data token can be dropped in an empty slot.

Three-step sequence showing a token being dragged to reorder it within a single list. Step 1: the list shows Balance Sheet, Income Statement, and Cost of Goods Sold with a hand cursor over Balance Sheet. Step 2: Balance Sheet is being dragged to the bottom; it appears as a highlighted drop target at the end of the list. Step 3: the reorder is complete — Balance Sheet now sits below the other two tokens.

Data Token drag and drop in an empty slot

Developer Resources

UI5 Sample (Custom List Item)