Identifying Key Elements in the User Interface

In this lesson, you will learn how to identify and describe the key user interface (UI) elements involved in In-App Extensibility within SAP Sales Cloud and SAP Service Cloud Version 2. Understanding these UI components is essential because In-App Extensibility primarily works by customizing existing interface elements and structures without modifying the underlying application code.

Administrators and key users can adjust the layout, visibility, and behavior of UI elements to better support specific business processes and user roles.

The Home Page is the default start page of the application and is typically the first screen users see after logging in. It provides an overview of relevant information and quick access to important actions and business data.

The Home Page consists of cards, modular UI tiles that display specific information or functions. These cards highlight key data and allow users to quickly navigate to related tasks or additional information. Different types of cards can be used, such as KPI cards, filtered list cards, message cards, RSS feed cards, mashup cards, or quick links cards. Administrators can customize the home page by adding, hiding, or rearranging cards to better align with business priorities.

Navigation in the system is structured through Work Centers or Workspaces, which represent the highest-level navigation areas and group related functional domains. Examples include Accounts, Opportunities, Cases, Agent Desk, and Guided Selling. These work centers can be accessed through the navigation bar, which provides a central menu to browse the available functionalities. Users can either scroll through the list or search directly within the navigation menu by typing into the search field.

Another important UI element is Filters, which help users refine and search data in list views. Filters allow users to narrow down results based on criteria such as status, date, or assigned user. The system supports both quick filters and advanced filters, which can be saved and personalized. Administrators can also define commonly used filters for users, enabling faster access to relevant information.

Personalized filters are created by individual users for their own needs and apply only to those users; in contrast, administrator-defined filters are configured system-wide to meet organizational requirements and support standardized workflows. They can be distributed to groups of users through page layout configurations and assignment rules.

While the image above shows a quick filter, the next image displays an advanced filter with more detailed options for refining data.

Within the work centers, users access Pages, which represent the main work areas for specific business objects such as accounts, opportunities, or cases. Pages provide the environment where users view, maintain, and analyze business data. They contain several UI components such as tabs, sections, fields, and cards that structure the information presented to the user.

The organization of these elements is defined by the Page Layout, which determines how the page is arranged and which components are visible. Page layouts define the available tabs, sections, field placement, custom buttons, and assignment rules. While the main layout provides a consistent interface for all users, additional layouts can be created for specific user groups. This allows administrators to customize the user experience based on different roles, regions, or business requirements.

To further organize information on a page, the interface is divided into Tabs, which represent major subdivisions grouping high-level information areas. Tabs can contain sections, fields, and embedded content such as mashups. Administrators can create custom tabs and embed additional content.

Within each tab, the Sections structure related fields or components into logical groups, enhancing readability and making complex pages easier to navigate.

Finally, Fields represent the most granular elements of the user interface and are used to display or capture business data. Fields can be standard fields delivered by SAP or custom fields, often called extension fields. Extension fields allow organizations to store additional information required for specific business scenarios beyond what is available in the standard solution. These fields can be created through Extensibility Administration and then added to the user interface.

Together, these UI elements form the structural foundation of the SAP Sales Cloud and SAP Service Cloud Version 2 user interface. They represent the main areas where In-App Extensibility is used to customize the system for specific organizational needs.

The following video offers a walkthrough of how these UI elements appear and interact within the system. It shows how the home page, cards, work centers, filters, and pages are used in an SAP Sales Cloud and SAP Service Cloud Version 2 environment.

• In-App Extensibility in SAP Sales Cloud and SAP Service Cloud Version 2 allows administrators and key users to customize the user interface without modifying the underlying application code.
• The Home Page is the default landing page after login and contains cards, which are modular UI tiles used to display key information and quick actions.
• Work Centers or Workspaces represent the highest level of navigation and group related functional areas such as Accounts, Opportunities, Cases, or Agent Desk.
• Pages are the main work areas where users interact with business objects and data.
• The Page Layout defines how a page is structured, including tabs, sections, field visibility, and layout rules. Different layouts can be assigned to different user groups.
• Tabs divide pages into major information areas and can contain sections, fields, or embedded components such as mashups.
• Sections organize related fields or UI components within a tab or page to improve readability and usability.
• Filters allow users to refine data in list views and searches. They include quick filters, advanced filters, personalized filters, and administrator-defined filters.
• Fields are the smallest UI elements used to display or capture data, which can be either standard fields or extension (custom) fields created through extensibility tools.