SAP Fiori for Web UI Kit

SAP Fiori for Web UI Kit cover page

Intro

The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and development processes and encourages consistency.

Prerequisites

72 Typeface

Make sure you that you have the latest version of the 72 typeface installed.

Icon Font

This UI Kit offers all icons as vectors.
If you need the latest icon font version, you can download it here.

Using the SAP Fiori for Web UI Kit

Duplicate a file to add a copy of it to your drafts folder. This duplicate is an entirely new file. Changes made to the original file are not reflected in duplicated files.

  1. Click Open in Figma.
  2. Select the account where you want to add the file.
  3. A copy of the file is added to your drafts. Every file you duplicate from the Community will have “(Community)” appended to the file name.

Related Links

Figma Community

  • SAP Community
    Find other SAP UI kits for web and mobile in the SAP space in the Figma Community.

Keep Copy

Information
We continually optimize the SAP S/4HANA My Home page, so some details described in this guideline may differ from what you see in the latest demo systems.

Intro

The SAP S/4HANA product home page is an alternative to the SAP Fiori launchpad My Home page when using SAP S/4HANA Cloud. The previously available SAP Fiori launchpad My Home page is the entry point to a personalized set of apps, presented as tiles or links, whereas the SAP S/4HANA product home page orchestrates much more information.

The new product home page is the entry point to apps, and also offers:

  • Access to tasks and situations
  • News feed
  • Quick navigation to pages
  • Analytical insights 
  • SAP Business AI recommendations

Additionally, users benefit from enhanced personalization features for content and layout.

Information
Keep in mind that referring generically to “My Home” can be understood to mean either the SAP S/4HANA product home page described in this article, which displays My Home on its interface, or the SAP Fiori launchpad My Home. 

The SAP S/4HANA product home page is based on SAP Fiori launchpad spaces and runs best with the Horizon theme, although it supports other SAP and custom themes. The SAP S/4HANA product home page has to be activated by a key user.

SAP S/4HANA product page 'My Home'
SAP S/4HANA product page 'My Home'

Components

The SAP S/4HANA My Home page is the leftmost option in the top-level shell bar navigation and includes the following sections:

  1. To Dos
    Shows tasks and situations.
  2. News
    Shows new features, and changes from the latest release.
  3. Pages
    Shows a maximum of 8 pages displayed as tiles.
  4. Apps
    Shows the user’s favorite apps, most used apps, recently used apps, and apps recommended by SAP Business AI, based on the user’s business role.
  5. Insights Tiles
    Shows tiles with analytical information.
  6. Insights Cards
    Shows cards from overview pages and list report-based apps.

The section menu (7) can be triggered from the arrow next to a section title and shows actions for the section.

In My Home Settings, users can define the layout and visibility of the individual sections to personalize the My Home page.

My Home - Sections
My Home - Sections

To Dos

  1. The To Dos section includes tabs for workflow tasks from the My Inbox app and situations from the My Situations app.
  2. A counter next to each tab indicates the number of open tasks and situations.
  3. Cards, displayed in a row, present the tasks or situations in the tab:
    • Task cards contain a title, priority, creator name, and attributes according to the task type. The footer displays card actions.
    • Situation cards contain a title, body text, and a time stamp.
  1. The priority of the cards determines their order in the row, from high to low.
  2. The Show More button is displayed if not all tasks and situations can be displayed. The number of cards shown depends on the user’s screen resolution.
  3. The Refresh button displays the time stamp of the last refresh.
Information
If the My Inbox or My Situations apps are not assigned to the user, the To Dos section is not available.

If only one of the apps is assigned, the corresponding tab is shown.

My Home - 'To Dos'
My Home - 'To Dos'
My Home - 'To Dos' -- Show more view
My Home - 'To Dos' -- Show more view

News

  1. The News section shows a news tile with either RASD-based information feed or an RSS feed. Only news feed from one line of business (LOB) can be displayed on a news tile at a time.
  2. A carousel lets users switch among previews for the LOB-specific news threads.

In the Personalize News section of My Home Settings, users can personalize their news feed by choosing an LOB.

