Customizing the User Interface

Objective

After completing this lesson, you will be able to customize the user interface.

People Profile Configuration in Global Benefits

People Profile is the latest version of the Employee Profile and SAP SuccessFactors Employee Central user interface, providing a compelling and consistent user experience based on SAP Fiori design principles. People Profile supports all major functionality available in earlier versions of the UI, along with a growing number of unique new capabilities.

With People Profile, you can view and edit a person's entire profile on one simple, consolidated page, and take immediate action. You can quickly find the most important or most recent information and drill down to see more detail when needed. The responsive SAP Fiori design means that People Profile adjusts to fit your device, for optimal viewing on desktop, tablet, or smartphone.

Administrators can use a convenient drag-and-drop configuration tool to set up People Profile for your company. You can select which data fields to highlight at the top of the page and control the layout and organization of profile content for your company. Visibility of employee data on the profile is controlled by role-based permissions.

People Profile provides the user experience for Employee Central. On People Profile, you can access existing Employee Central functionality, such as employee self-service (ESS) and manager self-service (MSS). You can add and edit an employee's personal, employment, benefits, and compensation information, or view the effective-dated change history.

People Profile can be enabled in Provisioning by selecting Enable People Profile in Company Settings.

The People Profile Page Layout

Before configuring the Benefits in People Profile, you must understand the layout of the People Profile page and the terminology used to refer to different parts of the user interface.

The People Profile page is made up of the profile header and one or more profile sections. Each section consists of one or more subsections. Each subsection, in turn, consists of either one or two blocks.

Some blocks, such as the Succession block, are predefined and are not configurable, while other blocks, such as User Info and Background, are customizable and allow you to configure which data to display.

Most blocks take up half the width of a subsection, so, usually, you can fit two blocks in each subsection. Some blocks, such as Badges or Skills, take up the full width of the subsection, so, in these cases, the block and the subsection are effectively the same object.

The following image shows an example of the People Profile page. The profile header is at the top, with a blue background, followed by one section. The section contains two subsections of two blocks each.

The Profile page of a sample user, Emily Clark, admin, shows the Personal Information section, including fields for the user to edit under National ID, Address information, and Personal Information.

The following image illustrates how the preceding profile is configured in the Configure People Profile admin tool.

A screenshot of the Configure People Profile page displays sections for General Settings and Personal Information, including National ID, Address, and Personal Information blocks.

Add a Benefits Section to the People Profile

Sections are visually separated, logical groupings of information on the People Profile. Each section consists of a section title and any number of subsections containing employee information. You can add any number of sections to the profile. To add a Benefits section, complete the following steps:

Steps

  1. Use the Action Search and navigate to the Configure People Profile tool.

  2. Scroll down to the Benefits section.

  3. Enter a section title in the Edit Section panel. (By default, new sections are called Untitled).

  4. If desired, you can add translations of the new title in other languages, or you can apply your new title to all languages in the system.

  5. Choose Save to save your changes.

Adding Blocks for Benefits to the People Profile

You can add any of the available information blocks to the profile by dragging it into the desired location. You can add any number of blocks to a section, but each row of blocks is displayed as a separate subsection.

Add Blocks for Benefits to the People Profile

To add a block to any section, complete the following steps:

Steps

  1. Select the section header.

  2. Select the X icon in the corner of the Edit Section panel to return to Available Blocks.

  3. Use the search box or scroll through the Available Blocks panel to find the blocks you want to add. The block for Benefits is under Employment Information and is called My Active Enrollments.

  4. Drag the My Active Enrollments block from the Available Blocks panel to the Benefits subsection.

    A screenshot of Configure People Profile shows various sections including the Benefits section. On the right panel, a list titled Available Blocks includes sections like Employment Information and Personal Information. Under Employment Information, Global Assignment Details is highlighted as selected.

  5. If necessary, you can add translations of the title and description of customizable blocks. Unlike sections and subsections, you cannot apply the title or description to all languages in the system.

  6. When you are finished adding blocks, select Save.

Configuration of Sections for Benefits

You can configure sections for benefits to meet your company’s needs. You can choose to show or hide a benefit section, rename it, or sort the benefits by moving it up or down.

A screenshot of the Benefits section includes Benefits Overview with an open window, My Active Enrollments, displaying data about child supplemental life insurance, employee supplemental life insurance, and life insurance.

Prerequisites

To enable the use of this feature:

  • Enable People Profile.

  • Import the predefined template from the SuccessStore.

A screenshot of the Import and Export Data section shows a list of packages available for import. The radio button is selected next to one of the options: Predefined Benefits Sections Configuration_b1808.

Configure Sections for Benefits

