Overview

A product home layout pattern uses cards to display relevant product data. It serves the function of providing a personalized overview of the product and inform users' navigation decisions. The content of each card is specific to the product and should be used to provide deep links to important aspects of the product. This article is concerned with the layout of cards rather than the content itself.

Look and feel

When to Use

1
do
false

Recommended

  • Display the default start screen for technology products.
  • Provide an overview of your product and contextualize deep links to important areas.
  • Expose frequently used, create and add actions.
  • Use this screen when the user clicks on the tool header logo.
1
dont
false

Not Recommended

  • Avoid duplicating the horizontal or vertical navigation of the product.
  • Avoid this screen if you have too little data to display. Aim for 4 cards or more.

Anatomy and Construction

null

Start with a tool page and place a Responsive CSS Grid in it.

null

Create a grid container and choose how many columns it will take.

null

Configure the grid container to automatically create rows and columns.

null

Add the cards to hold your content. Make sure you place a title.

null

Repeat the process until you create all your groups and cards.

null

Add card content. Arrangement and responsiveness are handled by the grid.

Grid Configuration

This layout is achieved using a CSS grid. In addition each group of cards is defined as its own grid layout. Effectively you will be nesting grids and controlling their behavior for individual browser sizes. Refer to the table below to configure the grids for your product.

<div> <div>Property</div> <div>Value</div> <div>Description</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>

CSS grid - The parent grid of the product home layout

xml
<cssgrid:CSSGrid class="sapUiResponsiveContentPadding"> <cssgrid:customLayout> <!-- Defines the standard responsive behavior --> <cssgrid:ResponsiveColumnLayout layoutChange=".handleLayoutChangeMain" /> </cssgrid:customLayout> </cssgrid:CSSGrid>

See also:

Responsiveness

Visual Design Wiki - Responsive Grids (Fiori 3)

Visual Design Wiki - Content Container Paddings (Fiori 3)

Visual Design Wiki - Responsive Spacing System

UI5 API Reference -CSSGrid

UI5 API Reference - GridResponsiveLayout

Layout Configuration

The group titles and cards are placed in grid containers. Each container has layout properties and layout data. The layout properties define the responsive pattern for this nested grid. In the case of the product home that would be 4rem by 4rem squares spaced 1 rem apart.

Generating Rows and Columns

The rows and columns of this grid are generated automatically.

<div> <div>Grid Container Property</div> <div>Value</div> <div></div> </div> <div> <div>ID</div> <div>string</div> <div>Required to control responsiveness.</div> </div> <div> <div>containerQuery</div> <div>true</div> <div>Sets responsiveness based on container size.</div> </div>
<div> <div>Layout Property</div> <div>Value</div> <div>Description</div> </div> <div> <div>rowSize</div> <div>4rem</div> <div>Sets the height of all grid rows.</div> </div> <div> <div>columnSize</div> <div>4rem</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>
<div> <div>Layout Data Property</div> <div>Value</div> <div>Description</div> </div> <div> <div>columns</div> <div></div> <div>Sets the width of the layout grid in relation to its parent.</div> </div> <div> <div>rows</div> <div>1 (Recommended)</div> <div>Sets the height allocation of the group in the parent grid.</div> </div>

Grid layout - The child grid in which the group titles and cards are placed

xml
<f:GridContainer id="group1" layoutChange=".handleLayoutChangeGroup"> <f:layout> <!-- Defines square cells pattern for the group grid --> <f:GridContainerSettings rowSize="4rem" columnSize="4rem" 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>

See also:

UI5 API Reference - GridContainer

Group Title

Placement and Style

The content of each layout container consists of a title to label the group and cards to hold the group content. The following describes the configuration of the title.

<div> <div>Title Property</div> <div>Value</div> <div>Description</div> </div> <div> <div>text</div> <div></div> <div>Sets the title of a group of cards.</div> </div> <div> <div>titleStyle</div> <div>H4</div> <div>Sets the font-size and font-weight of the title.</div> </div> <div> <div>class</div> <div>sapUiLargeMarginTop</div> <div>Sets the spacing from the top.</div> </div>
<div> <div>Title Layout Property</div> <div>Value</div> <div>Description</div> </div> <div> <div>columns</div> <div></div> <div>Sets the space which should be allocated for the title.</div> </div> <div> <div>rows</div> <div>1 (Recommended)</div> <div>The vertical space allocated for a title.</div> </div>