Information
The news feed is available only if a key user has activated it.
My Home - 'News'
My Home - 'News'

When users click a tile in the carousel, a summary with further information on the LOB-specific news feed opens in a popover.

My Home - 'News' (Popover with LOB-specific news feed)
My Home - 'News' (Popover with LOB-specific news feed)

Pages

  1. The Pages section shows a maximum of 8 favorite pages.
  2. Tiles represent the favorite pages.

In the Personalize Pages section of My Home Settings, users can control the pages to show or hide in the Pages section.

Information
Key users can assign custom colors and icons to the pages.
My Home - 'Pages'
My Home - 'Pages'

Apps

The Apps section includes:

  1. Favorite apps, users can apps to their Favorites directly from the Most Used, Recently Used, or Recommended tab. They can also change the icon for the favorite app or remove it from Favorites. . See Personalize Apps.
  2. Most Used apps
  3. Recently Used apps
  4. Recommended apps, the apps recommended by the SAP Business AI based on the user’s business role. Users can hide the tab from My Home in the advanced section (under recommendations) of the Settings dialog.
  5. The Add Apps action opens the app finder, where users can add apps to their Favorites.
  6. The Import Apps Now action imports personalization content, for example, personalized groups. Users can also change the color of the icon and delete apps from their favorites. See Personalize Apps.
  7. App groups are displayed as a colored folder that contains the apps that the user has added to the group.
  8. An app is displayed with a colored icon that matches the app title.
  9. A deprecated badge next to outdated apps that will be removed in a future release. See deprecation process.
Information
Most used and recently used apps are shown only if the user allows app tracking in the Settings dialog.

The Most Used tab displays the apps used in the last 30 days, in the order of the most to least used. Recently Used displays up to 30 activities, in the order of the most to least recently used.

My Home – 'Apps'
My Home – 'Apps'

Insights Tiles

  1. The Insights Tiles section contains tiles with analytical information, such as charts or KPI’s. The section header includes a counter that shows the number of tiles in the section.  All tiles are displayed in one row.
  2. Add Tiles opens the app finder where users can search and and tiles. They can also add tiles from their favorite apps.
  3. The Show More button is displayed if not all tiles can be displayed the one row. The number of displayed tiles depends on the screen resolution.

Further personalization of tiles is possible. See Personalize Insights.

My Home - 'Insights Tiles'
My Home - 'Insights Tiles'
My Home - 'Insights Tiles' - Show more view
My Home - 'Insights Tiles' - Show more view

Insights Cards

The Insights Cards section header includes a counter that shows the number of available cards. The section contains:

  1. A maximum of 10 cards from overview pages and list report-based applications
  2. An overflow menu for each card
  3. Card-specific actions
  4. The Show More button is displayed if not all cards can be displayed in one row. The number of displayed cards depends on the screen resolution.

Further personalization of cards is possible. See Personalize Insights.

My Home - 'Insights Cards'
My Home - 'Insights Cards'
My Home - 'Insights Cards' - Show more view
My Home - 'Insights Cards' - Show more view

Behavior and Interaction

Users can personalize the SAP S/4HANA My Home page according to their needs.

In the Apps section on My Home, users can add and import apps to their Favorites, and personalize their favorite apps with colors and icons.

All other personalization options are available in the respective My Home sections or via My Home Settings in the user actions menu.

Showing More or Less Section Content

The Show More button is displayed at the top right of the To Dos, Insights Tiles, and Insights Cards sections when the section includes more content than can be displayed in one row.

On selection, it:

  • Displays all the section content
  • Hides the other My Home sections
  • Changes the button’s action to Show Less

If needed, scrolling within the show more view is possible.

When users select the Show Less button, it

  • Displays the section content in one row. The number of tiles or cards displayed depends on the screen resolution.
  • Displays the other My Home sections
  • Changes the button’s action to Show More

Personalizing the Apps Section

Users can add and import apps.

Adding Apps to Favorites

Users can add apps to their Favorites both from:

  • The My Home page
  • An app overflow menu

