Overview

Almost every SAP product needs to display and manage a large number of entities. The most common UI practice is to display said entities in data tables and provide some sort of sorting and filtering capabilities. Sometimes the entities share a common metadata structure but vastly differ in functionality and options once the user drills in. In such cases, a catalog pattern is more appropriate.

Catalog Pattern Overview

Catalog Patterns are often combined with a FilterBar, FacetFilter or both to make it easy to explore and find the content you are looking for.

See also:

Filter Bar

When to Use

1
do
false

Recommended

  • Display a data list of entities that have similar metadata but vary in functionality.
  • Display rich visual content that promotes exploration.
1
dont
false

Not Recommended

  • Avoid using on marketing and landing pages.
  • Avoid using as Product Home.
  • Avoid using as main navigation.

Anatomy

Image
1
9.26; 16.33
Card (Mandatory)
2
7.14; 67.93
Badge (Optional)
3
16.27; 27.09
Visual Element (Mandatory)
4
15.34; 75.90
Add to Favourites (Optional)
5
26.72; 19.52
Title (Mandatory)
6
36.11; 19.32
Description (Optional)
7
46.96; 19.72
Differentiator (Recommended)
8
63.49; 19.72
Additional KPI (Optional)
9
86.24; 78.09
Actions (Optional)

See also:

BTP Visual Design Wiki - Catalog Card (WIP)

Card Variants

Vertical Variants

Vertical card variants are preferred for content light cards. They take less horizontal space and can fit better on small devices. Their width should allow fitting two vertical cards on a phone screen. Vertical card variants are good for showing multiple KPIs and comparisons.

Vertical Variants

Horizontal Variants

Horizontal card variants can hold more information while keeping simple and distinguishable imagery. On a phone, horizontal variants will appear as a list. Vertical variants are better for browsing and exploring unfamiliar content.

Horizontal Variants

Displaying KPI

Displaying KPI is an optional feature of the catalog card. It would vary from product to product. In the image below there are some variants of KPIs that you cab display and a general idea of how to go about doing it. Consider and evaluate your content and decide whether it is necessary to bring a KPI.

2
do
false

Recommended

  • Use as few KPIs as possible
  • Consider the badge as a KPI
  • Ensure the KPI is a card differentiator
dont
false

Not Recommended

  • Avoid using links in cards as product navigation
  • Avoid triggering popups from the cards
  • Avoid flipping the cards to reveal more information

Displaying KPIs

Responsiveness

Fixed Size Cards

In general it is preferred to use a fixed size cards over responsive ones as it gives most control over the content and layout of all the metadata you are showing.

Cards on Fixed Grid

Layout Grid Configuration

Fixed cards use a GridContainer which is nested inside of a responsive grid.

<div> <div>Layout Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>rowSize</div> <div>3rem</div> <div>Sets the height of all grid rows.</div> </div> <div> <div>columnSize</div> <div>3rem</div> <div>Sets the width of all gird columns.</div> </div> <div> <div>gap</div> <div>1rem</div> <div>Sets the gap between each cell formed by rows and columns.</div> </div>
xml
<f:GridContainer id="group1" layoutChange=".handleLayoutChangeGroup"> <f:layout> <!-- Defines square cells pattern for the group grid --> <f:GridContainerSettings rowSize="3rem" columnSize="3rem" gap="1rem" /> </f:layout> <f:layoutData> <!-- Defines how many columns from the parent grid the group grid will take --> <cssgrid:ResponsiveColumnItemLayoutData columns="10" rows="1" /> </f:layoutData> </f:GridContainer>

Variable Size Cards

Variable size cards are a good choice if you are in complete control of the shown content. Variable size cards utilise the horizontal space better and will work properly on mobile devices. If you have a strong mobile story consider favouring this type of cards.

Cards on Responsive Grid

Grid Configuration

Variable size cards are achieved using the standard responsive grid.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>class</div> <div>sapUiResponsiveContentPadding</div> <div>Sets responsive padding.</div> </div> <div> <div>customLayout</div> <div>ResponsiveColumnLayout</div> <div>Sets standard Fiori responsive metrics.</div> </div>
xml
<cssgrid:CSSGrid class="sapUiResponsiveContentPadding"> <cssgrid:customLayout> <!-- Defines the standard responsive behavior --> <cssgrid:ResponsiveColumnLayout layoutChange=".handleLayoutChangeMain" /> </cssgrid:customLayout> </cssgrid:CSSGrid>

Writing Guidelines

Description

The description comes right below the title and is optional. However, it could be a very useful element.

The description should be a clear summary of the main features/function of the product/tool/service. It should allow the user to quickly scan and know right away if this is what they're looking for. It acts as a kind of thumbnail text.

1
do
false

Recommended

  • Keep it short. You shouldn't exceed 150 characters.
  • Keep it to the point. Users are busy, they want only to scan the text to see what the product does. Try to answer the question 'What does the user need to know?'. This will help you figure out the essential information.
1
dont
false

Not Recommended

  • Avoid repeating the name of the product/tool. It's already in the title. Use the description to emphasize on the main features/function.

Resources

Figma Design File - Catalog Pattern