Steps

  1. Import the Benefits Sections Configuration template from SuccessStore

    1. From the Admin Search, enter Import and Export Data.

    2. Select Import Data.

    3. Select the SuccessStore tab.

    4. Select Predefined Benefits Sections Configuration_b1808.

    5. Select Import.

  2. View the results of the import using the Scheduled Job Manager

    1. From the Admin Search, enter Scheduled Job Manager.

    2. Verify the import status completed with no errors.

  3. Configure the Benefits section of the People Profile

    1. In the Admin Center, search for Configure Sections for Benefits.

    2. In the Benefit Section workspace, you can opt to make any of the following changes:

      • Show a section.
      • Rename a section.
      • View and edit translations.
      • Reorder sections.
    A screenshot of the Configure Sections for Benefits page It shows a list of six sections: Enrollments, Insurances, Reimbursements, Allowances, Pensions, and Deductible Allowances, all with options to show/hide, rename/reset, translate, and reorder.

UI Configuration for Global Benefits

You can use the Manage Configuration UI tool to create and modify blocks that appear on the People Profile. Some of the changes you can make using this tool include:

  • Changing field labels
  • Adding new fields
  • Changing the sequence of fields
  • Managing field visibility

For Global Benefits, the following Configuration UIs are delivered in the standard solution:

  • BenefitConfigUI

  • BenefitEmployeeClaimConfigUI

  • BenefitEnrollmentConfigUI

  • BenefitProgramConfigUI

  • BenefitProgramEnrollmentConfigUI

A screenshot of the Manage Configuration UI screen.

Modify the Active Configuration UI

Steps

  1. Use the Action Search and navigate to the Manage Configuration UI tool.

  2. Search for the relevant Configuration UI.

  3. Hover over any section to reveal the toolbar. 

    A screenshot of the user interface for configuring benefits shows options to add a field, a link, a group, or a reference, as well as options to edit properties and delete.

  4. Hover over any field to see the Edit Properties and Delete icons.

    The screenshot focuses on the Benefit ID field with an instruction to 'click or focus to edit'. Other fields to edit include Benefit Name, Effective From Date, Program, and Status.

  5. Change the sections or fields.

  6. Select Save.

    Note

    It is recommended to make a copy of the standard Configuration UI and then modify the copy instead of changing the standard Configuration UI.

Map the Configuration UI for Benefits

The next step is to match each Configuration UI with its benefit object. For example, in the following steps, you can map the BenefitConfigUI to the Benefit object.

Steps

  1. Use the Action Search to open the Manage Data tool.

  2. In Create New, select Benefits Screen Lookup.

  3. Enter the Object Type and Screen ID.

    Screenshot of the interface showing a search for Benefits and Benefits Screen Lookup. Fields to edit include Object Type and Screen ID.

  4. Repeat these steps to create the following Benefit Screen Lookup instances:

    ObjectObject Screen
    BenefitBenefitConfigUI_Version2
    Insurance PlanBenefitInsurancePlanConfigUI_Version2
    Benefit ProgramBenefitProgramConfigUI
    Benefit Employee ClaimBenefitEmployeeClaimConfigUI
    Benefit EnrollmentBenefitEnrollmentConfigUI
    Benfit Program EnrollmentBenefitProgramEnrollmentConfigUI

Creating and Mapping a Custom Configuration UI

Different types of benefits can be individualized with custom Enrollment UI Screens. Each benefit can have its own Configuration UI screen attached for enrollments and claims. It allows you to control various sections of the screen based on different benefit types, without requiring complex user interface rules.

For example, let's say you want the Benefits Enrollment screen for your company's dental plan slightly different than the standard benefits enrollment. We see in the preceding table that base object Benefit Enrollment has the Screen ID BenefitEnrollmentConfigUI. The enrollment screen ID is created by creating a new Configuration UI screen that uses the same base object (Benefit Enrollment), and applying a new Screen ID. Once you have made the customizations, the new screen can now be mapped to a benefit. As a result, employees who enroll in this specific benefit then it sees the new screen when enrolling in the dental plan.

Create a New Configuration UI

Steps

  1. Use the Action Search and navigate to the Manage Configuration UI tool.

  2. Select Create New.

  3. Enter a new ID. In this example, the ID is BenefitEnrollmentDental.

  4. In the Select Base Object field, select Benefit Enrollment.

  5. Hover over a field and select Edit Properties.

  6. Make any required changes to the field properties.

    Note

    The following image shows how to change the label on the Selected Benefits field to Selected Dental Benefits.
    A screenshot of the Benefit Enrollment section on the Manage Configuration UI. In the Selected Benefit category, the Edit Properties icon is selected, which opens a window entitled Properties with configuration options, such as, Name, Value Type, and Value Type Resolver, among others.

  7. Select Save.

Map a Benefit to a Custom Configuration UI

Steps

  1. Use the Action Search and navigate to the Benefits Admin Overview tool.

  2. Search for the benefit for which you want to map the new UI.

  3. Select Take Action → Make Correction.

  4. Scroll down to Step 5: Define Enrollment Details.

  5. Add the Configuration UI to the Enrollment Screen ID field.

    The screen shows Step 5 Define Enrollment Details and focuses on the instruction that reads Associate Any Additional Enrollment Fields and Config UI Screen Specific to this Benefit (Optional). BenefitEnrollment_Dental is selected in the Enrollment Screen ID field.

  6. Select Save.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn