Please note: This component is intended to be a UI5 Grid List Item, not a card. A card is currently being used only as a placeholder, since a grid list item is not yet available in the SAP Web UI Kit. Please refer to the visual specifications for implementation details.
Information
Icon
false

Intro

Creation items can be found on the SAC, DSP, and BDC application start pages.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=40852-6603&t=XPDQXUcEveNi1CTD-11

When to Use

Do

Use the Creation Item:

  • To allow users to create an entity for object creation

Don't

Don't use the Creation Item:

Top Tips

Note: BDC uses "Create" within item labels (e.g. "Create with SAP Output Schema") instead of a separate title, giving screen reader users more context. SAC and DSP will be adopting this pattern.
Warning
Icon
false

Anatomy

  1. Avatar (Icon): To visually identify the type of creation item
  2. Label: Text that indicates the type of creation item. To ensure accessibility, all list items must have an invisible ARIA label.

Anatomy diagram of a single Creation Item component labeled "Responsive." Two numbered callout markers identify its sub-parts: callout 1 points to the icon area on the left side of the tile, and callout 2 points to the label area at the top of the tile.

Creation Item - Anatomy

Types

Creation Item Set

Dedicated item sets used for the creation of an object. Found in both SAC, DSP and BDC on application start screens. Each set can contain up to 12 items. Majority of items are hidden by default and can be unhidden to use as needed, but a set should not exceed this maximum.

The set for SAP and DSP include a “Create” title and a series of creation items underneath.

For accessibility, the BDC Create item pattern is recommended — see Top Tips for details.

Creation Item Set for the SAC & DSP context, showing four tiles in a row under a "Create" heading: Responsive, Canvas, Smart Discovery, and Composites — representing the available object types a user can create in this application context.

Creation Item Set Anatomy - SAC and DSP

Creation Item Set for the BDC context, showing three action tiles in a row: "Create", "Create with SAP Output Schema", and "Upload". Each tile has a distinct icon and color indicating its function and category.

Creation Item Set Anatomy - BDC (Recommended)

Creation Item - SAC Templates Set

Dedicated item set used to create an object from a template. Found only on the SAC application start screen. A set includes a “Templates” title and a series of creation item templates underneath. A set should not exceed a maximum of 12 items. To maintain alignment with creation item sets, template items should follow the same spacing of 0.5rem between items. The template items are a unique use case and should be avoided outside of this specific context.

Creation Item Templates Set for SAP Analytics Cloud, displaying four selectable template cards under a "Templates" heading: Exploration Template, Reporting Template, Boardroom Template, and Responsive Presentation Template. The Boardroom and Responsive Presentation cards show rich dark-themed dashboard preview thumbnails, while the Exploration and Reporting cards show lighter wireframe-style previews.

Creation Item SAC Templates Set - Anatomy

Behavior and Interaction

Wrapping Behavior

The item grid adapts to available screen width. Each item is fixed at 13rem wide (results in 208px) with a 0.5rem gap. Items fill the container until no more can fit, then automatically wrap to the next row.

Creation Item component group showing wrapping behavior: a first row of eight named Creation Items (Local Table, Graphical View, SQL View, E/R Model, Analytic Model, Replication Flow, Transformation Flow, Task Chain) fills the available horizontal space, with three additional "Insert Item Title" placeholder items wrapping onto a second row. An arrow annotation points to the wrap point, indicating that overflow items move to the next line.

Creation Item Set Wrapping Behavior

Patterns

Group by Creation Item type

Avatar colors should be used based on creation item type. Use the following:

  1. Models → --sapAvatar_1_Background (Color 1, Yellow)
  2. Flows → --sapAvatar_3_Background (Color 3, Red)
  3. Views → --sapAvatar_5_Background (Color 5, Purple)
  4. Data Source → --sapAvatar_7_Background (Color 7, Teal)
  5. Tables → --sapAvatar_8_Background (Color 8, Green)

If it is the case that a creation item does not fall under one of these categories, use:
--sapAvatar_6_Background by default (Color 6, Blue).

Creation Item pattern showing items grouped by type: a "Create" section with eight items arranged in a 4×2 grid — Local Table, Graphical View, SQL View, E/R Model (top row) and Analytic Model, Replication Flow, Transformation Flow, Task Chain (bottom row) — demonstrating grouping of related creation actions.

Avatar Color Pattern Guidelines

Default color sequence

If there is an area that only consists of default creation items, start with --sapAvatar_1_Background for the first creation item and skip 1 step in between (ex. Color 1, Color 3, Color 5, etc.) to create a more apparent color difference. Use the following sequence:

  1. First creation item → use --sapAvatar_1_Background (Color 1, Yellow)
  2. Second creation item → use --sapAvatar_3_Background (Color 3, Red)
  3. Third creation item → use --sapAvatar_5_Background (Color 5, Purple)
  4. Fourth creation item → use --sapAvatar_7_Background (Color 7, Teal)

An example of Creation Items in SAC stories down below.

Creation Item pattern showing the default color sequence: a "Create" section containing four Creation Items in a row — Responsive, Canvas, Smart Discovery, and Composites — each with a distinct icon background color following the prescribed sequential palette.

Avatar Color Pattern Guidelines