Customizing the SAP SuccessFactors instance

Objective

After completing this lesson, you will be able to Customize the SAP SuccessFactors application themes.

Create, edit, and modify Themes

The Manage Themes page, accessible from the Action Search, lists all the SAP SuccessFactors standard and custom themes. The theme will determine the colors that users see in the interface. The Visible to column lists the theme that is currently shown to your employees. To access the Theme Manager, go to Admin Center and navigate to Company SettingsTheme Manager.

As an administrator, you have several options when working with themes.

Option in the Theme Manager

#

Option

Description

1SearchYou can search for a theme by starting to type its name or by filtering on locked (standard) or unlocked (custom) themes.
2EditYou can edit the custom themes by selecting the theme names. The standard theme names appear in a lighter color and are associated with a lock icon because they cannot be edited.
3DefaultThere can only be one default theme per instance. This is the theme that will be visible to the employees unless there are in a group added in the column "Visible to".
4Visible to

You can add groups of employees who will see a theme different than the default theme.

The field used to group user to theme can be selected from Provisioning > Company Settings > Field used to group users to themes. There are three options: department, division, and location.

5RevertTo stop testing the theme, you can choose Revert from the options menu.
6DuplicateThis option allows you to copy an existing theme and is used to create a new theme by changing the existing theme.
7DeleteChoosing this option will delete the theme. Only custom themes can be deleted.
8Save or CancelThese buttons allow you to save or cancel the changes based on your decision. They are always visible at the bottom of the browser and you do not need to scroll down to utilize them.

9

Save or Cancel

These buttons allow you to save or cancel the changes based on your decision. They are always visible at the bottom of the browser and you do not need to scroll down to utilize them.

Theme settings for the latest Home Page

You can use the Theme Manager tool to apply theming to the latest home page.

The following theme settings are available in the Fine Tune → Home Page (Latest) section:

  • Greeting text color: This is the color of greeting text (such as "Good morning!").
  • Quick action background color: This is the color of quick action tiles.
  • Quick action text and icon color: This is the color of the text and icon used on quick action tiles.
  • Card icon color: This is the color of icons used on cards.
  • Card link color: This is the color of hyperlink text used on cards.
  • Card button border and text color: This is the color of button border and button text on cards.
  • Card button hover color: This is the color of buttons on the latest home page when you hover or focus on them.

These options give customers the capabilities to make the latest home page more consistent with other pages in the application.

Note

You cannot change the text color or background color of home page cards.

Horizon Visual Theme for SAP Fiori

Horizon visual theme is part of a design language for SAP Fiori, which is being applied across all SAP applications to deliver a consistent user experience. It provides a modern, friendly user interface and modular design system. It is a purely visual setting.

The Horizon theme is the standard base theme for the HCM Suite and is turned on automatically for all customers, by default. It cannot be disabled since release 2H 2023.

If you use a custom theme, we recommend testing it thoroughly on commonly used pages. Although custom theme settings aren’t affected and the colors in your theme are still used in most places, some UI elements use theme settings differently when Horizon is enabled. As a result, some UI elements change color. For example:

  • Some UI elements that previously could have their color defined in a custom theme can no longer be customized.
  • Some UI elements that previously couldn't be customized can now have their color defined in a custom theme.
  • Some UI elements now have their color defined by different theme setting than they did previously.

Changes to typography, visual treatment, and spacing have an impact on the overall layout and location of elements on the page. If you run automated tests that are based onscreen coordinates, they may be impacted by the Horizon theme.

For further information check: Horizon Visual Theme for SAP Fiori

Apply, create and delete a Theme

Business example

Themes determine the colors and look of your SuccessFactors instance. Your company theme was created during configuration; however, you can edit and modify it. You can customize how screens display across your company, or you can choose to have screens display differently according to group.

Task 1: Apply a Theme

In this exercise, you apply a different theme to your instance using the Theme Manager.

Steps

  1. Apply a different theme to your instance using the Theme Manager.

    1. Use the Action Search to navigate to Theme Manager.

    2. On theManage Themes screen, choose the "SAP Fiori with Morning Horizon (light)" radio button in the Default column to set this as the default theme.

    3. Select Save.

    4. In the Save Changes dialog box, choose Yes.

    5. Log out and log back in to see the changes.

Task 2: Create a Theme

In SuccessFactors you can use standard themes or create your own theme. You have been asked to create a new theme for use in your SuccessFactors instance.

In this exercise, you create a custom theme.

Steps

  1. Create a theme using the Theme Manager.

    1. Use the Action Search to navigate to Theme Manager.

    2. On the Manage Themes screen, click on the three dots at the right-hand side of "SAP Fiori with Morning Horizon (light)" and choose Duplicate.

    3. On the Create a Theme screen and in the Theme name field, enter SF Theme.

    4. Choose the Page background color field, enter#9608FC.

    5. In the Accent color scheme based on field, enter #9C81AA.

    6. Choose the Generate button to create additional shades based on the #9C81AA color value. Then choose Generate again in the popup window.

    7. Choose Save and then choose Save again in the popup window.

  2. Make this theme the default theme.

    1. Use the Action Search to navigate back to Theme Manager.

    2. Choose the SF Theme radio button to make this the default theme.

    3. Choose Save and then choose Yes in the popup window.

    4. Log out and back into the system.

Task 3: Delete a Custom Theme

Your company has built up a repository of custom themes. You have been assigned to delete themes that are no longer in use. In this exercise, you delete a custom theme.

Steps

  1. Delete a custom theme.

    1. Use the Action Search to navigate to Theme Manager.

    2. Select the theme that was the default before you created your custom theme and make it the default again. Global Training Theme II is usually the default theme.

    3. Select Saveand in the Save Changes dialog choose Yes.

    4. Log out and log back in.

    5. Go back to the Theme Manager and delete the theme you created in the previous exercise SF Theme. Select the 3 buttons to the right of the theme you want to delete.

Result

You have Applied, Created, and Deleted a Theme.

Log in to track your progress & complete quizzes