Group title - Placement and style

xml
<Title text="Group Title" class="sapUiLargeMarginTop" titleStyle="H4"> <layoutData> <f:GridContainerItemLayoutData columns="20" rows="1" /> </layoutData> </Title>

Writing Group Titles

Each collection of cards should have a title clearly labeling it.

1
do
false

Recommended

  • Use a non-verb name.
    Examples: “Recently Updated”, "Frequently Used", "Common Actions", "Activity Monitoring"
  • Be concise. Aim for one-line texts, which are easier to scan.
  • Choose a name that best fits your use case and the conventions in your business.
  • Use title case.
  • Describe groups in familiar terms for your users, their role and business area.
  • Look for a title which describes all cards in the group.
  • Consider using terms already used in your application.
1
dont
false

Not Recommended

  • Avoid repeating the navigation.
  • Avoid creating complicated titles. Two or three words should be enough.
  • Do not use punctuation at the end of titles.

See also:

UI5 API Reference - Title

Fiori Design Guideline - Overview Page – UI Text Guidelines

Content Cards

Placement and Style

The content of each layout container consists of a title to label the group and cards to hold the group content. The following describes the configuration of the card.

<div> <div>Card Property</div> <div>Value</div> <div>Description</div> </div> <div> <div>ID</div> <div></div> <div>Required to control responsiveness.</div> </div> <div> <div>height</div> <div>100%</div> <div>Stretches the size of the card to fill the entire allocated space.</div> </div> <div> <div>class</div> <div>min-height: 4rem; !important</div> <div>Overrides the minimum height to 4rem.</div> </div>
<div> <div>Card Layout Property</div> <div>Value</div> <div>Description</div> </div> <div> <div>columns</div> <div></div> <div>Sets width of a card as number of columns.</div> </div> <div> <div>rows</div> <div></div> <div>Sets height of a card as number of columns.</div> </div>

Content cards - Placement and style

xml
<f:Card id="card1" height="100%"> <f:layoutData> <f:GridContainerItemLayoutData columns="6" rows="4" /> </f:layoutData> </f:Card>

Writing Card Titles

Each card should have a title clearly labeling it.

1
do
false

Recommended

  • Be concise. Aim for one-line texts, which are easier to scan.
  • If the title is short, consider including qualifying information in the title.
  • Choose a name that best fits your use case and the conventions in your business.
  • Use a consistent pattern across all the cards on your overview page.
  • Use title case.
1
dont
false

Not Recommended

  • Don’t overload the title with too much information.
  • If the title is longer, or the qualifying information is more complex, use a subtitle for the qualifier.

Writing Card Subtitle

Each card could have a subtitle which provides qualifying information about the card content.

1
do
false

Recommended

  • Use title case for short qualifiers.
    Examples: "New Users", "Approved", "Completed"
  • Use sentence case longer explanations, or statuses involving time periods or numbers.
  • Use sentence case for mixture of subtitles in sentence and title case.
    Examples: "Last 30 days", "Shipping this week"
  • Separate multiple qualifiers with commas (,).
    Example: By zone, last 30 days
  • Use unit of measure and qualifier in the following format (<value><unit> <qualifier>)
    Example: "4.578M EUR", "1.258K Users"

See also:

UI5 API Reference - Card

Fiori Design Guideline - Overview Page – UI Text Guidelines

Content

The product home consists of groups of cards. Each group has a title and a least two cards. This section details how to place the titles and cards in the layout as well as provide guidance for the content type and usage. Remember this is the first screen a user will see when they sign in to your product. Ensure the information presented is relevant, understandable and meaningful. The content needs to serve as guide into the product. Below you can find some suggestions of content groups.

Content - Various content types

1
do
false

Potential Content Types

  • Recently used assets - one or more cards of personalized list of recently accessed content.
  • Frequently used assets - one or more cards of SAP suggested content. Good for onboarding.
  • Product metrics - product specific data visualizations. Usage, Crashes, Stability, Logs, etc.
  • Favorite assets - personalized list of deep links into the product.
  • Common actions - expose actions commonly undertaken by the customers.
  • What's New and News - curated information about product updates and general product news.
  • Product improvement and Customer Engagement - expose actions like Give Feedback or Take a Survey.

See also:

UA Product Standards - What's New

UI5 Card Explorer - Integration Cards Overview

UI5 DemoKit Sample - Card Control

UI5 DemoKit Sample - Product Home