From the My Home page, users can select the Add Apps button to open the app finder, where they can search for apps and add them to the My Home page, with the Add button.

App finder view -- added app
App finder view -- added app

 

From the Most Used, Recently Used and Recommended tabs, users can open the overflow menu and select the Add to Favorites action.

Personalize Apps - Add to Favorites
Personalize Apps - Add to Favorites

 

Personalizing Favorites

In the Favorites tab, from the overflow menu for an app, users can change the app’s color, move it to an app group, or remove it from My Home.

Personalize Apps - App overflow menu
Personalize Apps - App overflow menu

Creating App Groups

Users can create app groups:

  • From the overflow menu for an app
  • From the menu for the Apps section
  • By dragging and dropping an app onto another

From the app group folder overflow menu, they can:

  • Change the name and color of the folder
  • Remove all apps from the folder
  • Delete the folder

 

Acting on Recommended Apps

The Recommended tab is active by default at first login. In it, the user sees applications recommended by SAP Business AI based on the user’s business role.

  1. An information message strip at the top of the tab advises users that in the Settings dialog, they can hide the Recommended tab, and it contains a link to the dialog.
  2. In the overflow menu, the user can do one of the following to the recommended app:
    • Add it to Favorites tab. This also removes it from the Recommended tab.
    • Remove it from the Recommended tab, by declining the recommendation with the Not Relevant menu item.
Information
The default app colors correspond to the colors of the page tiles.
Personalize Apps - Recommendations
Personalize Apps - Recommendations

Personalizing Other Sections

For other sections, such as News, Pages, News, Insights Tiles or Cards, personalization options are available in the:

  • Corresponding section menu, My Home Settings, where users can change the settings from within the context of the section.
  • User actions menuMy Home Settings opens a dialog where users can change all settings for the My Home page from one place.
'My Home Settings' in section menu
'My Home Settings' in section menu

'My Home Settings' in the user actions menu
'My Home Settings' in the user actions menu

Personalize Layout

Users can:

  1. Enable the visibility of sections on the My Home page
  2. Disable the visibility of sections on the My Home page
  3. Change the order of the sections by dragging and dropping them
  4. Reset the layout to the defaults setting defined by the key user
Personalize My Home - Layout
Personalize My Home - Layout

Personalize News

Users can:

  1. Personalize their news feed by choosing one or more lines of business
  2. Display all action items that require preparation in the news feed
Personalize My Home - News
Personalize My Home - News

Personalize Pages

Users can:

  1. Search for specific spaces and pages
  2. Select up to 8 pages to show on My Home
Personalize My Home - Pages
Personalize My Home - Pages

Personalize Tiles

Users can:

  1. Search for specific tiles
  2. Change the order of tiles by dragging and dropping them
  3. Remove tiles
  4. Set the size of smart business tiles: Activating Wide displays larger tiles, deactivating it displays smaller ones.
Personalize My Home - Tiles
Personalize My Home - Tiles

Personalize Cards

Users can:

  1. Refresh cards
  2. Show only visible cards in the Insights Cards section of the My Home Settings dialog
  3. Search for specific cards
  4. Enable the visibility of up to 10 cards on the My Home page
  5. Change the order of cards by dragging and dropping them
  6. Preview cards in a popover
Personalize My Home - Cards
Personalize My Home - Cards

In the Card details view, users can:

  1. Delete the card
  2. Copy an existing card and customize it to create a new one
Personalize My Home - Cards (Details view)
Personalize My Home - Cards (Details view)

 

In the copy of a card, users can change the title, subtitle, and modify the filters. Then, to see the impact of the changes, they can refresh the Preview of the card.

Personalize My Home - Copy Card
Personalize My Home - Copy Card

Advanced Settings

Users can:

  1. Export sections to a file
  2. Enable or disable the SAP Business AI recommendations that show in the Recommendations tab in Apps section.
  3. Import sections or content from file
  4. Reset all changes to the default setting that the key user defined.

Responsiveness

The SAP S/4HANA My Home page is responsive and can be used on tablets and phones.

Related Links